Guía

Plugins

Los Plugins usualmente agregan funcionalidades globales a Vue. No hay un scope estrictamente definido para un Plugins, por lo general hay varios tipos de Plugins:

  1. Agregar algunos métodos globales o propiedades. Por ejemplo: vue-custom-element

  2. Agregar uno o más recursos globales: directivas, filtros, transiciones etc. Por ejemplo: vue-touch

  3. Agregar algunas opciones de componentes via mixin global. Por ejemplo: vue-router

  4. Agregar algunos métodos de instancia de Vue incluyéndolos en Vue.prototype.

  5. Una librería que proporciona una API propia, mientras que al mismo tiempo inyecta alguna combinación de lo anterior. Por ejemplo: vue-router

Usando un Plugin

Use plugins llamando al metodo global Vue.use(). Esto debe hacerse antes de iniciar su aplicación a través de new Vue():

// llamados a `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  //... opciones
})

Opcionalmente puede pasar algunas opciones:

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

Vue.use evita automáticamente que use el mismo plugin más de una vez, por lo que si lo llama varias veces en el mismo plugin solo instalará el plugin una vez.

Algunos plugins proporcionados por los complementos oficiales de Vue.js como vue-router automaticamente llaman a Vue.use() si Vue está disponible como una variable global. Sin embargo, en un entorno de módulos como CommonJS, siempre necesita llamar a Vue.use() explícitamente:

// Cuando usa CommonJS via Browserify o Webpack
var Vue = require('vue')
var VueRouter = require('vue-router')

// No olvide hacer esto
Vue.use(VueRouter)

Eche un vistazo a la lista awesome-vue para una gran colección de plugins y librerías aportadas por la comunidad.

Escribiendo un Plugin

Un plugin de Vue.js debe exponer un método install. Este método será llamado teniendo el constructor Vue como primer argumento, junto con posibles opciones:

MyPlugin.install = function (Vue, options) {
  // 1. agregar método global o propiedad
  Vue.myGlobalMethod = function () {
    // algo de lógica...
  }

  // 2. agregar un recurso global
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // algo de lógica...
    }
    ...
  })

  // 3. inyectar algunas opciones de componentes
  Vue.mixin({
    created: function () {
      // algo de lógica...
    }
    ...
  })

  // 4. agregar un método de instancia
  Vue.prototype.$myMethod = function (methodOptions) {
    // algo de lógica...
  }
}
← Funciones de renderizado & JSX Filtros →
¿Encontró un error o simplemente quiere contribuir con la documentación? Edite esta página en GitHub! Puesto en marcha en Netlify