Dashboard skeleton (VDashboardSkeleton)

Table preview: one fixed header + 3 data rows. Statistics and chart are separate sections.

<VDashboardSkeleton />

Controls

Data rows 3

Columns 3

Data rows only. One fixed table header is always shown; statistics and chart are separate.

Shimmer animation

Base colour

The picker cannot show transparency. Type an rgba() value to keep it.

Highlight colour

The picker cannot show transparency. Type an rgba() value to keep it.

Accessible label

Blocks

ChartStats

Implementation

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

<template>
  <VDashboardSkeleton />
</template>

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

<template>
  <VDashboardSkeleton />
</template>

import { VDashboardSkeleton, type VDashboardSkeletonProps } from "veload";

const props: VDashboardSkeletonProps = {
};

// Render it: <VDashboardSkeleton v-bind="props" />

npm install veload

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({
  css: ["veload/style.css"],
});

// Vite / Webpack — main.ts
import "veload/style.css";

Props

VDashboardSkeleton props
Prop	Type	Default	Description
`rows`	`number`	`3`	Number of repeated text lines, list items, fields or data rows. Clamped to 1–12. Table and dashboard headers are separate; dashboard always includes one fixed header.
`columns`	`number`	`3`	Number of columns in table and dashboard layouts. Clamped to 1–6.
`showChart`	`boolean`	`true`	Toggles the dashboard chart block.
`showStats`	`boolean`	`true`	Toggles the statistic tiles used by profile and dashboard patterns.
`color`	`string`	`—`	Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`.
`highlightColor`	`string`	`—`	Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`.
`animated`	`boolean`	`true`	Enables the shimmer animation. Reduced-motion preferences always disable it.
`label`	`string`	`—`	Accessible name announced by the status region. Without a label the skeleton stays hidden from assistive technology.

About this preset

Statistic tiles, a chart block and a table with one fixed header.
Rows counts data rows only; the header, chart and statistic tiles are separate sections.
Column count drives both the table and the statistic row.
Use `showChart` to collapse the chart block.

Controls

Implementation

Props

About this preset

More presets