[{"data":1,"prerenderedAt":323},["ShallowReactive",2],{"navigation":3,"page-\u002Fen\u002Ffaq":140},[4,74],{"title":5,"path":6,"stem":7,"children":8,"page":73},"En","\u002Fen","en",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fen\u002Fgetting-started","en\u002F1.getting-started",{"title":14,"path":15,"stem":16},"Nuxt Integration","\u002Fen\u002Fnuxt-integration","en\u002F10.nuxt-integration",{"title":18,"path":19,"stem":20},"Theming","\u002Fen\u002Ftheming","en\u002F11.theming",{"title":22,"path":23,"stem":24},"SSR","\u002Fen\u002Fssr","en\u002F12.ssr",{"title":26,"path":27,"stem":28},"Performance","\u002Fen\u002Fperformance","en\u002F13.performance",{"title":30,"path":31,"stem":32},"DevTools","\u002Fen\u002Fdevtools","en\u002F14.devtools",{"title":34,"path":35,"stem":36},"FAQ","\u002Fen\u002Ffaq","en\u002F15.faq",{"title":38,"path":39,"stem":40},"Troubleshooting","\u002Fen\u002Ftroubleshooting","en\u002F16.troubleshooting",{"title":42,"path":43,"stem":44},"Installation","\u002Fen\u002Finstallation","en\u002F2.installation",{"title":46,"path":47,"stem":48},"Configuration","\u002Fen\u002Fconfiguration","en\u002F3.configuration",{"title":50,"path":51,"stem":52},"Basic Usage","\u002Fen\u002Fbasic-usage","en\u002F4.basic-usage",{"title":54,"path":55,"stem":56},"Advanced Usage","\u002Fen\u002Fadvanced-usage","en\u002F5.advanced-usage",{"title":58,"path":59,"stem":60},"Automatic Skeletonization","\u002Fen\u002Fautomatic-skeletonization","en\u002F6.automatic-skeletonization",{"title":62,"path":63,"stem":64},"Components","\u002Fen\u002Fcomponents","en\u002F7.components",{"title":66,"path":67,"stem":68},"Directives","\u002Fen\u002Fdirectives","en\u002F8.directives",{"title":70,"path":71,"stem":72},"Composables","\u002Fen\u002Fcomposables","en\u002F9.composables",false,{"title":75,"path":76,"stem":77,"children":78,"page":73},"It","\u002Fit","it",[79,83,87,91,94,98,101,104,108,112,116,120,124,128,132,136],{"title":80,"path":81,"stem":82},"Per iniziare","\u002Fit\u002Fgetting-started","it\u002F1.getting-started",{"title":84,"path":85,"stem":86},"Integrazione Nuxt","\u002Fit\u002Fnuxt-integration","it\u002F10.nuxt-integration",{"title":88,"path":89,"stem":90},"Temi","\u002Fit\u002Ftheming","it\u002F11.theming",{"title":22,"path":92,"stem":93},"\u002Fit\u002Fssr","it\u002F12.ssr",{"title":95,"path":96,"stem":97},"Prestazioni","\u002Fit\u002Fperformance","it\u002F13.performance",{"title":30,"path":99,"stem":100},"\u002Fit\u002Fdevtools","it\u002F14.devtools",{"title":34,"path":102,"stem":103},"\u002Fit\u002Ffaq","it\u002F15.faq",{"title":105,"path":106,"stem":107},"Risoluzione dei problemi","\u002Fit\u002Ftroubleshooting","it\u002F16.troubleshooting",{"title":109,"path":110,"stem":111},"Installazione","\u002Fit\u002Finstallation","it\u002F2.installation",{"title":113,"path":114,"stem":115},"Configurazione","\u002Fit\u002Fconfiguration","it\u002F3.configuration",{"title":117,"path":118,"stem":119},"Uso di base","\u002Fit\u002Fbasic-usage","it\u002F4.basic-usage",{"title":121,"path":122,"stem":123},"Uso avanzato","\u002Fit\u002Fadvanced-usage","it\u002F5.advanced-usage",{"title":125,"path":126,"stem":127},"Skeletonizzazione automatica","\u002Fit\u002Fautomatic-skeletonization","it\u002F6.automatic-skeletonization",{"title":129,"path":130,"stem":131},"Componenti","\u002Fit\u002Fcomponents","it\u002F7.components",{"title":133,"path":134,"stem":135},"Direttive","\u002Fit\u002Fdirectives","it\u002F8.directives",{"title":137,"path":138,"stem":139},"Composable","\u002Fit\u002Fcomposables","it\u002F9.composables",{"id":141,"title":34,"body":142,"description":317,"extension":318,"meta":319,"navigation":320,"path":35,"seo":321,"stem":36,"__hash__":322},"content\u002Fen\u002F15.faq.md",{"type":143,"value":144,"toc":313},"minimark",[145,149],[146,147,34],"h1",{"id":148},"faq",[150,151,152,169,175,184,202,212,218,224,275,292],"accordion",{},[153,154,156],"accordion-item",{"label":155},"Does it work without writing skeleton components?",[157,158,159,160,164,165,168],"p",{},"Yes — that's the whole point. Wrap real markup in ",[161,162,163],"code",{},"\u003CSkeletonizer>"," and the engine derives the\nskeleton from the rendered DOM. Manual ",[161,166,167],{},"Skeleton*"," primitives are available too, for when you want\nexplicit control.",[153,170,172],{"label":171},"Will it cause layout shift?",[157,173,174],{},"No. Elements are styled in place and never removed, so the layout is identical before and after\nloading.",[153,176,178],{"label":177},"Can I mix automatic and manual skeletons?",[157,179,180,181,183],{},"Yes. Manual ",[161,182,167],{}," components are recognised by the engine and left untouched.",[153,185,187],{"label":186},"Does it support dark mode?",[157,188,189,190,193,194,197,198,201],{},"Yes, automatically via ",[161,191,192],{},".dark"," \u002F ",[161,195,196],{},"[data-theme=\"dark\"]",", plus runtime ",[161,199,200],{},"setTheme()",".",[153,203,205],{"label":204},"Is it SSR-safe?",[157,206,207,208,201],{},"Yes. The engine runs on the client after hydration, so there are no hydration mismatches. See\n",[209,210,22],"a",{"href":211},"\u002Fssr",[153,213,215],{"label":214},"How big is it?",[157,216,217],{},"The runtime is tiny and tree-shakeable — components and composables you don't use are dropped from\nthe bundle.",[153,219,221],{"label":220},"Does it work with my UI library?",[157,222,223],{},"Yes. It operates on the rendered DOM, so it's framework-agnostic within Vue — Nuxt UI, PrimeVue,\nVuetify, plain markup, etc.",[153,225,227,269],{"label":226},"Why SVG and not Canvas?",[157,228,229,230,233,234,237,238,242,243,246,247,250,251,254,255,257,258,261,262,265,266,201],{},"SVG maps perfectly onto the host's bounding box: the engine measures each node and emits one\n",[161,231,232],{},"\u003Crect>"," (or ",[161,235,236],{},"\u003Ccircle>"," for avatars) at the right coordinates. A ",[239,240,241],"strong",{},"single"," ",[161,244,245],{},"\u003Csvg>"," overlay keeps\nthe DOM node count almost flat no matter how many bones are on screen, the shimmer is a ",[239,248,249],{},"native","\nCSS\u002FSMIL animation driven by one gradient (no per-element CSS thrashing during render), and it's\n",[239,252,253],{},"SSR-safe and hydratable"," because an ",[161,256,245],{}," is just serializable markup. ",[161,259,260],{},"preserveAspectRatio","\nscales the whole overlay on resize without recomputing anything, and accessibility comes for free\nwith ",[161,263,264],{},"role=\"img\""," + ",[161,267,268],{},"aria-label",[157,270,271,274],{},[239,272,273],{},"Canvas was rejected:"," it isn't serializable in SSR, it needs an imperative redraw on every\nresize, and it breaks accessibility (it's an opaque bitmap with no semantic tree).",[153,276,278],{"label":277},"Multiple Skeletonizer instances — will the gradient ids collide?",[157,279,280,281,284,285,287,288,291],{},"No. Each overlay's shimmer gradient id is namespaced per host: ",[161,282,283],{},"sk-shimmer-{uid}",". Many\n",[161,286,163],{}," hosts on the same page each get a unique gradient, so there's no ",[161,289,290],{},"\u003Cdefs>"," clash.",[153,293,295],{"label":294},"SVG in SSR — does it serialize correctly?",[157,296,297,298,300,301,303,304,306,307,310,311,201],{},"Yes. An ",[161,299,245],{}," is plain, serializable markup, so the manual ",[161,302,167],{}," primitives (which are\ninline ",[161,305,245],{},") server-render normally. The ",[239,308,309],{},"automatic"," overlay is injected on the client after\nhydration — exactly when the rest of the engine runs — so the server and client's initial render\nmatch and there is no hydration mismatch. See ",[209,312,22],{"href":211},{"title":314,"searchDepth":315,"depth":315,"links":316},"",3,[],"Common questions about Nuxt Skeletonizer.","md",{},true,{"title":34,"description":317},"npo3zPs7i4fFVqnUmeLw2A7q2zWn8OBD4GhakcGgUO0",1783713298618]