插件目录 Plugins

Nuxt 读取插件目录中的文件并在创建 Vue 应用程序时加载它们。

Nuxt 会自动读取 plugins 目录中的文件，并在创建 Vue 应用程序时加载它们。您可以在文件名中使用 .server 或 .client 后缀来仅在服务器端或客户端加载插件。

plugins/ 目录中的所有插件都是自动注册的，因此您不应将它们单独添加到 nuxt.config 中。

注册了哪些文件

只有 plugins/ 目录(或任何子目录中的索引文件)的顶层文件将被注册为插件。

例如：

bash

plugins
 | - myPlugin.ts  // 能被扫描
 | - myOtherPlugin
 | --- supportingFile.ts   // 不被扫描
 | --- componentToRegister.vue   // 不被扫描
 | --- index.ts  // 当前已扫描但已弃用

只有 myPlugin.ts 和 myOtherPlugin/index.ts 会被注册。

您可以配置 plugins 以包含未扫描的文件。

创建插件

传递给插件的唯一参数是 nuxtApp。

export default defineNuxtPlugin((nuxtApp) => {
  // 用 nuxtApp 做点什么
})

对象语法插件

对于更高级的用例，也可以使用对象语法定义插件。例如：

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post'
  async setup(nuxtApp) {
    // 这相当于一个普通的功能插件
  },
  hooks: {
    // 你可以在这里直接注册 Nuxt app hooks
    'app:created': function () {
      const nuxtApp = useNuxtApp()
      //
    }
  }
})

如果您使用的是对象语法插件，则将来可能会静态分析这些属性以生成更优化的构建。
所以你不应该在运行时定义它们。例如，设置enforce: process.server ? 'pre' : 'post' 会破坏 Nuxt 能够为您的插件做的任何未来优化。

插件注册顺序

您可以通过在文件名前加上数字前缀来控制插件的注册顺序。

例如：

bash

plugins/
 | - 1.myPlugin.ts
 | - 2.myOtherPlugin.ts

在此示例中，2.myOtherPlugin.ts 将能够访问由 1.myPlugin.ts 注入的任何内容。

这在您有一个依赖于另一个插件的插件的情况下很有用。

加载策略

默认情况下，Nuxt 按顺序加载插件。您可以将插件定义为parallel(并行)，这样 Nuxt 就不会在加载下一个插件之前等待插件执行结束。

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

在插件中使用可组合项

您可以在 Nuxt 插件中使用 composables：

export default defineNuxtPlugin((NuxtApp) => {
  const foo = useFoo()
})

但是，请记住存在一些限制和差异：

如果可组合项依赖于稍后注册的另一个插件，它可能无法工作。

原因： 插件按顺序调用，并且在其他所有内容之前调用。您可能会使用依赖于另一个尚未调用的插件的可组合项。

如果可组合项依赖于 Vue.js 生命周期，它将无法工作。

原因： 通常，Vue.js 可组合项绑定到当前组件实例，而插件仅绑定到 nuxtApp 实例。

自动提供助手

如果您想在 NuxtApp 实例上提供帮助程序，请在 provide 键下从插件返回它。例如：

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

在另一个文件中你可以使用这个：

vue

<script setup lang="ts">
// 或者，您也可以在这里使用它
const { $hello } = useNuxtApp()
</script>

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

带类型的插件

如果你从插件中返回你的助手，它们将被自动输入；

你会发现它们是为 useNuxtApp() 的返回而键入的，并且在你的模板中。

如果您需要在另一个插件中使用提供的帮助程序，您可以调用 useNuxtApp() 来获取输入版本。
但一般来说，除非您确定插件的顺序，否则应该避免这种情况。

高级用法

对于高级用例，您可以像这样声明注入属性的类型：

index.d.ts

declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export { }

如果您使用的是 WebStorm，您可能需要扩充 @vue/runtime-core 直到这个问题已解决。

Vue插件

如果您想使用 Vue 插件，例如 vue-gtag 添加 Google Analytics 标签，您可以使用 Nuxt 插件来实现。

首先，安装你想要的插件。

bash

yarn add --dev vue-gtag-next

然后创建一个插件文件 plugins/vue-gtag.client.js。

import VueGtag, { trackRouter } from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
  trackRouter(useRouter())
})

Vue指令

同样，您可以在插件中注册自定义 Vue 指令。例如，在 plugins/directive.ts 中：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted(el) {
      el.focus()
    },
    getSSRProps(binding, vnode) {
      // 你可以在这里提供SSR专用道具
      return {}
    }
  })
})