$fetch

Source
Глобальный хелпер $fetch (ofetch) для HTTP-запросов.

В Nuxt глобально доступен хелпер $fetch на базе ofetch для HTTP-запросов во Vue-приложении и в API-маршрутах.

При SSR вызов $fetch к внутренним API-маршрутам выполняет соответствующую функцию напрямую (без реального HTTP), без дополнительного запроса.
Использование $fetch в компонентах без обёртки useAsyncData приводит к двойной загрузке: на сервере и снова на клиенте при гидрации, так как состояние с сервера не передаётся.

Использование

Рекомендуется useFetch или useAsyncData + $fetch, чтобы избежать двойной загрузки данных компонента.

app/app.vue
<script setup lang="ts">
// при SSR данные запрашиваются дважды — на сервере и на клиенте
const dataTwice = await $fetch('/api/item')

// при SSR данные запрашиваются только на сервере и передаются на клиент
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// useFetch — краткая форма useAsyncData + $fetch
const { data } = await useFetch('/api/item')
</script>
Узнать больше Docs > 4 X > Getting Started > Data Fetching.

$fetch можно вызывать в методах, которые выполняются только на клиенте.

app/pages/contact.vue
<script setup lang="ts">
async function contactForm () {
  await $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world' },
  })
}
</script>

<template>
  <button @click="contactForm">
    Связаться
  </button>
</template>
В Nuxt для HTTP-запросов рекомендуется $fetch вместо @nuxt/http и @nuxtjs/axios для Nuxt 2.
При вызове $fetch к внешнему HTTPS с самоподписанным сертификатом в разработке задайте в окружении NODE_TLS_REJECT_UNAUTHORIZED=0.

Передача заголовков и cookies

При вызове $fetch в браузере заголовки пользователя (в том числе cookie) отправляются в API.

При SSR из соображений безопасности (SSRF, неправильное использование аутентификации) $fetch не подставляет cookies браузера и не передаёт cookies из ответа.

<script setup lang="ts">
// при SSR заголовки и cookies не передаются
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>

Чтобы передать заголовки и cookies на сервере, используйте useRequestFetch:

app/pages/index.vue
<script setup lang="ts">
// заголовки и cookies пользователя передаются в /api/cookies
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>

При вызове useFetch с относительным URL на сервере Nuxt сам использует useRequestFetch для проброса заголовков и cookies (кроме тех, что не пробрасываются, например host).