Integrazione Nuxt

Recupero dati

Il pattern idiomatico è collegare :enabled al pending/status di qualsiasi data composable:

<script setup lang="ts">
const { data, pending } = await useLazyAsyncData('users', () => $fetch('/api/users'))
</script>

<template>
  <Skeletonizer :enabled="pending">
    <UserTable :rows="data" />
  </Skeletonizer>
</template>

Funziona con useFetch, useLazyFetch, useAsyncData, useLazyAsyncData, useState, callOnce, useRoute e qualsiasi altra sorgente di un booleano reattivo.

skeleton: true

Per l'integrazione più concisa, usa i composable skeleton-aware:

const { data } = await useSkeletonFetch('/api/users', { skeleton: true })

Funzionalità di rendering

Il modulo è compatibile con:

• SSR e idratazione (vedi SSR)
• Teleport, Suspense, KeepAlive, Transition
• Componenti asincroni / lazy
• Layout annidati e Nuxt Layers
• I futuri Server Components man mano che l'API si stabilizza

Layers

Poiché la configurazione viene letta da runtimeConfig.public.skeletonizer, un layer di base può fornire un tema predefinito e i layer/app a valle possono sovrascrivere colori, animazione o l'interruttore globale tramite config o variabili d'ambiente — senza modifiche al codice.

SEO & head

Gli skeleton sono lato client e aria-hidden, quindi non interferiscono mai con l'output di useSeoMeta / useHead né con i contenuti indicizzati.