Nuxt3异步组合式函数调用报错，如何在setup外使用Nuxt实例？

错误原因 #

useFetch、asyncData这类Nuxt组合式函数依赖Nuxt实例（比如环境变量、请求拦截逻辑、路由上下文等），只能在Nuxt限定的上下文中调用：包括Nuxt插件、钩子、中间件，以及Vue组件的setup函数/<script setup>语法块。直接在普通函数、类方法等setup外的地方调用，就会触发这个错误。

方案1：用useNuxtApp.runWithContext包裹调用 #

useNuxtApp的作用是获取当前Nuxt实例，但它本身也需要在合法上下文里调用。你可以把需要的异步逻辑封装成函数，通过合法上下文获取实例后执行：

// 封装可复用的异步函数
export async function fetchUser(userId) {
  // 在合法上下文获取nuxtApp实例
  const nuxtApp = useNuxtApp()
  // 用runWithContext包裹需要Nuxt实例的组合式函数调用
  return await nuxtApp.runWithContext(() => {
    return useFetch(`/api/users/${userId}`)
  })
}

组件的setup中调用：

<script setup>
const user = await fetchUser(123)
</script>

如果需要在脱离组件的工具文件里调用，可改成传入nuxt实例的形式：

// utils/api.js
export async function fetchUser(nuxtApp, userId) {
  return await nuxtApp.runWithContext(() => {
    return useFetch(`/api/users/${userId}`)
  })
}

组件中使用：

<script setup>
const nuxtApp = useNuxtApp()
const user = await fetchUser(nuxtApp, 123)
</script>

方案2：在Nuxt插件中封装全局可用的异步函数 #

如果需要多场景复用，可把函数封装在Nuxt插件里，插件本身会接收Nuxt实例参数，直接处理上下文：

// plugins/api.js
export default defineNuxtPlugin(nuxtApp => {
  const fetchUser = async (userId) => {
    return await nuxtApp.runWithContext(() => {
      return useFetch(`/api/users/${userId}`)
    })
  }

  // 挂载到nuxtApp的provide上，全局可用
  return {
    provide: {
      fetchUser
    }
  }
})

组件中调用：

<script setup>
const { $fetchUser } = useNuxtApp()
const user = await $fetchUser(123)
</script>

方案3：使用独立的$fetch（无需Nuxt实例） #

如果只是需要发起HTTP请求，不需要Nuxt的SSR适配、请求拦截等特性，可直接用ofetch（Nuxt的$fetch基于此封装），它是独立的HTTP客户端，能在任何地方调用：

// utils/api.js
import { $fetch } from 'ofetch'

export async function fetchUser(userId) {
  return await $fetch(`/api/users/${userId}`, {
    baseURL: process.env.NUXT_PUBLIC_API_BASE_URL
  })
}

这种方式无需考虑Nuxt上下文，可直接在普通函数、脚本中调用。

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