Skip to main content

Vue Examples

These examples use Vue components for primitives and core utility classes for layout, sizing, and spacing.

Profile Row​

<script setup lang="ts">
import { Skeleton, SkeletonAvatar, SkeletonLine } from "@skelia/vue";
</script>

<template>
  <section aria-busy="true">
    <span class="sk-sr-only">Loading profile</span>

    <Skeleton>
      <div class="sk-row">
        <SkeletonAvatar />
        <div class="sk-stack sk-flex-1 sk-gap-sm">
          <SkeletonLine class="sk-w-40" />
          <SkeletonLine class="sk-w-80" />
        </div>
      </div>
    </Skeleton>
  </section>
</template>

Profile row

Article Card​

<script setup lang="ts">
import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/vue";
</script>

<template>
  <Skeleton animation="shimmer">
    <div class="sk-stack sk-gap-md">
      <SkeletonBox class="sk-ratio-16-9" />
      <SkeletonLine class="sk-w-70 sk-h-lg" />
      <SkeletonLine class="sk-w-100" />
      <SkeletonLine class="sk-w-90" />
      <SkeletonLine class="sk-w-60" />
    </div>
  </Skeleton>
</template>

Article card

Product Card​

<script setup lang="ts">
import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/vue";
</script>

<template>
  <Skeleton animation="wave">
    <div class="sk-stack sk-gap-md">
      <SkeletonBox class="sk-ratio-4-3" />
      <SkeletonLine class="sk-w-80 sk-h-lg" />
      <div class="sk-row-between">
        <SkeletonLine class="sk-w-30" />
        <SkeletonBox class="sk-button sk-w-30" />
      </div>
    </div>
  </Skeleton>
</template>

Product card

Loading List​

<script setup lang="ts">
import { Skeleton, SkeletonBox, SkeletonLine } from "@skelia/vue";
</script>

<template>
  <Skeleton as="ul" class="sk-stack">
    <li v-for="index in 3" :key="index" class="sk-row">
      <SkeletonBox class="sk-icon" />
      <SkeletonLine class="sk-flex-1" />
    </li>
  </Skeleton>
</template>

Loading list