Tutto è cominciato quando ho ho avuto la necessità, per un nuovo progetto, di creare una classe che potesse svolgere le stesse operazioni all’interno dell’intero progetto, un po’ come il concetto di Service che ha Angular.

Per fare questo su Vue esistono tanti modi, ma sicuramente il più corretto, se vogliamo mantenere l’approccio alla metodologia di Vue è quello di utilizzare un Plugin.

Che cos’è un Plugin Vue

Un Plugin di Vue non è niente di più di un modo semplice e veloce per aggiungere delle funzionalità globali al progetto.
Può essere utilizzato per diversi scopi, come quello di creare delle direttive, ma non è il modo in cui l’ho utilizzato io.

A cosa serve

Nel mio caso specifico, che è quello che vi mostrerò, è quello di utilizzare una sorta di wrap per axios, per fare in modo che ogni richiesta http sia più snella ed eventualmente permettere una gestione dei dati e degli errori personalizzata.

Scriviamo il nostro primo Plugin

Concettualmente è molto semplice.
Un plugin deve avere un metodo .install che prende due parametri, uno è l’istanza Vue e l’altro sono le options che vogliamo passare al nostro plugin, ad esempio se vogliamo inizializzarlo in qualche modo particolare.

Per mostrare un esempio di come un plugin funzioni proviamo a crearne uno, semplice semplice, che scrive in console un messaggio ogni volta che viene caricato nel DOM.

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

Nella prima parte utilizziamo il metodo install, come detto prima, per indicare a Vue che questo è un plugin.
Fatto questo, in mixin, possiamo fare l’inject di tutte le funzionalità che ci occorrono, ad esempio, utilizzando il metodo mounted(), come qualunque altro componente Vue, nel momento in cui il nostro plugin sarò caricato nel DOM, scriverà in console ‘Mounted’.

Ora basterà importarlo e usarlo con 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)
});

Utilizzando questo approccio, possiamo inserire e rimuovere funzionalità a nostro piacimento, rendendo il progetto snello e aiutandoci in un eventuale distribuzione del nostro plugin.

Aggiungere funzionalità al nostro plugin

Se vogliamo aggiungere componenti o direttive al nostro plugin, possiamo inserirle in modo semplice:

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;

Modificare l’oggetto globale Vue

Possiamo anche modificare l’oggetto Vue, in modo veloce, può essere comodo per aggiungere funzionalità globali, direttamente sull’oggetto Vue.

const MyPlugin {
  install(Vue, options) {
    Vue.myAddedProperty = 'Example Property'
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};

export default MyPlugin;

Se invece vogliamo aggiungere parametri e metodi all’istanza del nostro plugin, piuttosto che all’oggetto globale Vue, possiamo farlo così:

const MyPlugin {
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Example Property'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }
  }
};

export default MyPlugin;

Dal momento che usiamo questa notazione e che decidiamo di distribuire il nostro plugin ad altri utenti vue, è previsto che davanti alla notazione $ venga applicato un prefisso per identificare, quanto più univocamente possibile, il nostro plugin.

Potremmo anche fare in modo che il nostro plugin sia immediatamente disponibile, senza dover indicare a Vue di inglobarlo.
Per farlo basterò aggiungere alla fine del plugin:

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

Conclusioni

Come puoi vedere è davvero facile sviluppare un plugin e puoi utilizzare tutti i metodi di lifecycle di Vue, come abbiamo fatto noi con il metodo mounted().
Adesso puoi usarlo come meglio credi, e sei anche pronto per distribuirlo alla comunità. 😉

Ti lascio con due riferimenti importanti.
Il collegamento alla documentazione Vue per la creazione di plugin, il quale troverai altri interessanti approfondimenti.
E la guida, sempre nella documentazione di Vue, su come è possible un pacchetto e distribuirlo su npm