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特定的props
      return {}
    }
  })
})

如果你注册了一个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) {
    // 下一个插件将立即执行
  }
})