Plugins

Plugins geralmente acrescentam funcionalidade ao Vue em nível global. Não há um escopo estrito definido para um plugin - existem vários tipos que você pode escrever:

  1. Adicionar alguns métodos e propriedades globais. Ex.: vue-custom-element

  2. Adicionar um ou mais recursos globais: diretivas/filtros/transições etc. Ex.: vue-touch

  3. Adicionar algumas opções de componente via mixin global. Ex.: vue-router

  4. Adicionar métodos para instâncias Vue incluindo-os em Vue.prototype.

  5. Uma biblioteca com uma API própria, que ao mesmo tempo injeta alguma combinação dos anteriores. Ex.: vue-router

Usando um Plugin

Use plugins chamando o método global Vue.use(). Isto precisa ser feito antes que você inicie sua aplicação através de new Vue():

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

new Vue({
//... opções
})

Você pode, opcionalmente, passar algumas opções ao plugin:

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

Vue.use automaticamente lhe previne de usar o mesmo plugin mais de uma vez, portanto, chamá-lo múltiplas vezes no mesmo plugin irá instalá-lo apenas uma vez.

Alguns plugins oferecidos pela equipe do Vue de forma oficial, como o vue-router, automaticamente chamam Vue.use() se Vue estiver disponível como uma variável global. Entretanto, em um ambiente de módulos como CommonJS, você sempre precisará chamar Vue.use() explicitamente:

// Quando usar CommonJS via Browserify ou Webpack
var Vue = require('vue')
var VueRouter = require('vue-router')

// Não esqueça de chamar isto
Vue.use(VueRouter)

Dê uma olhada na lista awesome-vue para uma enorme coleção de plugins e bibliotecas criadas a partir de contribuições da comunidade.

Escrevendo um Plugin

Um plugin do Vue deve expor um método install. Esse método será chamado tendo o construtor Vue como primeiro argumento, junto com possíveis options:

MyPlugin.install = function (Vue, options) {
// 1. adicionar método ou propriedade global
Vue.myGlobalMethod = function () {
// alguma lógica ...
}

// 2. adicionar um recurso global
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// alguma lógica ...
}
...
})

// 3. adicionar algumas opções de componente
Vue.mixin({
created: function () {
// alguma lógica ...
}
...
})

// 4. adicionar um método de instância
Vue.prototype.$myMethod = function (methodOptions) {
// algo lógico ...
}
}