@antoniogiroz/vue-skeleton NPM

Installation

# npm
npm install @antoniogiroz/vue-skeleton

Usage

<script setup lang="ts">
import { Skeleton } from '@antoniogiroz/vue-skeleton'
</script>

<template>
  <Skeleton /> // Simple, single-line loading skeleton
  <Skeleton :count="5" /> // Five-line loading skeleton
</template>

Principles

Adapts to the styles you have defined

The Skeleton component should be used directly in your components in place of content that is loading. While other libraries require you to meticulously craft a skeleton screen that matches the font size, line height, and margins of your content, the Skeleton component is automatically sized to the correct dimensions.

For example:

<script setup lang="ts">
import { Skeleton } from '@antoniogiroz/vue-skeleton'

const props = defineProps<{
  title?: string
  body?: string
}>()
</script>

<template>
  <div>
    <h1 v-if="props.title">
      {{ props.title }}
    </h1>
    <Skeleton v-else />

    <template v-if="props.body">
      {{ props.body }}
    </template>
    <Skeleton v-else :count="10" />
  </div>
</template>

...will produce correctly-sized skeletons for the heading and body without any further configuration.

This ensures the loading state remains up-to-date with any changes to your layout or typography.

Don't make dedicated skeleton screens

Instead, make components with built-in skeleton states.

This approach is beneficial because:

It keeps styles in sync.
Components should represent all possible states — loading included.
It allows for more flexible loading patterns. In the blog post example above, it's possible to have the title load before the body, while having both pieces of content show loading skeletons at the right time.

Theming

Customize individual skeletons with props, or render a SkeletonTheme to style all skeletons below it in the Vue hierarchy:

<script setup lang="ts">
import { Skeleton, SkeletonTheme } from '@antoniogiroz/vue-skeleton'
</script>

<template>
  <SkeletonTheme base-color="#202020" highlight-color="#444">
    <p>
      <Skeleton count="{3}" />
    </p>
  </SkeletonTheme>
</template>