Nuxt Integration

Data fetching

The idiomatic pattern is to bind :enabled to the pending/status of any 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>

This works with useFetch, useLazyFetch, useAsyncData, useLazyAsyncData, useState, callOnce, useRoute and any other source of a reactive boolean.

skeleton: true

For the most concise integration, use the skeleton-aware composables:

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

Rendering features

The module is compatible with:

• SSR and hydration (see SSR)
• Teleport, Suspense, KeepAlive, Transition
• Async / lazy components
• Nested layouts and Nuxt Layers
• Future Server Components as the API stabilises

Layers

Because configuration is read from runtimeConfig.public.skeletonizer, a base layer can ship a default theme and downstream layers/apps can override colors, animation or the global toggle via config or env variables — no code changes required.

SEO & head

Skeletons are client-side and aria-hidden, so they never interfere with useSeoMeta / useHead output or crawled content.