Плагины

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

addPlugin

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

Тип

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

interface NuxtPlugin {
  src: string
  mode?: 'all' | 'server' | 'client'
  order?: number
}

interface AddPluginOptions { append?: boolean }

Параметры

plugin

Тип: NuxtPlugin | string

Обязательный: true

Объект плагина или строка с путем к плагину. Если предоставлена строка, она будет преобразована в объект плагина с src установленным в значение строки. Если предоставлен объект плагина, он должен иметь следующие свойства:

• src (обязательный)
  Тип: string
  Path to the plugin.
• mode (опциональный)
  Тип: 'all' | 'server' | 'client'
  По умолчанию: 'all'
  Если установлено значение 'all', плагин будет включен в клиентские и серверные пакеты. Если установлено значение 'server', плагин будет включен только в серверный пакет. Если установлено значение 'client', плагин будет включен только в клиентский пакет. Вы также можете использовать модификаторы .client и .server при указании опции src, чтобы использовать плагин только на клиенте или сервере.
• order (опциональный)
  Тип: number
  По умолчанию: 0
  Порядок выполнения плагина. Это позволяет более тонко управлять порядком выполнения плагинов и должно использоваться только опытными пользователями. Меньшие числа выполняются первыми, а плагины пользователя по умолчанию имеют значение 0. Рекомендуется установить order на число от -20 для pre-плагинов (плагинов, которые выполняются до плагинов Nuxt) до 20 для post-плагинов (плагинов, которые выполняются после плагинов Nuxt).

options

Тип: AddPluginOptions

По умолчанию: {}

Опции, которые нужно передать плагину. Если append установлено в true, плагин будет добавлен в конец массива плагинов вместо того, чтобы быть добавленным в начало.

Примеры

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

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

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

addPluginTemplate

Добавляет шаблон и регистрирует его как плагин Nuxt. Это полезно для плагинов, которые должны генерировать код во время сборки.

Тип

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

interface NuxtPluginTemplate<Options = Record<string, any>> {
  src?: string,
  filename?: string,
  dst?: string,
  mode?: 'all' | 'server' | 'client',
  options?: Options,
  getContents?: (data: Options) => string | Promise<string>,
  write?: boolean,
  order?: number
}

interface AddPluginOptions { append?: boolean }

interface NuxtPlugin {
  src: string
  mode?: 'all' | 'server' | 'client'
  order?: number
}

Параметры

pluginOptions

Тип: NuxtPluginTemplate

Обязательный: true

Объект шаблона плагина со следующими свойствами:

• src (опциональный)
  Тип: string
  Путь к шаблону. Если src не предоставлен, необходимо предоставить getContents вместо этого.
• filename (опциональный)
  Тип: string
  Имя файла шаблона. Если filename не предоставлено, оно будет сгенерировано из пути src. В этом случае опция src обязательна.
• dst (опциональный)
  Тип: string
  Путь к файлу назначения. Если dst не предоставлен, он будет сгенерирован из пути filename и опции buildDir nuxt.
• mode (опциональный)
  Тип: 'all' | 'server' | 'client'
  По умолчанию: 'all'
  Если установлено значение 'all', плагин будет включен в клиентские и серверные пакеты. Если установлено значение 'server', плагин будет включен только в серверный пакет. Если установлено значение 'client', плагин будет включен только в клиентский пакет. Вы также можете использовать модификаторы .client и .server при указании опции src, чтобы использовать плагин только на клиенте или сервере.
• options (опциональный)
  Тип: Options
  Опции, которые нужно передать шаблону.
• getContents (опциональный)
  Тип: (data: Options) => string | Promise<string>
  Функция, которая будет вызвана с объектом options. Она должна возвращать string или promise, который разрешается в строку. Если предоставлен src, эта функция будет игнорироваться.
• write (опциональный)
  Тип: boolean
  Если установлено значение true, шаблон будет записан в файл назначения. В противном случае шаблон будет использоваться только в виртуальной файловой системе.
• order (опциональный)
  Тип: number
  По умолчанию: 0
  Порядок выполнения плагина. Это позволяет более тонко управлять порядком выполнения плагинов и должно использоваться только опытными пользователями. Меньшие числа выполняются первыми, а плагины пользователя по умолчанию имеют значение 0. Рекомендуется установить order на число от -20 для pre-плагинов (плагинов, которые выполняются до плагинов Nuxt) до 20 для post-плагинов (плагинов, которые выполняются после плагинов Nuxt).

options

Тип: AddPluginOptions

По умолчанию: {}

Опции, которые нужно передать плагину. Если append установлено в true, плагин будет добавлен в конец массива плагинов вместо того, чтобы быть добавленным в начало.

Примеры

// https://github.com/vuejs/vuefire
import { createResolver, defineNuxtModule, addPluginTemplate } from '@nuxt/kit'

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

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