插件

插件是自包含的代码，通常会向 Vue 添加应用程序级别的功能。在 Nuxt 中，插件会自动从 plugins 目录导入。但是，如果您需要随模块一起交付插件，Nuxt Kit 提供了 addPlugin 和 addPluginTemplate 方法。这些实用程序允许您自定义插件配置以更好地满足您的需求。

addPlugin

将 Nuxt 插件注册到 plugins 数组中。

类型

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
  插件的路径。
• mode (可选)
  类型: 'all' | 'server' | 'client'
  默认值: 'all'
  如果设置为 'all'，则插件将包含在客户端和服务器捆绑包中。如果设置为 'server'，则插件将仅包含在服务器捆绑包中。如果设置为 'client'，则插件将仅包含在客户端捆绑包中。在指定 src 选项时，您还可以使用 .client 和 .server 修饰符，以便仅在客户端或服务器端使用插件。
• order (可选)
  类型: number
  默认值: 0
  插件的顺序。这允许更细粒度地控制插件顺序，并且应仅由高级用户使用。数字越小，运行越早，用户插件默认为 0。建议将 order 设置为 -20 到 20 之间的数字，分别用于 pre 插件（在 Nuxt 插件之前运行的插件）和 post 插件（在 Nuxt 插件之后运行的插件）。

options

类型: AddPluginOptions

默认值: {}

传递给插件的选项。如果 append 设置为 true，则插件将附加到 plugins 数组而不是预置。

示例

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 路径和 nuxt 的 buildDir 选项生成。
• mode (可选)
  类型: 'all' | 'server' | 'client'
  默认值: 'all'
  如果设置为 'all'，则插件将包含在客户端和服务器捆绑包中。如果设置为 'server'，则插件将仅包含在服务器捆绑包中。如果设置为 'client'，则插件将仅包含在客户端捆绑包中。在指定 src 选项时，您还可以使用 .client 和 .server 修饰符，以便仅在客户端或服务器端使用插件。
• options (可选)
  类型: Options
  传递给模板的选项。
• getContents (可选)
  类型: (data: Options) => string | Promise<string>
  一个将使用 options 对象调用的函数。它应该返回一个字符串或一个解析为字符串的 Promise。如果提供了 src，则此函数将被忽略。
• write (可选)
  类型: boolean
  如果设置为 true，则模板将写入目标文件。否则，模板将仅在虚拟文件系统中使用。
• order (可选)
  类型: number
  默认值: 0
  插件的顺序。这允许更细粒度地控制插件顺序，并且应仅由高级用户使用。数字越小，运行越早，用户插件默认为 0。建议将 order 设置为 -20 到 20 之间的数字，分别用于 pre 插件（在 Nuxt 插件之前运行的插件）和 post 插件（在 Nuxt 插件之后运行的插件）。

options

类型: AddPluginOptions

默认值: {}

传递给插件的选项。如果 append 设置为 true，则插件将附加到 plugins 数组而不是预置。

示例

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