@hollow-kit/vue

Vue 3 skeleton loading component powered by Hollow Kit.

Installation

pnpm add @hollow-kit/vue

Usage

<script setup>
import { Skeleton } from '@hollow-kit/vue'
</script>

<template>
  <Skeleton :loading="isLoading" name="card">
    <template #fallback>
      <div class="animate-pulse h-48 bg-gray-200 rounded" />
    </template>
    <MyCard :data="data" />
  </Skeleton>
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | loading | boolean | required | Show skeleton when true | | name | string | — | Name for registry lookup | | initial-hollows | HollowResult \| ResponsiveHollows | — | Pre-generated hollow data | | color | string | rgba(0,0,0,0.08) | Bone color (light mode) | | dark-color | string | rgba(255,255,255,0.06) | Bone color (dark mode) | | animate | boolean | true | Pulse animation | | auto-capture | boolean | false | Self-capture on first render |

License

MIT