auto-skeleton-vueSkeletons that mirror your components

Auto-generated skeleton loaders for Vue 3 and Nuxt, derived from a component's real rendered layout — zero authoring, always in sync.

Zero authoring

Wrap any component in . No tags to place, no separate placeholder component to build.

The skeleton is derived from the component's actual render, so it updates automatically when your layout changes. Nothing to keep in sync by hand.

Text becomes per-line bars, images and media become blocks — captured from the real DOM, matching spacing, radius, and typography.

One line in nuxt.config. is auto-imported, styles are included, and pages render on the server and hydrate cleanly.

Nuxt guide

Toggle loading to watch the skeleton generate itself from the card's real layout:

vue

<AutoSkeleton :loading="isLoading">
  <UserCard :user="user" />
</AutoSkeleton>

See more examples — stat tiles, an article list, and a settings form — on the live demo page →.

Add the module and wrap your components — no plugin file or CSS import needed:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['auto-skeleton-vue/nuxt'],
})

See the Nuxt guide → for SSR details and data fetching.