Close
Cliquez ici pour la documentation v3.x.

Guide

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Plugins

Les plugins sont habituellement ajoutés au niveau des fonctionnalités globales de Vue. Il y a un cadre strictement défini pour un plugin et il y a divers types de plugins que vous pouvez écrire pour :

  1. Ajouter plusieurs méthodes globales ou propriétés. Par ex. vue-custom-element

  2. Ajouter une ou plusieurs ressources globales : directives, filters, transitions, etc. Par ex. vue-touch

  3. Ajouter plusieurs options de composant avec un mixin global. Par ex. vue-router

  4. Ajouter des méthodes d’instance de Vue en les reliant au prototype de Vue.

  5. Fournir une bibliothèque qui fournit sa propre API, et qui en même temps injecte une combinaison des points précédents. Par ex. vue-router

Utiliser un plugin

Utiliser un plugin en appelant la méthode globale Vue.use() :

// appelle `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

Vous pouvez optionnellement passer certaines options :

Vue.use(MyPlugin, { someOption: true })

Vue.use empêchera automatiquement l’utilisation du même plugin plusieurs fois. Ainsi, appeler cette fonction plusieurs fois sur le même plugin n’installera le plugin qu’une seule fois.

Certains plugins fournis officiellement par Vue.js comme vue-router appellent automatiquement Vue.use() si Vue est disponible en tant que variable globale. Cependant, dans un environnement modulaire comme avec CommonJS, vous devrez toujours appeler explicitement Vue.use() :

// En utilisant CommonJS depuis Browserify ou webpack
var Vue = require('vue')
var VueRouter = require('vue-router')

// N'oubliez pas de l'appeler
Vue.use(VueRouter)

Consultez awesome-vue pour une large collection de plugins et bibliothèques fournis par la contribution de la communauté.

Écrire un plugin

Un plugin Vue.js devrait exposer une méthode install. Cette méthode sera appelée avec le constructeur de Vue en tant que premier argument, avec les options possibles suivantes :

MyPlugin.install = function (Vue, options) {
  // 1. ajouter une méthode globale ou une propriété
  Vue.myGlobalMethod = function () {
    // de la logique de code...
  }

  // 2. ajouter une ressource globale
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // de la logique de code...
    }
    ...
  })

  // 3. injecter des options de composant
  Vue.mixin({
    created: function () {
      // de la logique de code...
    }
    ...
  })

  // 4. ajouter une méthode d'instance
  Vue.prototype.$myMethod = function (methodOptions) {
    // de la logique de code...
  }
}
← Fonctions de rendu et JSX Filtres →
Une erreur dans cette page ou une envie de contribuer à la traduction ? Éditez cette page sur GitHub !