Clique aqui para a documentação da v3.x.

Guia

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 ...
  }
}
← Funções de Renderização & JSX Filtros →
Encontrou um erro ou quer contribuir com a documentação? Edite isto no Github! Deploy feito via Netlify .