nuxt/no-bare-fetch-in-setup

Why

Code at the top of <script setup> runs on the server and again in the browser during hydration. A bare $fetch there requests the same data twice, the second time while the user waits, and the browser's result can differ from the server's HTML, which gives a hydration mismatch.

Fix

Wrap the initial load: const { data, status, error } = await useFetch('/api/products'), or useAsyncData('products', () => $fetch('/api/products')) for custom logic. The server's result travels in the page payload and the browser reuses it. Keep $fetch for requests that a user action starts.

Examples

// bad (top of script setup)
const products = await $fetch('/api/products')
// good
const { data: products, status } = await useFetch('/api/products')

Sources

• Nuxt docs, Data Fetching (the need for useFetch and useAsyncData)
• Nuxt docs, $fetch

Read it in the terminal

npx github:dawidolko/frontend-skills explain nuxt/no-bare-fetch-in-setup