O Nuxt lê automaticamente os arquivos no diretório plugins/ e os carrega na criação da aplicação Vue.

Plugins Registrados

Apenas arquivos no nível superior do diretório (ou arquivos index dentro de qualquer subdiretório) serão registrados automaticamente como plugins.

-| plugins/
---| foo.ts      // escaneado
---| bar/
-----| baz.ts    // não escaneado
-----| foz.vue   // não escaneado
-----| index.ts  // atualmente escaneado, mas obsoleto

Apenas foo.ts e bar/index.ts seriam registrados.

Para adicionar plugins em subdiretórios, você pode usar a opção plugins no nuxt.config.ts:

export default defineNuxtConfig({
  plugins: [
    '~/plugins/bar/baz',
    '~/plugins/bar/foz'
  ]
})

Criando Plugins

O único argumento passado para um plugin é nuxtApp.

export default defineNuxtPlugin(nuxtApp => {
  // Fazendo algo com nuxtApp
})

Plugins com Sintaxe de Objeto

Também é possível definir um plugin usando uma sintaxe de objeto, para casos de uso mais avançados. Por exemplo:

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // ou 'post'
  async setup (nuxtApp) {
    // isso é equivalente a um plugin funcional normal
  },
  hooks: {
    // Você pode registrar diretamente hooks de runtime do Nuxt app aqui
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // faça algo no hook
    }
  },
  env: {
    // Defina este valor como `false` se você não quiser que o plugin seja executado ao renderizar componentes apenas no servidor ou em ilhas.
    islands: true
  }
})

Ordem de Registro

Você pode controlar a ordem em que os plugins são registrados prefixando com numeração 'alfabética' nos nomes dos arquivos.

plugins/
 | - 01.myPlugin.ts
 | - 02.myOtherPlugin.ts

Neste exemplo, 02.myOtherPlugin.ts poderá acessar qualquer coisa que foi injetada por 01.myPlugin.ts.

Isso é útil em situações onde você tem um plugin que depende de outro plugin.

Estratégia de Carregamento

Plugins Paralelos

Por padrão, o Nuxt carrega plugins sequencialmente. Você pode definir um plugin como parallel para que o Nuxt não espere até o final da execução do plugin antes de carregar o próximo plugin.

export default defineNuxtPlugin({
  name: 'my-plugin',
  parallel: true,
  async setup (nuxtApp) {
    // o próximo plugin será executado imediatamente
  }
})

Plugins com Dependências

Se um plugin precisa esperar por outro plugin antes de ser executado, você pode adicionar o nome do plugin ao array dependsOn.

export default defineNuxtPlugin({
  name: 'depends-on-my-plugin',
  dependsOn: ['my-plugin'],
  async setup (nuxtApp) {
    // este plugin esperará pelo final da execução de `my-plugin` antes de ser executado
  }
})

Usando Composables

Você pode usar composables assim como utils dentro de plugins Nuxt:

export default defineNuxtPlugin((nuxtApp) => {
  const foo = useFoo()
})

No entanto, tenha em mente que há algumas limitações e diferenças:

Fornecendo Helpers

Se você gostaria de fornecer um helper na instância NuxtApp, retorne-o do plugin sob uma chave provide.