Nuxt 会自动读取 app/plugins/ 目录中的文件，并在创建 Vue 应用程序时加载它们。
nuxt.config 文件中。.server 或 .client 后缀，以仅在服务器端或客户端加载插件。只有目录顶层的文件（或任何子目录中的 index 文件）会被自动注册为插件。
-| plugins/
---| foo.ts // scanned
---| bar/
-----| baz.ts // not scanned
-----| foz.vue // not scanned
-----| index.ts // currently scanned but deprecated
只有 foo.ts 和 bar/index.ts 会被注册。
要在子目录中添加插件，您可以使用 nuxt.config.ts 中的 app/plugins 选项。
export default defineNuxtConfig({
plugins: [
'~/plugins/bar/baz',
'~/plugins/bar/foz',
],
})
传递给插件的唯一参数是 nuxtApp。
export default defineNuxtPlugin((nuxtApp) => {
// Doing something with nuxtApp
})
对于更高级的用例，也可以使用对象语法定义插件。例如：
export default defineNuxtPlugin({
name: 'my-plugin',
enforce: 'pre', // or 'post'
async setup (nuxtApp) {
// this is the equivalent of a normal functional plugin
},
hooks: {
// You can directly register Nuxt app runtime hooks here
'app:created' () {
const nuxtApp = useNuxtApp()
// do something in the hook
},
},
env: {
// Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
islands: true,
},
})
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) {
// the next plugin will be executed immediately
},
})
如果一个插件需要等待另一个插件运行才能运行，您可以将该插件的名称添加到 dependsOn 数组中。
export default defineNuxtPlugin({
name: 'depends-on-my-plugin',
dependsOn: ['my-plugin'],
async setup (nuxtApp) {
// this plugin will wait for the end of `my-plugin`'s execution before it runs
},
})
您可以在 Nuxt 插件中使用 composables 和 utils。
export default defineNuxtPlugin((nuxtApp) => {
const foo = useFoo()
})
但是，请记住存在一些限制和差异。
nuxtApp 实例。如果您希望在 NuxtApp 实例上提供辅助函数，请在插件中通过 provide 键返回它。
export default defineNuxtPlugin(() => {
return {
provide: {
hello: (msg: string) => `Hello ${msg}!`,
},
}
})
export default defineNuxtPlugin({
name: 'hello',
setup () {
return {
provide: {
hello: (msg: string) => `Hello ${msg}!`,
},
}
},
})
然后您可以在组件中使用该辅助函数。
<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>
<template>
<div>
{{ $hello('world') }}
</div>
</template>
composables 而不是提供辅助函数，以避免污染全局命名空间并保持主 bundle 入口文件较小。ref 或 computed，它在组件的 <template> 中不会被解包。如果您从插件返回辅助函数，它们将自动进行类型推断；您会发现它们在 useNuxtApp() 的返回值中以及在您的模板中都已进行类型推断。
useNuxtApp() 来获取类型化的版本。但通常情况下，除非您确定插件的顺序，否则应避免这样做。对于高级用例，您可以像这样声明注入属性的类型：
declare module '#app' {
interface NuxtApp {
$hello (msg: string): string
}
}
declare module 'vue' {
interface ComponentCustomProperties {
$hello (msg: string): string
}
}
export {}
如果您想使用 Vue 插件，例如：vue-gtag来添加 Google Analytics 标签，您可以使用 Nuxt 插件来实现。
首先，安装 Vue 插件依赖项：
npm install --save-dev vue-gtag-next
yarn add --dev vue-gtag-next
pnpm add -D vue-gtag-next
bun add -D vue-gtag-next
然后创建一个插件文件：
import VueGtag, { trackRouter } from 'vue-gtag-next'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGtag, {
property: {
id: 'GA_MEASUREMENT_ID',
},
})
trackRouter(useRouter())
})
同样，您可以在插件中注册自定义 Vue 指令。
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive('focus', {
mounted (el) {
el.focus()
},
getSSRProps (binding, vnode) {
// you can provide SSR-specific props here
return {}
},
})
})
~/plugins/my-directive.client.ts，并在 ~/plugins/my-directive.server.ts 中为服务器提供一个“存根”指令。