Comment créer vos propres plugins Vue.js

vus custom plugin

Les plugins Vue.js constituent un moyen puissant mais simple d’ajouter des fonctionnalités globales à votre application. Ils ont une variété d’utilisations, de la distribution de composants à l’échelle de l’application à l’ajout de capacités supplémentaires telles que le routage et les structures de données immuables à votre application. Dans cet article je vais vous expliquez comment créer vos propres vue custom plugin.

Créer son premier custom plugin vue js

En guise d’introduction au monde des plugins Vue, nous allons écrire un plugin qui écrit dans la console chaque fois qu’un composant est monté dans le DOM.

vue custom plugin
const MyPlugin = {
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

Un plugin Vue est un objet avec une méthode install qui prend deux paramètres :

  1. l’objet global Vue
  2. et un objet contenant des options définies par l’utilisateur


Vue.mixin() est utilisé pour injecter des fonctionnalités dans tous les composants. Dans ce cas, la méthode mounted() s’exécute lorsque le composant est ajouté au DOM.

Votre plugin peut maintenant être utilisé dans une application Vue en l’important et en appelant Vue.use(MyPlugin) :

vue custom plugin
import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'

Vue.use(MyPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
});

Vous vous demandez peut-être pourquoi je ne pouvais pas faire cela en appelant Vue.mixin() dans le fichier main.js ? La raison en est que, puisque nous ajoutons à Vue une fonctionnalité globale qui ne modifie pas directement l’application, il est presque toujours préférable de la répartir dans un module distinct qui peut être ajouté ou supprimé à volonté. Cela rend également les plugins incroyablement faciles à distribuer.

Ajouter des fonctionnalités

Vous pouvez ajouter des points d’accroche du cycle de vie et apporter d’autres modifications aux composants Vue en utilisant un mixin.

vue custom plugin
const MyPlugin = {
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

Ajouter des composants et des directives

Si vous souhaitez empaqueter des composants ou des directives pour les distribuer sous forme de plugin, vous pouvez écrire quelque chose comme ceci :

vue custom plugin
import MyComponent from './components/MyComponent.vue'
import MyDirective from './directives/MyDirective.js'

const MyPlugin {
  install(Vue, options) {
    Vue.component(MyComponent.name, MyComponent)
    Vue.directive(MyDirective.name, MyDirective)
  }
};

export default MyPlugin;

Modifier l'objet Vue global

Vous pouvez modifier l’objet Vue global à partir d’un plugin :

vue custom plugin
const MyPlugin {
  install(Vue, options) {
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};

export default MyPlugin;

Modifier les instances Vue

Pour ajouter une propriété ou une méthode directement aux instances de composants sans mécanisme d’injection, vous pouvez modifier le prototype Vue comme indiqué ici :

vue custom plugin
const MyPlugin {
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Exemple de propriété'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }
  }
};

export default MyPlugin;

Ces propriétés seront désormais ajoutées à tous les composants et instances Vue.

Prise en charge de l'installation automatique

Pour les personnes qui utilisent votre plugin en dehors d’un système de modules, on s’attend souvent à ce que si votre plugin est inclus après la balise Vue script, il s’installe automatiquement sans qu’il soit nécessaire d’appeler Vue.use(). Vous pouvez implémenter cela en ajoutant ces lignes à la fin de votre plugin :

vue custom plugin
const MyPlugin {
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Exemple de propriété'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }
  }
};

export default MyPlugin;

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyPlugin)
}

Installation sera automatique si Vue a été ajouté à la portée globale.

Plus d'articles sur VueJS

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.