defineNuxtPlugin

源文件
defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。

defineNuxtPlugin 是一个辅助函数，用于创建具有增强功能和类型安全的 Nuxt 插件。此工具将不同的插件格式规范化为一致的结构，使其在 Nuxt 的插件系统中无缝工作。

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
})
在文档 > 4 X > 指南 > 目录结构 > App > Plugins#创建插件中阅读更多内容。

类型

签名
export function defineNuxtPlugin<T extends Record<string, unknown>> (plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>

type Plugin<T> = (nuxt: NuxtApp) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }

interface ObjectPlugin<T> {
  name?: string
  enforce?: 'pre' | 'default' | 'post'
  dependsOn?: string[]
  order?: number
  parallel?: boolean
  setup?: Plugin<T>
  hooks?: Partial<RuntimeNuxtHooks>
  env?: {
    islands?: boolean
  }
}

参数

插件：插件可以通过两种方式定义

  1. 函数插件：一个接收 NuxtApp 实例的函数，并且如果要在 NuxtApp 实例上提供辅助函数，则可以返回一个带有潜在 provide 属性的对象。
  2. 对象插件：一个可以包含各种属性来配置插件行为的对象，例如 name、enforce、dependsOn、order、parallel、setup、hooks 和 env。
属性类型必需描述
namestringfalse插件的可选名称，用于调试和依赖管理。
enforce'pre' | 'default' | 'post'false控制插件相对于其他插件何时运行。
dependsOnstring[]false此插件依赖的插件名称数组。确保正确的执行顺序。
ordernumberfalse这允许对插件顺序进行更精细的控制，并且只能由高级用户使用。它会覆盖 enforce 的值，并用于对插件进行排序。
parallelbooleanfalse是否与其他并行插件并行执行插件。
setupPlugin<T>false主插件函数，相当于函数插件。
hooksPartial<RuntimeNuxtHooks>false直接注册 Nuxt 应用运行时钩子。
env{ islands?: boolean }false如果您不希望插件在渲染仅服务器或岛屿组件时运行，请将此值设置为 false。

示例

基本用法

以下示例演示了一个添加全局功能的简单插件

plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Add a global method
  return {
    provide: {
      hello: (name: string) => `Hello ${name}!`,
    },
  }
})

对象语法插件

以下示例显示了具有高级配置的对象语法

plugins/advanced.ts
export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre',
  async setup (nuxtApp) {
    // Plugin setup logic
    const data = await $fetch('/api/config')

    return {
      provide: {
        config: data,
      },
    }
  },
  hooks: {
    'app:created' () {
      console.log('App created!')
    },
  },
})