Directives

Fine-grained control over the automatic engine.

Directives

Use directives inside a <Skeletonizer> to steer the automatic engine.

DirectiveEffect
v-skeleton-ignoreExclude the element and its subtree from skeletonization.
v-skeleton-keepKeep the original content visible inside an otherwise-skeletonized tree.
v-skeleton-replace="'avatar'"Force a specific bone kind on the element (skips its subtree).
v-skeleton-unionCollapse the element and its subtree into a single bone.
v-skeleton-shimmerApply only the shimmer overlay, keeping the content visible.

Examples

<Skeletonizer :enabled="pending">
  <!-- Brand logo always shown -->
  <header v-skeleton-keep>
    <Logo />
  </header>

  <!-- Each row becomes one merged bone instead of many small ones -->
  <ul>
    <li v-for="item in items" :key="item.id" v-skeleton-union>
      {{ item.label }}
    </li>
  </ul>

  <!-- Force a specific bone kind -->
  <span v-skeleton-replace="'badge'">{{ status }}</span>

  <!-- Keep the live value but add a shimmer while refreshing -->
  <strong v-skeleton-shimmer>{{ price }}</strong>
</Skeletonizer>

replace kinds

v-skeleton-replace accepts any bone kind: text, heading, image, avatar, badge, tag, button, icon, input, textarea, select, checkbox, radio, switch, or block (the default when no value is given).

Notes

  • v-skeleton-ignore and v-skeleton-keep both stop the engine descending into the subtree; use keep to signal intent ("show the real thing here").
  • Directives set data attributes the engine reads on each scan, so toggling a bound value (v-skeleton-ignore="cond") updates behaviour on the next re-scan.