$fetch is the global HTTP request helper
Nuxt exposes a global $fetch helper for making HTTP requests within Vue apps or API routes. It is built on ofetch and is the preferred way to make HTTP calls in Nuxt instead of @nuxt/http or @nuxtjs/axios.
utilities/$fetch
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
$fetch with SSR calls internal API routes directly
During server-side rendering, calling $fetch to fetch internal API routes will directly call the relevant function, emulating the request and saving an additional API call.
$fetch alone causes double data fetching in components
Using $fetch in components without wrapping it with useAsyncData causes fetching the data twice: initially on the server, then again on the client-side during hydration, because $fetch does not transfer state from the server to the client.
Prevent double fetching with useAsyncData or useFetch
To prevent double data fetching when fetching component data, use useFetch or useAsyncData combined with $fetch. useFetch is a shortcut for useAsyncData + $fetch.
$fetch example with useAsyncData in component
Example showing recommended usage: const { data } = await useAsyncData('item', () => $fetch('/api/item')). This fetches data only on the server side and transfers it to the client during SSR.
$fetch example with POST and body in client-side method
Example of $fetch in a client-side only method: await $fetch('/api/contact', { method: 'POST', body: { hello: 'world' } }). This demonstrates passing a request method and body data.
$fetch forwards browser headers and cookies in browser requests
When $fetch is called in the browser, user headers like cookies are directly sent to the API.
$fetch does not forward cookies during SSR by default
During Server-Side Rendering, $fetch does not include the user's browser cookies, nor pass on cookies from the fetch response, to prevent security risks such as Server-Side Request Forgery (SSRF) or Authentication Misuse.
Forward headers and cookies on server with useRequestFetch
To manually forward headers and cookies during SSR, use useRequestFetch instead of $fetch directly. Call const requestFetch = useRequestFetch() and then use requestFetch('/api/cookies') in useAsyncData.
useFetch automatically proxies headers and cookies
When calling useFetch with a relative URL on the server, Nuxt will automatically use useRequestFetch to proxy headers and cookies, with the exception of headers not meant to be forwarded like host.
$fetch with self-signed HTTPS certificate in development
When using $fetch to call an external HTTPS URL with a self-signed certificate in development, you need to set NODE_TLS_REJECT_UNAUTHORIZED=0 in your environment.