如何无需使用nuxtApp即可让Nuxt 3插件全局可用？

以下是几种能让你在 Nuxt 3 中保持类似 Nuxt 2 插件简洁使用体验的方案：

方案1：全局属性注入（最贴近 Nuxt 2 使用习惯） #

通过 Vue 3 的全局属性配置，直接把插件挂载到全局，无需额外调用 useNuxtApp()，和 Nuxt 2 的使用方式完全一致。

实现步骤： #

1. 在 plugins/ 目录下创建插件文件（如 myPlugin.ts）：

interface MyPlugin {
  someFunction: () => string;
  someData: string[];
}

export default defineNuxtPlugin((nuxtApp) => {
  // 定义插件逻辑
  const someFunction = () => "示例返回值";
  const someData = ["数据项1", "数据项2"];

  const myPlugin: MyPlugin = {
    someFunction,
    someData,
  };

  // 注入到全局Vue实例，支持模板和组件脚本直接访问
  nuxtApp.vueApp.config.globalProperties.$myPlugin = myPlugin;

  // 可选：同时提供给 useNuxtApp() 的访问方式
  return {
    provide: {
      myPlugin,
    },
  };
});

// 类型声明，让 TypeScript 识别全局属性
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $myPlugin: MyPlugin;
  }
}

2. 使用方式和 Nuxt 2 完全一致：

• 组件脚本中：

console.log(this.$myPlugin.someFunction());

• 模板中：

<div>{{ $myPlugin.someData }}</div>

方案2：自动导入的 Composable（贴合 Nuxt 3 最佳实践） #

封装成 Composable 后，Nuxt 3 会自动识别 composables/ 目录下的文件，无需手动导入即可使用，代码更符合 Composition API 风格。

实现步骤： #

1. 在 composables/ 目录下创建文件（如 useMyPlugin.ts）：

interface MyPlugin {
  someFunction: () => string;
  someData: string[];
}

export const useMyPlugin = () => {
  const someFunction = () => "示例返回值";
  const someData = ["数据项1", "数据项2"];

  return {
    someFunction,
    someData,
  } as MyPlugin;
};

2. 直接在组件中使用：

const { someFunction, someData } = useMyPlugin();
console.log(someFunction());

模板中通过绑定的变量访问：

<div>{{ someData }}</div>

方案3：兼顾两种风格的折中方案 #

如果你想同时保留全局属性访问和 Composition API 风格，可以在插件中同时配置，并通过自动导入简化使用：

1. 按方案1的方式注入全局属性
2. 在 composables/ 中封装一个快速获取插件的方法：

export const useMyPlugin = () => {
  const nuxtApp = useNuxtApp();
  return nuxtApp.$myPlugin;
};

这样既可以用 this.$myPlugin，也可以通过自动导入的 useMyPlugin() 获取插件实例。

方案对比 #

• 方案1：迁移成本最低，完全复刻 Nuxt 2 使用习惯，适合需要快速迁移的场景
• 方案2：符合 Nuxt 3 模块化最佳实践，代码更清晰，适合新开发或重构场景
• 方案3：兼顾新旧风格，适合团队有不同编码习惯的场景

内容的提问来源于stack exchange，提问作者Tim