Busca de dados: useFetch e useAsyncData
useFetch(), useAsyncData(), busca no servidor versus no cliente, refresh() e estado pendente.
Busca de dados: useFetch e useAsyncData é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Buscando dados no Nuxt
O Nuxt fornece funções composáveis de busca de dados compatíveis com SSR. Elas são executadas no servidor durante a renderização e passam os resultados ao cliente, evitando uma solicitação duplicada e a exibição momentânea de conteúdo vazio.
Fundamentos de useFetch
useFetch encapsula uma busca por URL. Ele retorna valores reativos de data, pending e error que você pode usar diretamente no modelo.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Exibindo carregamento e erros
Use pending para indicar um estado de carregamento e error para falhas. data contém o JSON analisado.
<template>
<p v-if="pending">Loading...</p>
<p v-else-if="error">Failed to load</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>useAsyncData para lógica personalizada
Quando precisar de mais do que uma URL simples — combinar chamadas ou transformar resultados — use useAsyncData. Ele recebe uma chave exclusiva e uma função de busca.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Por que a chave é importante
A chave elimina duplicações e armazena a requisição. Dois componentes que usam a mesma chave compartilham um resultado e uma chamada de rede, evitando buscas redundantes.
useFetch é uma conveniência
Internamente, useFetch(url) é essencialmente useAsyncData com uma chave gerada automaticamente e uma função de busca $fetch(url). Use useFetch para URLs simples e useAsyncData para funções de busca personalizadas.
Somente no cliente com server:false
Defina server: false para ignorar a busca durante o SSR e executá-la somente no cliente — isso é útil para dados específicos do usuário que não devem bloquear a renderização no servidor.
const { data } = await useFetch('/api/me', {
server: false
})Buscas lentas e não bloqueantes
Por padrão, o await bloqueia a navegação até que os dados cheguem. A opção lazy (ou useLazyFetch) permite que a página seja renderizada imediatamente e preencha os dados quando eles chegarem.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Fazendo uma nova busca com refresh
Os composables retornam uma função refresh para executar a busca novamente sob demanda — após uma mutação ou um clique em um botão.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Parâmetros de consulta reativos
Passe uma query ou opções reativas; quando uma referência observada mudar, a busca será executada novamente automaticamente. Vincule watch para refazer a busca quando as dependências mudarem.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Transformando a resposta
A opção transform remodela a resposta antes que ela chegue a data — é útil para selecionar apenas os campos necessários e reduzir o conteúdo enviado ao cliente.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Verificação rápida
Teste seus conhecimentos sobre a busca de dados no Nuxt.
Recapitulação
Você aprendeu a buscar dados no Nuxt:
- useFetch retorna dados reativos, estado de carregamento e erro.
- useAsyncData recebe uma chave e uma função de busca para lógica personalizada.
- server:false executa somente no cliente; lazy torna a busca não bloqueante.
- refresh() faz uma nova busca; watch executa novamente quando uma dependência muda.
Perguntas Frequentes
A aula “Busca de dados: useFetch e useAsyncData” é grátis?
Sim — o texto completo de “Busca de dados: useFetch e useAsyncData” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Busca de dados: useFetch e useAsyncData”?
useFetch(), useAsyncData(), busca no servidor versus no cliente, refresh() e estado pendente. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Busca de dados: useFetch e useAsyncData”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos
- Busca de dados: useFetch e useAsyncData
- Rotas de servidor e endpoints de API do Nuxt
- Modo SSR vs SSG vs SPA