Плагины

Исходники
Утилиты Nuxt Kit для создания и подключения плагинов в модулях.

Плагины — автономный код, добавляющий функциональность на уровне приложения Vue. В Nuxt они автоматически подключаются из app/plugins/. Чтобы поставлять плагин вместе с модулем, в Nuxt Kit есть addPlugin и addPluginTemplate — с их помощью можно настроить плагин под свои задачи.

addPlugin

Регистрирует плагин Nuxt и добавляет его в массив плагинов.

Видео Vue School про addPlugin.

Использование

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

Тип

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

Параметры

plugin: объект плагина или строка с путём к файлу. Строка преобразуется в объект с полем src.

Объект плагина может содержать:

СвойствоТипОбязательныйОписание
srcstringдаПуть к файлу плагина.
mode'all' | 'server' | 'client'нет'all' — в клиентский и серверный бандлы; 'server' — только сервер; 'client' — только клиент. Можно также использовать суффиксы .client и .server в имени файла в src.
ordernumberнетПорядок выполнения. Меньшее число — раньше. Плагины пользователя по умолчанию 0. Рекомендуется от -20 (pre, до плагинов Nuxt) до 20 (post, после).
Не задавайте order без необходимости. Для добавления после плагинов Nuxt используйте append.

options: опциональный объект:

СвойствоТипОбязательныйОписание
appendbooleanнетtrue — добавить в конец массива плагинов; false — в начало. По умолчанию false.

Примеры

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

Добавляет шаблон и регистрирует его как плагин Nuxt. Удобно для плагинов, генерирующих код при сборке.

Видео Vue School про addPluginTemplate.

Использование

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")' : ''}
  }
})`,
    })
  },
})

Тип

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

Параметры

pluginOptions: объект шаблона плагина:

СвойствоТипОбязательныйОписание
srcstringнетПуть к шаблону. Если не задан, нужно указать getContents.
filenamestringнетИмя файла шаблона. Если не задано, берётся из src (тогда src обязателен).
dststringнетПуть к целевому файлу. По умолчанию — из filename и buildDir Nuxt.
mode'all' | 'server' | 'client'нетКак и у addPlugin: в какие бандлы включать плагин.
optionsRecord<string, any>нетДанные, передаваемые в шаблон.
getContents(data: Record<string, any>) => string | Promise<string>нетФункция, вызываемая с объектом options; возвращает строку или промис. При заданном src не используется.
writebooleanнетtrue — записать результат в файл; иначе только в виртуальную ФС.
ordernumberнетПорядок плагина (как у addPlugin).
Предпочтительно использовать getContents для динамической генерации. Не задавайте order без необходимости.

options: опциональный объект (как у addPlugin):

СвойствоТипОбязательныйОписание
appendbooleanнетtrue — в конец массива плагинов; false — в начало. По умолчанию false.

Примеры

Шаблон плагина с разными опциями

addPluginTemplate нужен, когда код плагина генерируется при сборке в зависимости от опций. Например, Nuxt использует это для генерации конфигурации Vue-приложения.

module.ts
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')
    }
  }
})`,
      })
    }
  },
})

Итоговый код плагина зависит от переданной конфигурации.

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