Vue

Use boneyard in Nuxt, Vite, or any Vue 3 app. Same pixel-perfect skeletons, same CLI — Vue component with slots.

Quick start

1. Install

bash

npm install boneyard-js

2. Wrap your components

App.vue

<script setup>
import { ref } from 'vue'
import Skeleton from 'boneyard-js/vue'
import './bones/registry'

const loading = ref(true)
</script>

<template>
  <Skeleton name="blog-card" :loading="loading">
    <BlogCard />
  </Skeleton>
</template>

3. Generate bones

bash

npx boneyard-js build

Auto-detects your Vite/Nuxt dev server and captures all named skeletons.

4. Import the registry

// Add once in your app entry (e.g. main.ts)
import './bones/registry'

Props

Prop	Type	Default	Description
loading	boolean	—	Show skeleton or children
name	string	—	Resolve bones from registry by name
initialBones	ResponsiveBones	—	Pass bones directly (overrides registry)
color	string	rgba(0,0,0,0.08)	Bone color in light mode
darkColor	string	rgba(255,255,255,0.06)	Bone color in dark mode
animate	'pulse' \| 'shimmer' \| 'solid'	pulse	Animation style (also accepts true/false)
class	string	—	CSS class on the container
snapshotConfig	SnapshotConfig	—	Controls bone extraction during CLI capture

Slots

Slot	Description
default	Your real component — shown when not loading
#fallback	Shown when loading but no bones are available
#fixture	Mock content for CLI capture (dev only, never in production)

vue

<Skeleton name="dashboard" :loading="loading">
  <!-- Default: your real component -->
  <Dashboard :data="data" />

  <!-- Fixture: mock content for CLI bone capture -->
  <template #fixture>
    <Dashboard :data="mockData" />
  </template>

  <!-- Fallback: shown if no bones generated yet -->
  <template #fallback>
    <p>Loading...</p>
  </template>
</Skeleton>

Dark mode

Auto-detects via .dark class on <html> or any parent element (Tailwind convention), and prefers-color-scheme media query. Uses darkColor when dark mode is active.

Animations

Value	Effect
'pulse'	Fades a lighter overlay in and out (1.8s cycle)
'shimmer'	Sweeps a gradient highlight across each bone (2.4s cycle)
'solid'	Static — no animation
true / false	true = pulse, false = solid

vue

<!-- Shimmer -->
<Skeleton name="card" :loading="true" animate="shimmer">

<!-- Custom colors -->
<Skeleton name="card" :loading="true" color="#fca5a5" dark-color="#7f1d1d">

Global defaults

Set defaults for all skeletons with configureBoneyard():

import { configureBoneyard } from 'boneyard-js/vue'

configureBoneyard({
  color: '#e5e5e5',
  darkColor: 'rgba(255,255,255,0.08)',
  animate: 'shimmer',
})

Per-component props override global defaults.

Next steps

See Getting Started for the full web setup walkthrough
See Output to understand the .bones.json format
See React docs for CLI flags and config file reference