# Fetching dati in Nuxt 3: useFetch, useAsyncData e $fetch

useFetch è useAsyncData più $fetch. Usa useFetch nel setup per i dati della pagina, useAsyncData per una sorgente qualsiasi e $fetch dentro gli eventi.

> Pagina: https://ui.eneawork.it/blog/nuxt-3-data-fetching
> Markdown: https://ui.eneawork.it/blog/nuxt-3-data-fetching.md

*2026-11-01*

In Nuxt 3 useFetch è useAsyncData con $fetch già collegato: esegue la chiamata sul server, mette il risultato nel payload e lo riusa durante l’idratazione, senza una seconda richiesta dal browser.

Misurato il 1 novembre 2026: il catalogo conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats. Su 1.514 profili di libreria 10 riguardano Vue, 8 dei quali dichiarano licenza MIT: il catalogo è servito da un backend Express con endpoint JSON pubblici, lo stesso schema che Nuxt interroga qui. Metodo: lettura di data/library_profiles.json e della risposta di /api/stats con uno script Node, sul repository EneUI.

## Il caso normale: dati della pagina

const { data, status, error, refresh } = await useFetch("/api/posts", { key: "posts", query: { page: 1 }, transform: (rows) => rows.filter((row) => row.published), }); Loading... Failed: {{ error.message }} {{ post.title }}

await davanti a useFetch fa attendere il risultato prima del render, quindi il server risponde con l’HTML già pieno. Togli l’await e ottieni lo stesso dato in streaming, con uno stato di caricamento visibile.

## Sorgenti che non sono URL

const route = useRoute(); const { data: post } = await useAsyncData( () => `post-${route.params.slug}`, () => $fetch(`/api/posts/${route.params.slug}`), { watch: [() => route.params.slug] }, );

La chiave è una funzione che dipende dalla rotta: cambia con lo slug e il payload resta coerente. watch rifà la chiamata quando lo slug cambia, mentre $fetch dentro la funzione è la chiamata vera e propria.

## Dentro un evento serve $fetch

async function save(title: string) { await $fetch("/api/posts", { method: "POST", body: { title }, }); await refresh(); }

I composable di fetching vanno chiamati durante il setup, non dentro un gestore di click. Nell’handler usa $fetch e aggiorna con refresh restituito dal composable, oppure scrivi lo stato che gestisci tu.

## Quale usare

## Errori comuni

## Il limite da mettere in conto

Tutto ciò che useFetch e useAsyncData recuperano finisce nel payload inviato al browser. Non è una cache privata del server: per dati riservati serve un endpoint che verifichi la sessione e restituisca solo ciò che l’utente può vedere.

## Dove continuare

Nel catalogo: shadcn-vue, PrimeVue e Vue Flow; le sezioni con dati sono in /blocks. Le guide: struttura di un progetto Nuxt 3 e Composition API. Il confronto: i quattro livelli di cache in Next.js.

## FAQ

### useFetch o useAsyncData?

useFetch è useAsyncData più $fetch già configurato. Usa useAsyncData quando la sorgente non è una chiamata HTTP o quando devi comporre più richieste.

### Perché la richiesta parte due volte?

La chiave cambia fra server e client. Una key stabile, esplicita e senza valori casuali fa riusare il payload dell’idratazione.

### Posso usare useFetch dentro un evento?

No. useFetch va chiamato nel setup. Dentro un handler usa $fetch e poi aggiorna con refresh o con lo stato che gestisci.

### I dati sensibili restano sul server?

No: con useFetch e useAsyncData il risultato finisce nel payload inviato al browser. Le chiamate private vanno dentro un endpoint server.

### Come gestisco lo stato di caricamento?

useAsyncData restituisce status, pending ed error. status è più preciso: pending è vero solo tra un caricamento e l’altro.