插件
Nuxt 在创建 Vue 应用程序时有一个插件系统，可以使用 Vue 插件及更多功能。
Nuxt 会自动读取 plugins/ 目录中的文件，并在创建 Vue 应用程序时加载它们。
所有插件都会自动注册，你不需要在 nuxt.config 中单独添加它们。
你可以在文件名中使用 .server 或 .client 后缀，以仅在服务器或客户端加载插件。
注册的插件
只有目录顶层的文件（或任何子目录中的索引文件）会被自动注册为插件。
-| plugins/
---| foo.ts // 被扫描
---| bar/
-----| baz.ts // 未被扫描
-----| foz.vue // 未被扫描
-----| index.ts // 当前被扫描但已弃用
只有 foo.ts 和 bar/index.ts 会被注册。
要在子目录中添加插件，你可以在 nuxt.config.ts 中使用 plugins 选项：
export default defineNuxtConfig({
plugins: [
'~/plugins/bar/baz',
'~/plugins/bar/foz'
]
})
创建插件
传递给插件的唯一参数是 nuxtApp。
export default defineNuxtPlugin(nuxtApp => {
// 使用 nuxtApp 做一些事情
})
对象语法插件
也可以使用对象语法定义插件，以便用于更高级的用例。例如：
export default defineNuxtPlugin({
name: 'my-plugin',
enforce: 'pre', // 或 'post'
async setup (nuxtApp) {
// 这相当于一个普通的功能插件
},
hooks: {
// 你可以在这里直接注册 Nuxt 应用程序运行时钩子
'app:created'() {
const nuxtApp = useNuxtApp()
// 在钩子中做一些事情
}
},
env: {
// 如果你不希望插件在仅服务器渲染或岛屿组件时运行，请将此值设置为 `false`。
islands: true
}
})
如果你使用对象语法，这些属性会被静态分析以生成更优化的构建。因此，你不应该在运行时定义它们。 :br
例如，设置 enforce: import.meta.server ? 'pre' : 'post' 会破坏 Nuxt 为你的插件进行的任何未来优化。
Nuxt 在使用对象语法时会静态预加载任何钩子监听器，允许你定义钩子而无需担心插件注册的顺序。
注册顺序
你可以通过在文件名前加上“字母”编号来控制插件的注册顺序。
plugins/
| - 01.myPlugin.ts
| - 02.myOtherPlugin.ts
在这个例子中，02.myOtherPlugin.ts 将能够访问 01.myPlugin.ts 注入的任何内容。
这在你有一个依赖于另一个插件的插件时很有用。
如果你不熟悉“字母”编号，请记住文件名是按字符串排序的，而不是按数值排序。例如，10.myPlugin.ts 会排在 2.myOtherPlugin.ts 之前。这就是为什么示例中用 0 前缀单个数字。
加载策略
并行插件
默认情况下，Nuxt 顺序加载插件。你可以将插件定义为 parallel，这样 Nuxt 就不会在加载下一个插件之前等待插件执行结束。
export default defineNuxtPlugin({
name: 'my-plugin',
parallel: true,
async setup (nuxtApp) {
// 下一个插件将立即执行
}
})
具有依赖关系的插件
如果一个插件需要在另一个插件之前等待，你可以将插件的名称添加到 dependsOn 数组中。
export default defineNuxtPlugin({
name: 'depends-on-my-plugin',
dependsOn: ['my-plugin'],
async setup (nuxtApp) {
// 这个插件将在 `my-plugin` 执行结束后运行
}
})
使用可组合函数
你可以在 Nuxt 插件中使用 composables 以及 utils：
export default defineNuxtPlugin((nuxtApp) => {
const foo = useFoo()
})
然而，请记住有一些限制和差异：
如果一个可组合函数依赖于稍后注册的另一个插件，它可能无法工作。 :br
插件按顺序依次调用，并在其他所有内容之前。你可能会使用一个依赖于尚未调用的另一个插件的可组合函数。
如果一个可组合函数依赖于 Vue.js 生命周期，它将无法工作。 :br
通常，Vue.js 可组合函数绑定到当前组件实例，而插件仅绑定到 nuxtApp 实例。
提供助手
如果你想在 NuxtApp 实例上提供一个助手，可以在插件中以 provide 键返回它。
※此页面是 Nuxt.js 官方文档的非官方翻译页面。