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.
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 :
- l’objet global Vue
- 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) :
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.
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 :
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 :
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 :
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 :
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.
