Vue3迁移Nuxt3：如何获取App实例？已有方法均无效

DevOps 小满

2026-7-18

在Nuxt3中获取Vue App实例及替代globalProperties方案

Nuxt3的架构和原生Vue3不同，它会自动帮你初始化Vue App实例，不需要手动调用createApp。针对你的场景，分两种情况解决：

1. 替代`globalProperties`的推荐方案

Nuxt3推荐通过插件来注册全局属性/方法，而非直接操作App实例。

步骤1：创建Nuxt插件

在项目根目录的plugins文件夹下创建插件文件（比如plugins/global.ts）：

export default defineNuxtPlugin((nuxtApp) => {
  // 直接获取Vue App实例
  const vueApp = nuxtApp.vueApp;
  
  // 方式1：兼容Vue3的globalProperties写法
  vueApp.config.globalProperties.email = 'your-email@example.com';

  // 方式2：Nuxt推荐的provide方式（更贴合组合式API风格）
  nuxtApp.provide('email', 'your-email@example.com');
});

步骤2：在组件中使用全局属性

在组件的<script setup>中，通过useNuxtApp获取：

<script setup>
// 方式1：获取provide注册的全局属性（推荐）
const { $email } = useNuxtApp();
console.log($email);

// 方式2：获取globalProperties中的属性（兼容旧代码）
const nuxtApp = useNuxtApp();
const email = nuxtApp.vueApp.config.globalProperties.email;
console.log(email);
</script>

2. 直接获取Vue App实例

如果你确实需要拿到Vue的App实例（而非Nuxt自身的App实例），可以通过useNuxtApp().vueApp获取：

<script setup>
const nuxtApp = useNuxtApp();
const vueAppInstance = nuxtApp.vueApp;
// 现在可以像Vue3中一样操作该实例，比如访问config.globalProperties
const email = vueAppInstance.config.globalProperties.email;
</script>