Component

Vue Skeleton Component

<DomSkeleton>

A token-driven loading placeholder for cards, rows, text blocks, and avatars.

Playground

Try every prop live

Skeleton playground

Adjust the props to explore sizing, content, and behaviour.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomSkeleton } from '@getdom/studio';

const data = reactive({
		"as": "div",
		"variant": "text",
		"lines": 3,
		"width": "100%",
		"height": "",
		"label": "Loading",
		"animated": true
	});
</script>

<template>
	<DomSkeleton
		v-bind="data"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`as`	string	string	'div'	Element to render.
`variant`	'block' \| 'text' \| 'circle'	string	'block'	Placeholder shape.
`lines`	number	number	1	Number of text lines when variant is text.
`width`	string	string	''	Optional CSS width.
`height`	string	string	''	Optional CSS height.
`label`	string	string	'Loading'	Screen reader label.
`animated`	boolean	boolean	true	Pulse while content is loading.

Auto-generated from Skeleton.props and inline _edit hints.