Configuration

Every option, its default and what it controls.

Configuration

All options live under the skeletonizer key in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-skeletonizer'],
  skeletonizer: {
    enabled: true,
    autoScan: true,
    shimmer: true,
    shimmerDuration: 1200,
    animation: 'wave',
    baseColor: '#e5e7eb',
    highlightColor: '#f8fafc',
    darkBaseColor: '#2a2a2a',
    darkHighlightColor: '#3a3a3a',
    borderRadius: '0.375rem',
    opacity: 1,
    respectBorderRadius: true,
    debug: false,
    darkModeSelector: '.dark',
    scanDebounce: 50,
    maxScanDepth: 64,

    // Step 3 — adaptive engine (all opt-in, default off)
    adaptive: false,
    minFps: 45,
    layoutCache: false,
    telemetry: false,
    offThread: false,
    explain: false,

    // SVG rendering
    svgPrecision: 1,
    svgSharedGradient: true,
  },
})

Options

Option	Type	Default	Description
`enabled`	`boolean`	`true`	Master switch and initial global state.
`autoScan`	`boolean`	`true`	Run the automatic DOM-scan engine.
`shimmer`	`boolean`	`true`	Enable the highlight animation.
`shimmerDuration`	`number`	`1200`	Animation cycle in milliseconds.
`animation`	`string`	`'wave'`	`wave` \| `pulse` \| `fade` \| `gradient` \| `shine` \| `none`.
`baseColor`	`string`	`#e5e7eb`	Light-theme bone color.
`highlightColor`	`string`	`#f8fafc`	Light-theme highlight color.
`darkBaseColor`	`string`	`#2a2a2a`	Dark-theme bone color.
`darkHighlightColor`	`string`	`#3a3a3a`	Dark-theme highlight color.
`borderRadius`	`string`	`0.375rem`	Default bone radius.
`opacity`	`number`	`1`	Resting bone opacity.
`respectBorderRadius`	`boolean`	`true`	Keep each element's own radius.
`debug`	`boolean`	`false`	Verbose engine logging.
`darkModeSelector`	`string`	`.dark`	Selector that activates dark colors.
`scanDebounce`	`number`	`50`	MutationObserver debounce (ms).
`maxScanDepth`	`number`	`64`	Safety cap for deep trees.

Adaptive engine (Step 3)

These power the adaptive engine. All default off, so the module behaves exactly as before unless you opt in. See it live in the Performance Lab.

Option	Type	Default	Description
`adaptive`	`boolean`	`false`	Master switch for the Adaptive Performance Engine (FPS-driven animation degradation, shimmer auto-disable).
`minFps`	`number`	`45`	FPS floor; sustained drops degrade the animation (wave → pulse → none).
`layoutCache`	`false \| 'memory' \| 'session'`	`false`	Cache + replay SVG blueprints by structural fingerprint (`'memory'` for the session in RAM, `'session'` for `sessionStorage`).
`telemetry`	`boolean`	`false`	Collect per-stage timings, FPS, SVG node count and cache ratio.
`offThread`	`boolean`	`false`	Offload fingerprint/telemetry compute to a Web Worker / `requestIdleCallback`.
`explain`	`boolean`	`false`	Emit natural-language explanations of engine decisions.

Nuxt Skeletonizer renders a single <svg> overlay for each host — every measured node becomes a <rect> (or a <circle> for avatars), driven by one shared shimmer gradient. These options control that output.

Option	Type	Default	Description
`renderMode`	`'svg'`	`'svg'`	The render backend. Read-only — SVG is the only backend. Exposed for introspection.
`svgPrecision`	`number`	`1`	Decimal digits used when rounding SVG coordinates. Lower = smaller markup; higher = more precise placement.
`svgSharedGradient`	`boolean`	`true`	Use one `<linearGradient>` in `<defs>` shared by every shape (`true`), or a separate gradient per shape (`false`).

Runtime config

Every value is exposed on runtimeConfig.public.skeletonizer, so you can override it per environment with NUXT_PUBLIC_SKELETONIZER_* env variables — no rebuild required.

App-level theme

You can also change colors, animation and duration at runtime via the composable (setTheme, setAnimation) — see Theming.