[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"navigation":3,"page-\u002Fit\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":316,"extension":317,"meta":318,"navigation":319,"path":102,"seo":320,"stem":103,"__hash__":321},"content\u002Fit\u002F15.faq.md",{"type":143,"value":144,"toc":312},"minimark",[145,149],[146,147,34],"h1",{"id":148},"faq",[150,151,152,169,175,184,202,212,218,224,275,291],"accordion",{},[153,154,156],"accordion-item",{"label":155},"Funziona senza scrivere componenti skeleton?",[157,158,159,160,164,165,168],"p",{},"Sì — è proprio il punto. Avvolgi il markup reale in ",[161,162,163],"code",{},"\u003CSkeletonizer>"," e il motore deriva lo skeleton\ndal DOM renderizzato. Sono disponibili anche le primitive manuali ",[161,166,167],{},"Skeleton*",", per quando vuoi un\ncontrollo esplicito.",[153,170,172],{"label":171},"Causerà spostamenti di layout?",[157,173,174],{},"No. Gli elementi vengono stilizzati sul posto e mai rimossi, quindi il layout è identico prima e\ndopo il caricamento.",[153,176,178],{"label":177},"Posso mescolare skeleton automatici e manuali?",[157,179,180,181,183],{},"Sì. I componenti manuali ",[161,182,167],{}," vengono riconosciuti dal motore e lasciati intatti.",[153,185,187],{"label":186},"Supporta la modalità scura?",[157,188,189,190,193,194,197,198,201],{},"Sì, automaticamente tramite ",[161,191,192],{},".dark"," \u002F ",[161,195,196],{},"[data-theme=\"dark\"]",", più ",[161,199,200],{},"setTheme()"," a runtime.",[153,203,205],{"label":204},"È SSR-safe?",[157,206,207,208,211],{},"Sì. Il motore gira sul client dopo l'idratazione, quindi non ci sono mismatch di idratazione. Vedi\n",[209,210,22],"a",{"href":92},".",[153,213,215],{"label":214},"Quanto è grande?",[157,216,217],{},"Il runtime è minuscolo e tree-shakeable — componenti e composable che non usi vengono rimossi dal\nbundle.",[153,219,221],{"label":220},"Funziona con la mia libreria UI?",[157,222,223],{},"Sì. Opera sul DOM renderizzato, quindi è agnostico rispetto al framework all'interno di Vue — Nuxt\nUI, PrimeVue, Vuetify, markup semplice, ecc.",[153,225,227,269],{"label":226},"Perché SVG e non Canvas?",[157,228,229,230,233,234,237,238,242,243,246,247,250,251,254,255,257,258,261,262,265,266,211],{},"SVG si mappa perfettamente sul bounding box dell'host: il motore misura ogni nodo ed emette un\n",[161,231,232],{},"\u003Crect>"," (o un ",[161,235,236],{},"\u003Ccircle>"," per gli avatar) alle coordinate giuste. Un ",[239,240,241],"strong",{},"singolo"," overlay ",[161,244,245],{},"\u003Csvg>","\nmantiene il conteggio dei nodi DOM quasi piatto per quante ossa ci siano a schermo, lo shimmer è\nun'animazione CSS\u002FSMIL ",[239,248,249],{},"nativa"," guidata da un solo gradiente (nessun thrashing CSS per elemento\nin fase di render) ed è ",[239,252,253],{},"SSR-safe e idratabile"," perché un ",[161,256,245],{}," è semplice markup\nserializzabile. ",[161,259,260],{},"preserveAspectRatio"," scala l'intero overlay al resize senza ricalcolare nulla, e\nl'accessibilità arriva gratis con ",[161,263,264],{},"role=\"img\""," + ",[161,267,268],{},"aria-label",[157,270,271,274],{},[239,272,273],{},"Canvas è stato scartato:"," non è serializzabile in SSR, richiede un redraw imperativo a ogni\nresize e rompe l'accessibilità (è un bitmap opaco senza albero semantico).",[153,276,278],{"label":277},"Più istanze di Skeletonizer: collisione tra id del gradiente?",[157,279,280,281,284,285,287,288,211],{},"No. L'id del gradiente shimmer di ciascun overlay è namespacato per host: ",[161,282,283],{},"sk-shimmer-{uid}",". Più\nhost ",[161,286,163],{}," sulla stessa pagina ricevono ognuno un gradiente univoco, quindi nessuna\ncollisione in ",[161,289,290],{},"\u003Cdefs>",[153,292,294],{"label":293},"SVG in SSR: si serializza correttamente?",[157,295,296,297,299,300,302,303,305,306,309,310,211],{},"Sì. Un ",[161,298,245],{}," è semplice markup serializzabile, quindi le primitive manuali ",[161,301,167],{}," (che sono\n",[161,304,245],{}," inline) vengono renderizzate dal server normalmente. L'overlay ",[239,307,308],{},"automatico"," viene\niniettato lato client dopo l'idratazione — esattamente quando gira il resto del motore — quindi il\nrender iniziale del server e del client coincidono e non c'è mismatch di idratazione. Vedi\n",[209,311,22],{"href":92},{"title":313,"searchDepth":314,"depth":314,"links":315},"",3,[],"Domande frequenti su Nuxt Skeletonizer.","md",{},true,{"title":34,"description":316},"8by4QFMOAi0g9KBol4MRgOBtRBdJD915yguiTYk3KIA",1783713299116]