Você está navegando a documentação da v2.x e anterior. Para a v3.x, clique aqui.

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) { // alguma lógica ... } }