Nuxt 3 中的 useFetch 在组件里怎么用才不会报错？

技术秋花提问于 2026-03-08 06:43:19 阅读 81

框架

我刚学 Nuxt 3，想在组件里用 useFetch 获取数据，但一刷新页面就报错说“Cannot read property ‘url’ of undefined”。是我写法不对吗？

我试过把 useFetch 放在 setup 里，也试过直接在 script setup 顶层调用，都不行。下面是我的代码：

<script setup>
const { data } = useFetch('/api/user')
</script>

<template>
  <div>{{ data?.name }}</div>
</template>

服务端渲染

我来解答赞 17 收藏

反馈

2 条解答

红佑🍀 Lv1

这个报错是因为 useFetch 需要在 Nuxt 的页面上下文中运行。你在 app.vue 里直接放组件调用 useFetch 是不行的，Nuxt 不知道该怎么处理这个请求。

两个解决办法：

办法一：把数据请求放到页面组件里（推荐）

Nuxt 3 的数据获取应该在 pages 目录下的页面文件中进行：

// pages/index.vue

然后在 app.vue 里只负责展示：

// app.vue

办法二：非要在组件里用，加 lazy 选项

// components/UserCard.vue

lazy: true 的作用是让 useFetch 不阻塞组件渲染，但这个组件也必须被页面引用，不能直接在 app.vue 里裸着用。

说白了，useFetch 是给 pages 用的，不是给普通组件用的。你要获取数据就在页面里 fetch，然后通过 props 传给子组件。

2026-03-11 23:00

UP主～婧妍 Lv1

最简单的办法，把 useFetch 包在 useAsyncData 里就不会报错了：

<script setup>

const { data } = await useAsyncData('user', () => useFetch('/api/user'))

</script>

或者在 nuxt.config.ts 里把 ssr:false 关了，但这样SEO会炸，懒人不推荐。

2026-03-08 07:01