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 add @nuxtjs/axios

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.

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.

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

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

<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>.

<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>

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 add v-tooltip

npm install v-tooltip

Depois criamos o ficheiro 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.

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:

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).

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.

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.

export default ({ app }, inject) => {
  // Injete $hello(msg) dentro do Vue, contexto e memória.
  inject('hello', msg => console.log(`Hello ${msg}!`))
}

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.

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')
  }
}

export const state = () => ({
  someValue: ''
})

export const actions = {
  setSomeValueToWhatever({ commit }) {
    this.$hello('store action')
    const newValue = 'whatever'
    commit('changeSomeValue', newValue)
  }
}

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:

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:

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
}