Vue.js permet d'étendre ses capacités grâce au mécanisme des plugins. Chaque plugin doit exposer une méthode nommée install. Cette méthode reçoit le constructeur Vue comme premier argument, et un objet d'options facultatfi comme second argument :

MyPlugin.install = function (Vue, options) {
  // 1. Ajout d'une méthode ou propriété globale
  Vue.myGlobalMethod = function (args) {
    // Logique globale...
  }

  // 2. Enregistrement d'une directive globale
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // Logique de la directive...
    }
    // ... autres hooks de directive
  })

  // 3. Injection de logique dans tous les composants via mixin
  Vue.mixin({
    created: function () {
      // Logique exécutée à la création de chaque composant...
    }
    // ... autres hooks de cycle de vie
  })

  // 4. Ajout d'une méthode d'instance globale
  Vue.prototype.$myMethod = function (params) {
    // Logique spécifique à l'instance...
  }
}

Voici un exemple concret d'implémentation d'un plugin pour gérer les requêtes réseau et ajouter une méthode utilitaire.

// Fichier : request.js
import axios from 'axios'; // Supposons que axios est installé

const ApiService = {
    install(Vue, options) {
        // Création d'une instance Vue dédiée pour encapsuler les méthodes API
        // et une donnée globale pour l'exemple.
        const apiInstance = new Vue({
            data: {
                baseUrl: 'https://api.example.com' // Exemple d'URL de base
            },
            methods: {
                // Méthode pour les requêtes POST
                post(endpoint, payload) {
                    return new Promise((resolve, reject) => {
                        axios.post(`${this.baseUrl}${endpoint}`, payload)
                            .then(response => {
                                resolve(response.data);
                            })
                            .catch(error => {
                                // Gestion des erreurs plus détaillée
                                if (error.response) {
                                    reject(error.response.data || error.response.statusText);
                                } else if (error.request) {
                                    reject('Network Error');
                                } else {
                                    reject(error.message);
                                }
                            });
                    });
                },
                // Méthode pour les requêtes GET
                get(endpoint, params) {
                    return new Promise((resolve, reject) => {
                        axios.get(`${this.baseUrl}${endpoint}`, { params })
                            .then(response => {
                                resolve(response.data);
                            })
                            .catch(error => {
                                // Gestion des erreurs similaire au POST
                                if (error.response) {
                                    reject(error.response.data || error.response.statusText);
                                } else if (error.request) {
                                    reject('Network Error');
                                } else {
                                    reject(error.message);
                                }
                            });
                    });
                }
            }
        });

        // Ajout de l'instance API comme propriété globale à chaque instance Vue
        Vue.prototype.$api = apiInstance;

        // Ajout d'une méthode utilitaire simple
        Vue.prototype.$logMessage = function(message) {
            console.log(`[App Log]: ${message}`);
        };
    }
};

export default ApiService;

Pour utiliser ce plugin, importez-le et enregistrez-le dans votre fichier principal (par exemple, main.js) :

// Fichier : main.js
import Vue from 'vue';
import App from './App.vue';
import ApiService from './lib/request.js'; // Assurez-vous que le chemin est correct

Vue.config.productionTip = false;

// Enregistrement du plugin
Vue.use(ApiService);

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

Vous pouvez ensuite accéder aux méthodes et propriétés ajoutées dans n'importe quel composant de votre applciation :

// Dans un composant Vue
<template>
  <div>
    <button>Récupérer les données</button>
    <p>Donnée reçue: {{ receivedData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const data = await this.$api.get('/users/profile', { userId: 123 });
        this.receivedData = data;
        this.$logMessage('Données utilisateur récupérées avec succès.');
      } catch (error) {
        this.$logMessage(`Erreur lors de la récupération des données: ${error}`);
        console.error("Détail de l'erreur:", error);
      }
    }
  },
  mounted() {
    // Exemple d'utilisation de la donnée globale
    this.$logMessage(`L'URL de base de l'API est: ${this.$api.baseUrl}`);
  }
}
</script>