Vue.js: What is the difference between useFetch and $fetch in Nuxt 3?

useFetch — SSR-compatible composable. $fetch — direct HTTP client.

useFetch:

• SSR-compatible.
• Auto-serialized.
• Caching.
• Returns reactive data.

$fetch:

• Direct HTTP call.
• Not SSR-safe alone.
• Used in useAsyncData.

1<script setup>
2// useFetch - auto SSR
3const { data } = await useFetch("/api/posts")
4
5// $fetch - manual
6const data = await $fetch("/api/posts")
7
8// useAsyncData + $fetch
9const { data } = await useAsyncData("posts", () => {
10    return $fetch("/api/posts")
11})
12</script>

When to use:

• useFetch — simple fetching.
• useAsyncData + $fetch — custom logic.