Плагины

Исходники
Утилиты 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',
    },
  },
})