Nuxt 3 Release Candidate beta já está disponível! Descobre mais sobre isso v3.nuxtjs.org

Translated page Contents of this page might be outdated.

O diretório plugins

O diretório plugins contém seus plugins escritos em JavaScript que você deseja executar antes da instanciação da raiz da aplicação Vue.js.


Este é o lugar para adicionar os plugins do Vue e injetar funções ou constantes. Toda vez que você precisar usar o Vue.use(), você deve criar um ficheiro dentro de plugins/ e adicionar seu caminho ao plugins dentro do nuxt.config.js.

Pacotes externos

Você pode querer usar pacotes/módulos externos dentro da sua aplicação (um grande exemplo é o axios ) para fazer requisições HTTP para ambos servidor e cliente.

Primeiro, instale ele via npm ou yarn.

Yarn
yarn add @nuxtjs/axios
NPM
npm install @nuxtjs/axios

Você pode configurar por exemplo os intercetores para reagir a possíveis erros da chamadas da sua API através da aplicação. Dentro deste exemplo nós redirecionamos o usuário para uma página de erro personalizada chamada desculpa (sorry) quando nós recebemos um estado de erro 500 por parte da nossa API.

plugins/axios.js
export default function ({ $axios, redirect }) {
  $axios.onError(error => {
    if (error.response.status === 500) {
      redirect('/sorry')
    }
  })
}

Por último mas não menos importante, adicionar o módulo e o recentemente criado plugin à configuração do projeto.

nuxt.config.js
module.exports = {
  modules: ['@nuxtjs/axios'],
  plugins: ['~/plugins/axios.js']
}

Depois podemos usar ele diretamente dentro do seu componentes de página:

pages/index.vue
<template>
  <h1>{{ post.title }}</h1>
</template>

<script>
export default {
    async asyncData ({ $axios, params }) {
      const  post  = await $axios.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
}
</script>

Uma outra maneira de usar o axios sem instalar o módulo é importando axios diretamente dentro da tag <script>.

pages/index.vue
<script>
import axios from 'axios'

export default {
    async asyncData ({ params }) {
      const { data: post }  = await axios.get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
}
</script>
Se você receber um erro Cannot use import statement outside a module (Você não pode usar a declaração de importação fora de um módulo), você pode precisar adicionar o seu pacote à opção build > transpile dentro do nuxt.config.js para o carregador do webpack tornar o seu plugin disponível.
nuxt.config.js
build: {
  // Você pode estender a configuração do webpack aqui
  transpile: ['npm-package-name'],
},

Plugins de Vue

Se você quiser usar plugins do vue, como v-tooltip para exibir dicas da ferramenta (tooltips) dentro da sua aplicação, nós precisamos configurar o plugin antes do lançamento da aplicação.

Primeiro, nós precisamos instalar ele

Yarn
yarn add v-tooltip
NPM
npm install v-tooltip

Depois criamos o ficheiro plugins/vue-tooltip.js

plugins/vue-tooltip.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

A propriedade plugins

Então nós adicionamos o caminho do ficheiro dentro a chave plugins do nosso nuxt.config.js. A propriedade plugins permite você adicionar plugins do Vue.js à sua aplicação principal. Todos os caminhos definidos dentro da propriedade plugins serão importados antes da inicialização da aplicação principal.

nuxt.config.js
export default {
  plugins: ['~/plugins/vue-tooltip.js']
}

Plugins do ES6

Se o plugin está localizado dentro do node_modules e exporta um módulo ES6, você pode precisar adicionar ele à opção de construção transpile:

nuxt.config.js
module.exports = {
  build: {
    transpile: ['vue-tooltip']
  }
}

Você pode recorrer a documentação da configuração do build para saber mais sobre a opção build.

Apenas no lado do cliente ou servidor

Alguns plugins podem funcionar apenas dentro do browser por causa da falta suporte ao SSR.

Nomear de maneira convencional o plugin

Se é suposto um plugin ser executado apenas no lado do cliente ou servidor, .client.js ou .server.js podem ser aplicados como uma extensão do ficheiro do plugin. O ficheiro será automaticamente incluído apenas no respetivo lado (do cliente ou servidor).

nuxt.config.js
export default {
  plugins: [
    '~/plugins/foo.client.js', // apenas no lado do cliente
    '~/plugins/bar.server.js', // apenas no lado do servidor
    '~/plugins/baz.js' // ambos cliente e servidor
  ]
}

A sintaxe de objeto

Você pode também usar a sintaxe de objeto com a propriedade mode com o valor ('client' ou 'server') dento de plugins.

nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/both-sides.js' },
    { src: '~/plugins/client-only.js', mode: 'client' }, // apenas no lado do cliente
    { src: '~/plugins/server-only.js', mode: 'server' } // apenas no lado do servidor
  ]
}

Injetar dentro do $root e contexto

Algumas vezes você deseja tornar as funções ou valores disponíveis ao longo da sua aplicação. Você pode injetar essas variáveis dentro das instâncias do Vue (lado do cliente), o contexto (lado do servidor) e até dentro da memória do Vuex. É uma convenção prefixar essas funções com um $.

O Nuxt fornece a você uma maneira de fazer isso facilmente com um método inject(key, value). O inject é dado como segundo parâmetro quando exportamos uma função. O $ será pré-adicionado automaticamente a chave.

É importante saber que de todo ciclo de vida da instância do Vue , apenas os gatilhos beforeCreate e created são chamados ambos, no lado do cliente e no lado do servidor. Todos os outros gatilhos são apenas chamado no lado do cliente.
plugins/hello.js
export default ({ app }, inject) => {
  // Injete $hello(msg) dentro do Vue, contexto e memória.
  inject('hello', msg => console.log(`Hello ${msg}!`))
}
nuxt.config.js
export default {
  plugins: ['~/plugins/hello.js']
}

Agora o serviço $hello pode ser acessado a partir do context e this dentro das páginas, componentes, plugins, e ações da memória.

example-component.vue
export default {
  mounted() {
    this.$hello('mounted')
    // irá exibir no terminal 'Hello mounted!'
  },
  asyncData({ app, $hello }) {
    $hello('asyncData')
    // Se estiver usando Nuxt <= 2.12, use 👇
    app.$hello('asyncData')
  }
}
store/index.js
export const state = () => ({
  someValue: ''
})

export const actions = {
  setSomeValueToWhatever({ commit }) {
    this.$hello('store action')
    const newValue = 'whatever'
    commit('changeSomeValue', newValue)
  }
}
Não use o Vue.use(), Vue.component() e globalmente não conecte nada ao Vue dentro desta função, dedicada a injeção do Nuxt. Isso causará vazamento de memória no lado do servidor.

A propriedade extendPlugins

Você talvez queira estender os plugins ou mudar as ordem dos plugins criada pelo Nuxt. Esta função aceita um array de objetos de plugin e deve retornar um array de objetos de plugin.

Exemplo de mudança da ordem de plugins:

nuxt.config.js
export default {
  extendPlugins(plugins) {
    const pluginIndex = plugins.findIndex(
      ({ src }) => src === '~/plugins/shouldBeFirst.js'
    )
    const shouldBeFirstPlugin = plugins[pluginIndex]

    plugins.splice(pluginIndex, 1)
    plugins.unshift(shouldBeFirstPlugin)

    return plugins
  }
}

Mixins global

Mixins global pode ser facilmente adicionado com plugins do Nuxt mas pode causar problemas e vazamento de memória quando não manipulado corretamente. Sempre que você adicionar um mixin global a sua aplicação, você deve usar um bandeira para evitar registar ele várias vezes:

plugins/my-mixin-plugin.js
import Vue from "vue"

// Certifique-se de pegar um nome único para a bandeira
// assim ele não irá entrar em conflito com qualquer outro mixin.
if (!Vue.__my_mixin__) {
  Vue.__my_mixin__ = true
  Vue.mixin({ ... }) // Depois configure o seu mixin
}
Edit this page on GitHub Updated at Tue, Aug 16, 2022