Configurazione

Ogni opzione, il suo valore predefinito e cosa controlla.

Configurazione

Tutte le opzioni vivono sotto la chiave skeletonizer 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 — motore adattivo (tutte opt-in, predefinite a off)
    adaptive: false,
    minFps: 45,
    layoutCache: false,
    telemetry: false,
    offThread: false,
    explain: false,

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

Opzioni

Opzione	Tipo	Predefinito	Descrizione
`enabled`	`boolean`	`true`	Interruttore principale e stato globale iniziale.
`autoScan`	`boolean`	`true`	Esegue il motore di scansione automatica del DOM.
`shimmer`	`boolean`	`true`	Attiva l'animazione di evidenziazione.
`shimmerDuration`	`number`	`1200`	Ciclo dell'animazione in millisecondi.
`animation`	`string`	`'wave'`	`wave` \| `pulse` \| `fade` \| `gradient` \| `shine` \| `none`.
`baseColor`	`string`	`#e5e7eb`	Colore dell'osso in tema chiaro.
`highlightColor`	`string`	`#f8fafc`	Colore di evidenziazione in tema chiaro.
`darkBaseColor`	`string`	`#2a2a2a`	Colore dell'osso in tema scuro.
`darkHighlightColor`	`string`	`#3a3a3a`	Colore di evidenziazione in tema scuro.
`borderRadius`	`string`	`0.375rem`	Raggio predefinito dell'osso.
`opacity`	`number`	`1`	Opacità a riposo dell'osso.
`respectBorderRadius`	`boolean`	`true`	Mantiene il raggio proprio di ciascun elemento.
`debug`	`boolean`	`false`	Logging verboso del motore.
`darkModeSelector`	`string`	`.dark`	Selettore che attiva i colori scuri.
`scanDebounce`	`number`	`50`	Debounce del MutationObserver (ms).
`maxScanDepth`	`number`	`64`	Limite di sicurezza per alberi profondi.

Motore adattivo (Step 3)

Queste alimentano il motore adattivo. Tutte predefinite a off, quindi il modulo si comporta esattamente come prima a meno che tu non le attivi. Vedile dal vivo nel Performance Lab.

Opzione	Tipo	Predefinito	Descrizione
`adaptive`	`boolean`	`false`	Interruttore principale del motore di performance adattiva (degrado dell'animazione guidato dagli FPS, disattivazione automatica dello shimmer).
`minFps`	`number`	`45`	Soglia minima di FPS; cali prolungati degradano l'animazione (wave → pulse → none).
`layoutCache`	`false \| 'memory' \| 'session'`	`false`	Memorizza e ripropone i blueprint SVG tramite fingerprint strutturale (`'memory'` per la sessione in RAM, `'session'` per `sessionStorage`).
`telemetry`	`boolean`	`false`	Raccoglie tempi per fase, FPS, conteggio dei nodi SVG e cache ratio.
`offThread`	`boolean`	`false`	Sposta i calcoli di fingerprint/telemetria su un Web Worker / `requestIdleCallback`.
`explain`	`boolean`	`false`	Emette spiegazioni in linguaggio naturale delle decisioni del motore.

Nuxt Skeletonizer renderizza un singolo overlay <svg> per ciascun host — ogni nodo misurato diventa un <rect> (o un <circle> per gli avatar), guidato da un unico gradiente shimmer condiviso. Queste opzioni controllano quell'output.

Opzione	Tipo	Predefinito	Descrizione
`renderMode`	`'svg'`	`'svg'`	Il backend di rendering. Sola lettura — SVG è l'unico backend. Esposto per introspezione.
`svgPrecision`	`number`	`1`	Cifre decimali usate nell'arrotondamento delle coordinate SVG. Più basso = markup più piccolo; più alto = posizionamento più preciso.
`svgSharedGradient`	`boolean`	`true`	Usa un unico `<linearGradient>` in `<defs>` condiviso da ogni forma (`true`), oppure un gradiente separato per ogni forma (`false`).

Runtime config

Ogni valore è esposto su runtimeConfig.public.skeletonizer, quindi puoi sovrascriverlo per ambiente con le variabili d'ambiente NUXT_PUBLIC_SKELETONIZER_* — senza ricompilare.

Tema a livello di app

Puoi anche cambiare colori, animazione e durata a runtime tramite il composable (setTheme, setAnimation) — vedi Temi.