Nuxt lee automáticamente los archivos en el directorio plugins/ y los carga al crear la aplicación Vue.

Plugins Registrados

Solo los archivos en el nivel superior del directorio (o archivos index dentro de cualquier subdirectorio) se registrarán automáticamente como plugins.

-| plugins/
---| foo.ts      // escaneado
---| bar/
-----| baz.ts    // no escaneado
-----| foz.vue   // no escaneado
-----| index.ts  // actualmente escaneado pero obsoleto

Solo foo.ts y bar/index.ts serían registrados.

Para agregar plugins en subdirectorios, puedes usar la opción plugins en nuxt.config.ts:

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

Creación de Plugins

El único argumento pasado a un plugin es nuxtApp.

export default defineNuxtPlugin(nuxtApp => {
  // Haciendo algo con nuxtApp
})

Plugins con Sintaxis de Objeto

También es posible definir un plugin usando una sintaxis de objeto, para casos de uso más avanzados. Por ejemplo:

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // o 'post'
  async setup (nuxtApp) {
    // esto es el equivalente a un plugin funcional normal
  },
  hooks: {
    // Puedes registrar directamente hooks de tiempo de ejecución de la aplicación Nuxt aquí
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // hacer algo en el hook
    }
  },
  env: {
    // Establece este valor en `false` si no deseas que el plugin se ejecute al renderizar componentes solo del servidor o islas.
    islands: true
  }
})

Orden de Registro

Puedes controlar el orden en que se registran los plugins prefijando con numeración 'alfabética' los nombres de los archivos.

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

En este ejemplo, 02.myOtherPlugin.ts podrá acceder a cualquier cosa que haya sido inyectada por 01.myPlugin.ts.

Esto es útil en situaciones donde tienes un plugin que depende de otro plugin.

Estrategia de Carga

Plugins Paralelos

Por defecto, Nuxt carga los plugins secuencialmente. Puedes definir un plugin como parallel para que Nuxt no espere hasta el final de la ejecución del plugin antes de cargar el siguiente plugin.

export default defineNuxtPlugin({
  name: 'my-plugin',
  parallel: true,
  async setup (nuxtApp) {
    // el siguiente plugin se ejecutará inmediatamente
  }
})

Plugins con Dependencias

Si un plugin necesita esperar a otro plugin antes de ejecutarse, puedes agregar el nombre del plugin al array dependsOn.

export default defineNuxtPlugin({
  name: 'depends-on-my-plugin',
  dependsOn: ['my-plugin'],
  async setup (nuxtApp) {
    // este plugin esperará al final de la ejecución de `my-plugin` antes de ejecutarse
  }
})

Uso de Composables

Puedes usar composables así como utils dentro de los plugins de Nuxt:

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

Sin embargo, ten en cuenta que hay algunas limitaciones y diferencias:

Proporcionando Helpers

Si deseas proporcionar un helper en la instancia de NuxtApp, devuélvelo desde el plugin bajo una clave provide.