通过 100 多个技巧学习 Nuxt!

插件

Nuxt Kit 提供了一组实用工具,帮助您创建和使用插件。您可以使用这些函数将插件或插件模板添加到您的模块中。

插件是自包含的代码,通常为 Vue 添加应用程序级的功能。在 Nuxt 中,插件会自动从 plugins 目录导入。但是,如果您需要在模块中发布插件,Nuxt Kit 提供了 addPluginaddPluginTemplate 方法。这些实用程序允许您自定义插件配置,以更好地满足您的需求。

addPlugin

注册一个 Nuxt 插件并添加到插件数组中。

观看 Vue School 关于 addPlugin 的视频。

类型

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',插件将仅包含在客户端捆绑包中。您还可以使用 .client.server 修饰符,在指定 src 选项时仅在客户端或服务器端使用插件。
  • order (可选)
    类型: number
    默认值: 0
    插件的顺序。这允许更精细地控制插件顺序,并且应该仅由高级用户使用。数字越小,运行越早,用户插件默认为 0。建议将 order 设置为 -20 (用于 pre-plugins,即在 Nuxt 插件之前运行的插件) 和 20 (用于 post-plugins,即在 Nuxt 插件之后运行的插件) 之间的数字。
除非您知道自己在做什么,否则不要使用 order。对于大多数插件,默认的 order0 就足够了。要将插件追加到插件数组的末尾,请改用 append 选项。

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 插件。这对于需要在构建时生成代码的插件非常有用。

观看 Vue School 关于 addPluginTemplate 的视频。

类型

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',插件将仅包含在客户端捆绑包中。您还可以使用 .client.server 修饰符,在指定 src 选项时仅在客户端或服务器端使用插件。
  • options (可选)
    类型: Options
    传递给模板的选项。
  • getContents (可选)
    类型: (data: Options) => string | Promise<string>
    一个函数,将使用 options 对象调用。它应该返回一个字符串或一个解析为字符串的 Promise。如果提供了 src,则将忽略此函数。
  • write (可选)
    类型: boolean
    如果设置为 true,模板将写入目标文件。否则,模板将仅在虚拟文件系统中使用。
  • order (可选)
    类型: number
    默认值: 0
    插件的顺序。这允许更精细地控制插件顺序,并且应该仅由高级用户使用。数字越小,运行越早,用户插件默认为 0。建议将 order 设置为 -20 (用于 pre-plugins,即在 Nuxt 插件之前运行的插件) 和 20 (用于 post-plugins,即在 Nuxt 插件之后运行的插件) 之间的数字。
除非您知道自己在做什么,否则不要使用 order。对于大多数插件,默认的 order0 就足够了。要将插件追加到插件数组的末尾,请改用 append 选项。

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