defineNuxtPlugin
defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。
defineNuxtPlugin 是一个用于创建具有增强功能和类型安全性的 Nuxt 插件的辅助函数。此工具将不同的插件格式标准化为一致的结构，以便在 Nuxt 的插件系统中无缝工作。
plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
// Doing something with nuxtApp
})
类型
defineNuxtPlugin<T extends Record<string, unknown>>(plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>
type Plugin<T> = (nuxt: [NuxtApp](/docs/guide/going-further/internals#the-nuxtapp-interface)) => 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](/docs/api/advanced/hooks#app-hooks-runtime)>
env?: {
islands?: boolean
}
}
参数
plugin: 插件可以通过两种方式定义：
- 函数插件: 一个接收
NuxtApp实例的函数，如果您希望在NuxtApp实例上提供一个辅助函数，可以返回一个带有provide属性的对象的 promise。 - 对象插件: 一个可以包含各种属性以配置插件行为的对象，例如
name、enforce、dependsOn、order、parallel、setup、hooks和env。
| 属性 | 类型 | 必需 | 描述 |
|---|---|---|---|
name | string | false | 插件的可选名称，有助于调试和依赖管理。 |
enforce | 'pre' | 'default' | 'post' | false | 控制插件相对于其他插件的运行时间。 |
dependsOn | string[] | false | 此插件依赖的插件名称数组。确保正确的执行顺序。 |
order | number | false | 允许对插件顺序进行更细粒度的控制，仅应由高级用户使用。它会覆盖 enforce 的值并用于对插件进行排序。 |
parallel | boolean | false | 是否与其他并行插件一起执行插件。 |
setup | Plugin<T> | false | 主插件函数，相当于一个函数插件。 |
hooks | Partial<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!')
}
},
})