Nuxt3【插件】plugins 详解

创建插件

• 只有一个参数 nuxtApp
• 可以使用组合式 API以及工具函数，但若一个组合式依赖于稍后注册的另一个插件，可能无法正常工作。若一个组合式依赖于Vue.js的生命周期，也无法正常工作。

如 plugins/hello.ts

export default defineNuxtPlugin({name: 'my-plugin',enforce: 'pre', // 或 'post'async setup (nuxtApp) {// 这相当于一个普通的功能性插件},hooks: {// 这里可以直接注册Nuxt应用运行时钩子'app:created'() {const nuxtApp = useNuxtApp()// }},env: {// 如果不希望插件在仅渲染服务器端或孤立组件时运行，请将此值设置为`false`。islands: true}
})

使用Vue插件

1. 先安装Vue插件的依赖

pnpm add -D vue-gtag-next

2. 创建一个插件文件 plugins/vue-gtag.client.ts

import VueGtag, { trackRouter } from 'vue-gtag-next'export default defineNuxtPlugin((nuxtApp) => {nuxtApp.vueApp.use(VueGtag, {property: {id: 'GA_MEASUREMENT_ID'}})trackRouter(useRouter())
})

自定义Vue指令

plugins/my-directive.ts

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.vueApp.directive('focus', {mounted (el) {el.focus()},getSSRProps (binding, vnode) {// 你可以在这里提供SSR特定的propsreturn {}}})
})

如果你注册了一个Vue指令，你必须在客户端和服务器端都注册它，除非你只在一个端口渲染时使用它。如果这个指令只在客户端有意义，你可以将它移动到~/plugins/my-directive.client.ts，并在~/plugins/my-directive.server.ts中为服务器端提供一个’存根’指令。

自动注册插件

plugins 目录中的顶层文件会被自动注册为 Nuxt 的插件

在nuxt.config.ts 中添加配置，可支持自动注册子目录中的插件

export default defineNuxtConfig({plugins: ['~/plugins/bar/baz','~/plugins/bar/foz']
})

插件的注册顺序

默认按文件名的字符串顺序注册，可添加数字前缀自定义顺序（注意，单个数字前需加 0 ，因为字符串中 10 在 2 的前面）

plugins/| - 01.myPlugin.ts| - 02.myOtherPlugin.ts

插件的加载策略

默认情况下，Nuxt按顺序加载插件。你可以将插件定义为parallel，这样Nuxt在加载下一个插件之前不会等待插件执行结束。
plugins/hello.ts

export default defineNuxtPlugin({name: 'my-plugin',parallel: true,async setup (nuxtApp) {// 下一个插件将立即执行}
})