nuxt3插件

1. 基本写法（函数式）

在 plugins/ 目录下新建插件文件，例如 plugins/hello.ts：

export default defineNuxtPlugin(nuxtApp => {
  // 在这里可以操作 nuxtApp，比如注入方法、注册 Vue 插件等
})

2. 对象语法（Object Syntax）

适用于更复杂的场景，可以指定插件名称、执行顺序、依赖等：

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // 'pre' 或 'post'
  async setup(nuxtApp) {
    // 插件逻辑
  },
  hooks: {
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // 在 app:created 钩子中执行逻辑
    }
  },
  env: {
    islands: true // 控制是否在 server-only/island 组件中运行
  }
})

适用于更复杂的场景，可以指定插件名称、执行顺序、依赖等：

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // 'pre' 或 'post'
  async setup(nuxtApp) {
    // 插件逻辑
  },
  hooks: {
    'app:created'() {
      const nuxtApp = useNuxtApp()
      // 在 app:created 钩子中执行逻辑
    }
  },
  env: {
    islands: true // 控制是否在 server-only/island 组件中运行
  }
})

对象语法官方说明

---

3. 提供全局方法（Provide Helpers）

插件可以通过 provide 向全局注入方法或属性：

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

在组件中使用：

<script setup>
const { $hello } = useNuxtApp()
</script>


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

官方文档示例

---

4. 注册 Vue 插件

比如注册第三方 Vue 插件（如 vue-gtag、PrimeVue 等）：

import VueGtag from 'vue-gtag-next'


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

官方文档示例

---

5. 按需加载（仅客户端或服务端）

通过文件名后缀 .client.ts 或 .server.ts，让插件只在特定环境加载：

• plugins/my-plugin.client.ts 只在客户端加载
• plugins/my-plugin.server.ts 只在服务端加载

也可以在 nuxt.config.ts 里用 mode 字段指定：官方说明

---

6. 插件注册顺序

通过文件名前缀（如 01., 02.）控制插件加载顺序，或用对象语法的 dependsOn 字段声明依赖。官方说明

---

总结：
Nuxt 插件支持函数式、对象式、全局注入、Vue 插件注册、按需加载等多种写法，灵活应对不同需求。详细用法和示例可参考官方插件文档。