auto-skeleton-vueSkeletons that mirror your components

Auto-generated Vue 3 skeleton loaders 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.

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 →.