Nuxt3开发MicroCMS应用时遇到错误：A composable that requires access to the Nuxt instance was called outside of a plugin

我来帮你排查这个问题！这个错误的核心原因是你在普通<script>标签的顶层直接调用了useFetch，而useFetch这类Nuxt内置的composable必须在Nuxt实例的上下文环境中才能正常工作，普通<script>的顶层代码会脱离这个上下文，所以触发了报错。

问题代码定位 #

看你的pages/list.vue：

<script>
const {data:reviews} = await useFetch('/api/reviewList')
</script>

这里使用的是普通<script>标签，没有用Nuxt3推荐的<script setup>，顶层await会导致useFetch无法访问到Nuxt实例的上下文信息（比如路由、环境配置等），进而抛出错误。

修复方案 #

把pages/list.vue的<script>改成<script setup>，它会自动帮你处理上下文环境，天然支持顶层await：

<template>
  <div class="flex flex-col">
    <div>
      <h1 class="m-3 text-4xl font-bold">当店のレビュー一覧</h1>
    </div>
    <!-- 新增可选链和默认空数组，避免数据加载前undefined报错 -->
    <ReviewList :reviews="reviews?.contents || []" />
  </div>
</template>

<script setup>
const { data: reviews } = await useFetch('/api/reviewList')
</script>

我额外给reviews?.contents加了|| []的默认值，因为useFetch是异步加载数据的，页面初始化时reviews还未拿到返回结果，直接传reviews.contents会导致undefined报错，加默认空数组能保证组件始终接收到数组类型的props，正常渲染。

补充说明 #

Nuxt的所有内置composables（比如useFetch、useRuntimeConfig、useRoute等）都必须在以下场景中调用：

• 页面/组件的<script setup>标签内
• 组件的setup()函数内
• Nuxt插件文件中

普通<script>标签的顶层代码会在Nuxt实例初始化前执行，完全脱离上下文，所以绝对不能在这里调用这类composables。

你的其他代码（组件、类型定义、API路由）看起来都没问题，只要修改页面的<script>标签就能解决这个错误啦！

备注：内容来源于stack exchange，提问作者Noriaki Takamizawa