O Nuxt usa ofetch para expor globalmente o helper $fetch para fazer requisições HTTP dentro do seu aplicativo Vue ou rotas de API.

Uso

Recomendamos usar useFetch ou useAsyncData + $fetch para evitar a busca dupla de dados ao buscar os dados do componente.

// Durante o SSR, os dados são buscados duas vezes, uma no servidor e outra no cliente.
const dataTwice = await $fetch('/api/item')

// Durante o SSR, os dados são buscados apenas no lado do servidor e transferidos para o cliente.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// Você também pode usar useFetch como atalho de useAsyncData + $fetch
const { data } = await useFetch('/api/item')

Você pode usar $fetch em qualquer método que seja executado apenas no lado do cliente.

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

<template>
  <button @click="contactForm">Contact</button>
</template>

Passando Cabeçalhos e Cookies

Quando chamamos $fetch no navegador, cabeçalhos do usuário como cookie serão enviados diretamente para a API.

No entanto, durante a Renderização do Lado do Servidor, devido a riscos de segurança como Server-Side Request Forgery (SSRF) ou Uso Indevido de Autenticação, o $fetch não incluirá os cookies do navegador do usuário, nem passará cookies da resposta da busca.

// Isso NÃO encaminhará cabeçalhos ou cookies durante o SSR
const { data } = await useAsyncData(() => $fetch('/api/cookies'))

Se você precisar encaminhar cabeçalhos e cookies no servidor, deve passá-los manualmente:

// Isso encaminhará os cabeçalhos e cookies do usuário para `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))

No entanto, ao chamar useFetch com uma URL relativa no servidor, o Nuxt usará useRequestFetch para proxy de cabeçalhos e cookies (com exceção de cabeçalhos que não devem ser encaminhados, como host).