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

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.

// 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 importé.

// 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'

});