Troubleshooting

Fixes for the most common issues.

Troubleshooting

An <img> still shows its picture

Make sure the image is inside an active <Skeletonizer>. The engine hides the real content (visibility: hidden) under the SVG overlay, so the picture should disappear behind its bone. <canvas> / <video> content elements are a known edge case for measurement — use v-skeleton-replace="'image'" or a <SkeletonImage> for those.

My custom widget isn't skeletonized correctly

Use v-skeleton-replace="'<kind>'" to force a bone kind, or v-skeleton-union to collapse the widget into a single bone.

The skeleton flashes on first paint

The engine runs after hydration by design. Bind :enabled to your loading state so it only activates while data is pending. For above-the-fold SSR placeholders, use the manual Skeleton* primitives, which are server-rendered.

Nothing happens

  • Confirm skeletonizer.enabled isn't false globally (or call useSkeletonizer().enable()).
  • Confirm the subtree is actually inside a <Skeletonizer>.
  • If you set autoScan: false, the engine won't scan automatically — call refresh() yourself.

Content added later isn't skeletonized

The MutationObserver re-scans automatically, but if nodes were added by code outside Vue's reactivity, call useSkeletonizer().refresh() after the change.

Colors don't match my theme

The defaults are neutral grays. Override baseColor / highlightColor in config, via setTheme(), or by setting the --sk-* CSS variables. See Theming.

TypeScript can't find the components/composables

Run nuxi prepare to regenerate types, and ensure nuxt-skeletonizer is listed in modules.

Still stuck? Open an issue.