Los plugins son código autónomo que generalmente añaden funcionalidad a nivel de aplicación a Vue. En Nuxt, los plugins se importan automáticamente desde el directorio plugins/. Sin embargo, si necesitas enviar un plugin con tu módulo, Nuxt Kit proporciona los métodos addPlugin y addPluginTemplate. Estas utilidades te permiten personalizar la configuración del plugin para adaptarse mejor a tus necesidades.

addPlugin

Registra un plugin de Nuxt y lo añade al array de plugins.

Uso

import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addPlugin({
      src: resolve('runtime/plugin.js'),
      mode: 'client',
    })
  },
})

Tipo

function addPlugin(plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin

Parámetros

plugin: Un objeto plugin o una cadena con la ruta al plugin. Si se proporciona una cadena, se convertirá en un objeto plugin con src establecido en el valor de la cadena.

Si se proporciona un objeto plugin, debe tener las siguientes propiedades:

options: Objeto opcional con las siguientes propiedades:

Ejemplos

import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addPlugin({
      src: resolve('runtime/plugin.js'),
      mode: 'client',
    })
  },
})

addPluginTemplate

Añade una plantilla y la registra como un plugin de nuxt. Esto es útil para plugins que necesitan generar código en tiempo de compilación.

Uso

import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    addPluginTemplate({
      filename: 'module-plugin.mjs',
      getContents: () => `import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
  name: 'module-plugin',
  setup (nuxtApp) {
    ${options.log ? 'console.log("Plugin install")' : ''}
  }
})`,
    })
  },
})

Tipo

function addPluginTemplate(pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin

Parámetros

pluginOptions: Un objeto plantilla de plugin con las siguientes propiedades:

options: Objeto opcional con las siguientes propiedades:

Ejemplos

Generar una plantilla de plugin con diferentes opciones

Usa addPluginTemplate cuando necesites generar código de plugin dinámicamente en tiempo de compilación. Esto te permite generar diferentes contenidos de plugin basados en las opciones que se le pasen. Por ejemplo, Nuxt utiliza internamente esta función para generar configuraciones de aplicaciones Vue.

import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (_, nuxt) {
    if (nuxt.options.vue.config && Object.values(nuxt.options.vue.config).some(v => v !== null && v !== undefined)) {
      addPluginTemplate({
        filename: 'vue-app-config.mjs',
        write: true,
        getContents: () => `import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
  name: 'nuxt:vue-app-config',
  enforce: 'pre',
  setup (nuxtApp) {
    ${Object.keys(nuxt.options.vue.config!)
        .map(k => `nuxtApp.vueApp.config[${JSON.stringify(k)}] = ${JSON.stringify(nuxt.options.vue.config![k as 'idPrefix'])}`)
        .join('\n')
    }
  }
})`,
      })
    }
  },
})

Esto genera diferentes códigos de plugin dependiendo de la configuración proporcionada.

::code-group

export default defineNuxtConfig({
  vue: {
    config: {
      idPrefix: 'nuxt',
    },
  },
})

import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
  name: 'nuxt:vue-app-config',
  enforce: 'pre',
  setup (nuxtApp) {
    nuxtApp.vueApp.config["idPrefix"] = "nuxt"
  }
})

::

Usar una plantilla EJS para generar un plugin

También puedes usar una plantilla EJS para generar tu plugin. Las opciones pueden pasarse a través de la propiedad options y luego usarse dentro de la plantilla EJS para generar el contenido del plugin.

import { addPluginTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    addPluginTemplate({
      src: resolve('templates/plugin.ejs'),
      filename: 'plugin.mjs',
      options: {
        ssr: nuxt.options.ssr,
      },
    })
  },
})