如何让useNuxtApp()自动注入到所有Nuxt页面和组件中？

当然可以实现，以下是两种可行方案，推荐第一种更便捷的方式：

方案1：自定义Composable + Nuxt自动导入 #

这是最直接的方式，利用Nuxt的自动导入机制让nuxtApp变量全局可用：

1. 在项目根目录创建composables/globalNuxtApp.ts文件：

export const nuxtApp = useNuxtApp()

2. 修改nuxt.config.ts，添加自动导入配置：

export default defineNuxtConfig({
  imports: {
    imports: [
      { from: '~/composables/globalNuxtApp', name: 'nuxtApp' }
    ]
  }
})

配置完成后，所有页面和组件的<script setup>中会自动拥有nuxtApp变量，完全不需要手动声明。

方案2：Nuxt插件 + Vue依赖注入（备选） #

如果更倾向于Vue的依赖注入模式，可以用插件实现：

1. 创建plugins/nuxtApp.global.ts文件：

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('nuxtApp', nuxtApp)
})

2. 在组件中通过inject获取实例：

const nuxtApp = inject('nuxtApp')

不过这种方式仍需手动调用inject，不如方案1省心。

注意：方案1依赖Nuxt 3+的自动导入功能，该功能默认已开启，无需额外启用。

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