[{"data":1,"prerenderedAt":504},["ShallowReactive",2],{"navigation":3,"page-\u002Fen\u002Fautomatic-skeletonization":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":58,"body":142,"description":498,"extension":499,"meta":500,"navigation":501,"path":59,"seo":502,"stem":60,"__hash__":503},"content\u002Fen\u002F6.automatic-skeletonization.md",{"type":143,"value":144,"toc":488},"minimark",[145,149,175,180,183,238,251,255,262,271,274,385,388,392,432,436,447,451,458,462],[146,147,58],"h1",{"id":148},"automatic-skeletonization",[150,151,152,153,157,158,162,163,166,167,174],"p",{},"The heart of the module is a ",[154,155,156],"strong",{},"DOM-scanning engine"," that runs inside every active\n",[159,160,161],"code",{},"\u003CSkeletonizer>",". It walks the rendered subtree (leaf-stop DFS), ",[154,164,165],{},"measures"," every element it will\nskeletonize, classifies it, and renders the whole result as ",[154,168,169,170,173],{},"one ",[159,171,172],{},"\u003Csvg>"," overlay"," positioned above\nthe (hidden but still laid-out) real content — without ever moving, wrapping or removing a node.",[176,177,179],"h2",{"id":178},"what-it-recognises","What it recognises",[150,181,182],{},"The engine classifies elements into semantic bone kinds:",[150,184,185,188,189,188,192,188,195,188,198,188,201,188,204,188,207,188,210,213,214,188,217,188,220,188,223,188,226,229,230,233,234,237],{},[159,186,187],{},"text"," · ",[159,190,191],{},"heading",[159,193,194],{},"image",[159,196,197],{},"avatar",[159,199,200],{},"badge",[159,202,203],{},"tag",[159,205,206],{},"button",[159,208,209],{},"icon",[159,211,212],{},"input"," ·\n",[159,215,216],{},"textarea",[159,218,219],{},"select",[159,221,222],{},"checkbox",[159,224,225],{},"radio",[159,227,228],{},"switch"," · plus generic ",[159,231,232],{},"block"," \u002F ",[159,235,236],{},"container"," and\ncustom components.",[150,239,240,241,243,244,247,248,250],{},"Classification uses tag names, ARIA roles, computed styles and structure (e.g. a roughly-square\nelement with a circular radius becomes an ",[159,242,197],{},"; an ",[159,245,246],{},"\u003Cimg>"," becomes an ",[159,249,194],{},").",[176,252,254],{"id":253},"layout-fidelity-a-structural-replica-not-an-approximation","Layout fidelity — a structural replica, not an approximation",[150,256,257,258,261],{},"The skeleton is not a rough stand-in: it is measured to be a ",[154,259,260],{},"structurally faithful replica"," of\nthe real layout, coordinate for coordinate.",[263,264,268],"pre",{"className":265,"code":267,"language":187},[266],"language-text","Real element  →  Bounding box (scan)  →  SVG blueprint  →  Rendered skeleton\n  312×48px         { x, y, w:312,          \u003Crect width=\"312\"       identical\n  rx 8px            h:48, radius:8 }          height=\"48\" rx=\"8\"\u002F>   312×48 box\n",[159,269,267],{"__ignoreMap":270},"",[150,272,273],{},"What is preserved exactly, with no invented values:",[275,276,277,300,322,336,361],"ul",{},[278,279,280,283,284,287,288,291,292,295,296,299],"li",{},[154,281,282],{},"Width & height"," — read via ",[159,285,286],{},"getBoundingClientRect()"," and carried through to the SVG ",[159,289,290],{},"width","\u002F\n",[159,293,294],{},"height"," unchanged (rounded to ",[159,297,298],{},"svgPrecision"," decimal places, so the blueprint matches the real\nbox to within ±1px). No arbitrary widths, no percentage guesses, no random shrinkage.",[278,301,302,305,306,309,310,313,314,317,318,321],{},[154,303,304],{},"Border radius"," — the element's own computed ",[159,307,308],{},"border-radius"," maps straight onto the shape's\n",[159,311,312],{},"rx","\u002F",[159,315,316],{},"ry"," (or a ",[159,319,320],{},"\u003Ccircle>"," when the element is square and visibly round — see Avatars below).",[278,323,324,327,328,331,332,335],{},[154,325,326],{},"Text lines"," — a wrapped text node is measured line by line (",[159,329,330],{},"Range.getClientRects()","), so a\nparagraph that wraps into 3 real lines of 320px \u002F 287px \u002F 164px produces exactly 3 bones of\n320px \u002F 287px \u002F 164px. The engine never falls back to an artificial ",[159,333,334],{},"100% \u002F 90% \u002F 75%"," ladder\nwhen the real per-line width is available; only when no text-layout information exists at all\n(e.g. an empty leaf) does it fall back to the element's own box.",[278,337,338,341,342,313,344,313,347,350,351,353,354,356,357,360],{},[154,339,340],{},"Images & avatars"," — an ",[159,343,246],{},[159,345,346],{},"\u003Cpicture>",[159,348,349],{},"\u003Cvideo>"," bone keeps the element's real width,\nheight and aspect ratio (never deformed into a square). A roughly-square element with a visible\ncircular radius becomes an ",[159,352,197],{},": a true ",[159,355,320],{}," when it reads as fully round, or a\n",[159,358,359],{},"\u003Crect rx>"," matching the measured radius when it is a rounded square instead.",[278,362,363,366,367,370,371,291,374,313,377,380,381,384],{},[154,364,365],{},"Flex & grid structure"," — because every descendant is drawn at its own real absolute position\n(relative to the host), a grid never collapses into a vertical list and a flex row never\ncollapses into a stack: the gaps and alignment are implicit in the measured coordinates. The\nscan layer additionally records each flex\u002Fgrid container's ",[159,368,369],{},"display",", ",[159,372,373],{},"flex-direction",[159,375,376],{},"justify-content",[159,378,379],{},"align-items",", and row\u002Fcolumn ",[159,382,383],{},"gap"," for verification and DevTools\u002FExplain —\nthis metadata is a record of what the renderer already reproduces geometrically, not a separate\napproximation.",[150,386,387],{},"The renderer is deterministic: the same scanned nodes always produce the same SVG markup — no\nrandom line lengths, no cosmetic jitter.",[176,389,391],{"id":390},"how-a-bone-is-painted","How a bone is painted",[275,393,394,408,425],{},[278,395,396,397,399,400,403,404,407],{},"The scan layer never mutates the real subtree — it only reads ",[159,398,286],{}," and\n",[159,401,402],{},"getComputedStyle()",". The real content is hidden with ",[159,405,406],{},"visibility: hidden"," (its layout box stays\nin place, which is exactly what makes the measurement possible).",[278,409,410,411,413,414,417,418,420,421,424],{},"The SVG renderer turns the measured nodes into one absolutely-positioned ",[159,412,172],{}," overlay: each\nbone is a ",[159,415,416],{},"\u003Crect>"," (or ",[159,419,320],{}," for avatars\u002Fradios), filled by a shared, namespaced\n",[159,422,423],{},"\u003ClinearGradient>"," that drives the shimmer sweep for every shape at once.",[278,426,427,428,431],{},"Disabling the skeleton removes the overlay and restores ",[159,429,430],{},"visibility: visible"," — the real markup\nwas never touched.",[176,433,435],{"id":434},"re-scanning","Re-scanning",[150,437,438,439,442,443,446],{},"A debounced ",[159,440,441],{},"MutationObserver"," watches the subtree, so content added after the first scan (lazy\nlists, async components) is skeletonized automatically. You can also call ",[159,444,445],{},"refresh()"," manually.",[176,448,450],{"id":449},"mixing-with-manual-skeletons","Mixing with manual skeletons",[150,452,453,454,457],{},"Manual ",[159,455,456],{},"Skeleton*"," components are recognised and left untouched by the engine, so you can freely mix\nautomatic and hand-authored skeletons in the same tree.",[176,459,461],{"id":460},"steering-it","Steering it",[150,463,464,465,470,471,370,474,370,477,480,481,370,484,487],{},"Use the ",[466,467,469],"a",{"href":468},"\u002Fdirectives","directives"," — ",[159,472,473],{},"v-skeleton-ignore",[159,475,476],{},"v-skeleton-keep",[159,478,479],{},"v-skeleton-replace",",\n",[159,482,483],{},"v-skeleton-union",[159,485,486],{},"v-skeleton-shimmer"," — to override the engine where you need precision.",{"title":270,"searchDepth":489,"depth":489,"links":490},3,[491,493,494,495,496,497],{"id":178,"depth":492,"text":179},2,{"id":253,"depth":492,"text":254},{"id":390,"depth":492,"text":391},{"id":434,"depth":492,"text":435},{"id":449,"depth":492,"text":450},{"id":460,"depth":492,"text":461},"How the DOM-scan engine classifies elements and preserves layout.","md",{},true,{"title":58,"description":498},"e8-JI4kNEhy4LHVFoDWSV7uOTxJzrbVPpiS4KJX5KrI",1783713298622]