Azur Web
Henrique Rodrigues
Développeur Web

Importer un module dans vuejs pour qu'il soit utilisation dans tous les "components"

Javascript

Vue 2

Problématique à régler

Dans une application vuejs nous avons l'habitude d'utiliser des modules npm pour faciliter le développement de notre application.

Certains de ces modules peuvent être intégré directement dans le système vuejs grâce à la méthode Vue.use() dans le fichier main.js.

// Fichier: main.js
// Exemple avec le module vue-router

import VueRouter from 'vue-router';

Vue.use(VueRouter);

Mais comment procéder si notre module n'a pas d'équivalent pour vuejs?

Importer un module dans vuejs (sans utiliser Vue.use())

Attention ce qui suit est une astuce. Je ne sais pas si cette méthode fait partie des bonnes pratiques sur vuejs.

Pour importer n'importe quel module de npm dans le contexte global afin que celui-ci soit utilisable dans tous les "components", nous allons utiliser l'objet "window".

Nous allons tout simplement attacher à l'objet window une nouvelle méthode. Dans cette méthode nous stockons le module préalablement importer.

// Dans le fichier main.js
// Exemple avec le module swiper

import swiper from 'swiper/js/swiper.min';
window.Swiper = swiper;

Dans notre exemple, il est désormais possible d'utiliser le module swiper. Nous pouvons le faire de deux manières. En utilisant l'objet window ou en appelant directement la méthode.

// -- 1ère méthode: En utilisant l'objet window

const mySwiper = new window.Swiper('.swiper-container', {

	speed: 500,
	effect: 'coverflow'

});


// ----------------


// -- 2ème méthode: En utilisant directement la méthode

const mySwiper = new Swiper('.swiper-container', {

	speed: 500,
	effect: 'coverflow'

});
Email
Cela ne fontionne pas.