VeloadVue 3

Placeholders

Skeletons for every layout

Veload ships one primitive, eleven layout patterns, two switching helpers and ten named presets. Everything is decorative until you give it a label.

Primitive

VSkeleton

The building block. Pick a shape, give it a size, and add a label when assistive technology should announce it.

Text

Rectangle

Circle

Group

vue
<script setup lang="ts">
import { VSkeleton } from "veload";
import "veload/style.css";
</script>

<template>
  <!-- A single line of text -->
  <VSkeleton />

  <!-- A card sized rectangle -->
  <VSkeleton variant="rect" width="100%" height="12rem" />

  <!-- An avatar -->
  <VSkeleton variant="circle" :width="48" label="Loading avatar" />
</template>

Patterns

VPatternSkeleton

One component renders eleven layouts. Switch between them with the pattern prop.

vue
<script setup lang="ts">
import { VPatternSkeleton } from "veload";
import "veload/style.css";
</script>

<template>
  <VPatternSkeleton pattern="article" :rows="4" label="Loading article" />
</template>

Switching

VSkeletonSwitch and VAutoSkeleton

Render a skeleton while data loads and the real content afterwards. VAutoSkeleton is the same behaviour under its catalogue name.

vue
<script setup lang="ts">
import { ref } from "vue";
import { VSkeletonSwitch } from "veload";
import "veload/style.css";

const loading = ref(true);
</script>

<template>
  <VSkeletonSwitch :loading="loading" pattern="profile" label="Loading profile">
    <p>Profile content</p>
  </VSkeletonSwitch>
</template>

Named presets

Ready made layouts

Each preset fixes the pattern and exposes only the props that make sense for that layout.