[{"data":1,"prerenderedAt":974},["ShallowReactive",2],{"navigation":3,"page-\u002Fen\u002Fcomponents":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":62,"body":142,"description":968,"extension":969,"meta":970,"navigation":971,"path":63,"seo":972,"stem":64,"__hash__":973},"content\u002Fen\u002F7.components.md",{"type":143,"value":144,"toc":964},"minimark",[145,149,153,191,232,239,242,384,394,398,593,601,729,736,942,960],[146,147,62],"h1",{"id":148},"components",[150,151,152],"p",{},"All components are auto-imported.",[154,155,156],"blockquote",{},[150,157,158,162,163,167,168,171,172,175,176,179,180,183,184,186,187,190],{},[159,160,161],"strong",{},"Rendered output is SVG."," Every skeleton — automatic or manual — paints as a single ",[164,165,166],"code",{},"\u003Csvg>","\noverlay of ",[164,169,170],{},"\u003Crect>"," and ",[164,173,174],{},"\u003Ccircle>"," shapes, not a tree of ",[164,177,178],{},"\u003Cdiv class=\"skeleton-*\">"," elements. The\nreal content stays in the DOM (hidden with ",[164,181,182],{},"visibility: hidden",") so the layout is preserved; the\n",[164,185,166],{}," sits absolutely positioned on top, its ",[164,188,189],{},"viewBox"," locked to the host's bounding box.",[150,192,193,194,199,200,203,204,203,207,210,211,214,215,218,219,222,223,227,228,231],{},"Every component in this page honours the same dimension-preservation rules as the ",[195,196,198],"a",{"href":197},"\u002Fautomatic-skeletonization#layout-fidelity--a-structural-replica-not-an-approximation","automatic\nengine",":\n",[164,201,202],{},"width","\u002F",[164,205,206],{},"height",[164,208,209],{},"radius"," props are drawn exactly as given (never randomized or rounded away), and\n",[164,212,213],{},"\u003CSkeletonImage>"," never distorts a configured ",[164,216,217],{},"aspect-ratio",". The one difference is what there is\nto measure — a manual primitive like ",[164,220,221],{},"\u003CSkeletonText :lines=\"3\" \u002F>"," has no live text to read a real\nper-line width from (it renders ",[224,225,226],"em",{},"instead of"," its default slot while loading), so ",[164,229,230],{},"lastLineWidth","\nstays an explicit, deterministic prop rather than a measurement. The automatic engine, which scans\nreal rendered text, always prefers the measured per-line width when one is available.",[233,234,236],"h2",{"id":235},"skeletonizer",[164,237,238],{},"\u003CSkeletonizer>",[150,240,241],{},"The engine host. Wrap any subtree; everything inside is skeletonized automatically when active.",[243,244,245,264],"table",{},[246,247,248],"thead",{},[249,250,251,255,258,261],"tr",{},[252,253,254],"th",{},"Prop",[252,256,257],{},"Type",[252,259,260],{},"Default",[252,262,263],{},"Description",[265,266,267,288,307,325,343,361],"tbody",{},[249,268,269,275,280,285],{},[270,271,272],"td",{},[164,273,274],{},"enabled",[270,276,277],{},[164,278,279],{},"boolean",[270,281,282],{},[224,283,284],{},"(global)",[270,286,287],{},"Scope override for the global enabled flag.",[249,289,290,295,300,304],{},[270,291,292],{},[164,293,294],{},"animation",[270,296,297],{},[164,298,299],{},"string",[270,301,302],{},[224,303,284],{},[270,305,306],{},"Animation preset for this scope.",[249,308,309,314,318,322],{},[270,310,311],{},[164,312,313],{},"shimmer",[270,315,316],{},[164,317,279],{},[270,319,320],{},[224,321,284],{},[270,323,324],{},"Whether the animation runs.",[249,326,327,332,336,340],{},[270,328,329],{},[164,330,331],{},"autoScan",[270,333,334],{},[164,335,279],{},[270,337,338],{},[224,339,284],{},[270,341,342],{},"Run the DOM-scan engine.",[249,344,345,350,355,358],{},[270,346,347],{},[164,348,349],{},"theme",[270,351,352],{},[164,353,354],{},"object",[270,356,357],{},"–",[270,359,360],{},"Scoped theme token overrides.",[249,362,363,368,372,377],{},[270,364,365],{},[164,366,367],{},"tag",[270,369,370],{},[164,371,299],{},[270,373,374],{},[164,375,376],{},"'div'",[270,378,379,380,383],{},"Wrapper tag (uses ",[164,381,382],{},"display: contents",").",[150,385,386,387,171,390,393],{},"Exposes ",[164,388,389],{},"scan()",[164,391,392],{},"restore()"," via template ref.",[233,395,397],{"id":396},"manual-primitives","Manual primitives",[243,399,400,410],{},[246,401,402],{},[249,403,404,407],{},[252,405,406],{},"Component",[252,408,409],{},"Key props",[265,411,412,431,451,475,492,510,530,556,574],{},[249,413,414,419],{},[270,415,416],{},[164,417,418],{},"\u003CSkeletonBlock>",[270,420,421,423,424,423,426,423,428],{},[164,422,202],{},", ",[164,425,206],{},[164,427,209],{},[164,429,430],{},"circle",[249,432,433,438],{},[270,434,435],{},[164,436,437],{},"\u003CSkeletonText>",[270,439,440,423,443,423,446,423,449],{},[164,441,442],{},"lines",[164,444,445],{},"lineHeight",[164,447,448],{},"gap",[164,450,230],{},[249,452,453,458],{},[270,454,455],{},[164,456,457],{},"\u003CSkeletonAvatar>",[270,459,460,423,463,466,467,203,469,472,473],{},[164,461,462],{},"size",[164,464,465],{},"shape"," (",[164,468,430],{},[164,470,471],{},"square","), ",[164,474,209],{},[249,476,477,481],{},[270,478,479],{},[164,480,213],{},[270,482,483,423,485,423,487,423,490],{},[164,484,202],{},[164,486,206],{},[164,488,489],{},"aspectRatio",[164,491,209],{},[249,493,494,499],{},[270,495,496],{},[164,497,498],{},"\u003CSkeletonButton>",[270,500,501,423,503,423,505,423,507],{},[164,502,202],{},[164,504,206],{},[164,506,209],{},[164,508,509],{},"block",[249,511,512,517],{},[270,513,514],{},[164,515,516],{},"\u003CSkeletonCard>",[270,518,519,423,522,423,525,423,528],{},[164,520,521],{},"media",[164,523,524],{},"avatar",[164,526,527],{},"footer",[164,529,442],{},[249,531,532,537],{},[270,533,534],{},[164,535,536],{},"\u003CSkeletonContainer>",[270,538,539,466,542,203,545,472,548,423,551,423,554],{},[164,540,541],{},"layout",[164,543,544],{},"flex",[164,546,547],{},"grid",[164,549,550],{},"direction",[164,552,553],{},"columns",[164,555,448],{},[249,557,558,563],{},[270,559,560],{},[164,561,562],{},"\u003CSkeletonList>",[270,564,565,423,568,423,570,423,572],{},[164,566,567],{},"items",[164,569,524],{},[164,571,442],{},[164,573,448],{},[249,575,576,581],{},[270,577,578],{},[164,579,580],{},"\u003CSkeletonTable>",[270,582,583,423,586,423,588,423,591],{},[164,584,585],{},"rows",[164,587,553],{},[164,589,590],{},"header",[164,592,448],{},[150,594,595,596,171,598,600],{},"Every primitive also accepts ",[164,597,294],{},[164,599,313],{}," overrides and picks up the global theme.",[602,603,608],"pre",{"className":604,"code":605,"language":606,"meta":607,"style":607},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Ctemplate>\n  \u003CSkeletonText :lines=\"4\" last-line-width=\"40%\" \u002F>\n  \u003CSkeletonAvatar :size=\"64\" \u002F>\n  \u003CSkeletonCard media avatar footer :lines=\"3\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[164,609,610,626,667,689,719],{"__ignoreMap":607},[611,612,615,619,623],"span",{"class":613,"line":614},"line",1,[611,616,618],{"class":617},"sP7_E","\u003C",[611,620,622],{"class":621},"sQzsp","template",[611,624,625],{"class":617},">\n",[611,627,629,632,635,639,642,646,650,652,655,657,659,662,664],{"class":613,"line":628},2,[611,630,631],{"class":617},"  \u003C",[611,633,634],{"class":621},"SkeletonText",[611,636,638],{"class":637},"s9AJx"," :lines",[611,640,641],{"class":617},"=",[611,643,645],{"class":644},"sjJ54","\"",[611,647,649],{"class":648},"s_sjI","4",[611,651,645],{"class":644},[611,653,654],{"class":637}," last-line-width",[611,656,641],{"class":617},[611,658,645],{"class":644},[611,660,661],{"class":648},"40%",[611,663,645],{"class":644},[611,665,666],{"class":617}," \u002F>\n",[611,668,670,672,675,678,680,682,685,687],{"class":613,"line":669},3,[611,671,631],{"class":617},[611,673,674],{"class":621},"SkeletonAvatar",[611,676,677],{"class":637}," :size",[611,679,641],{"class":617},[611,681,645],{"class":644},[611,683,684],{"class":648},"64",[611,686,645],{"class":644},[611,688,666],{"class":617},[611,690,692,694,697,700,703,706,708,710,712,715,717],{"class":613,"line":691},4,[611,693,631],{"class":617},[611,695,696],{"class":621},"SkeletonCard",[611,698,699],{"class":637}," media",[611,701,702],{"class":637}," avatar",[611,704,705],{"class":637}," footer",[611,707,638],{"class":637},[611,709,641],{"class":617},[611,711,645],{"class":644},[611,713,714],{"class":648},"3",[611,716,645],{"class":644},[611,718,666],{"class":617},[611,720,722,725,727],{"class":613,"line":721},5,[611,723,724],{"class":617},"\u003C\u002F",[611,726,622],{"class":621},[611,728,625],{"class":617},[150,730,731,732,735],{},"Each primitive renders to inline SVG. For example, ",[164,733,734],{},"\u003CSkeletonAvatar :size=\"64\" \u002F>"," produces roughly:",[602,737,741],{"className":738,"code":739,"language":740,"meta":607,"style":607},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Csvg role=\"img\" aria-label=\"Loading\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\">\n  \u003Cdefs>\n    \u003ClinearGradient id=\"sk-shimmer-1\" gradientUnits=\"userSpaceOnUse\">\n      \u003C!-- shared shimmer gradient + \u003CanimateTransform> -->\n    \u003C\u002FlinearGradient>\n  \u003C\u002Fdefs>\n  \u003Ccircle cx=\"32\" cy=\"32\" r=\"32\" fill=\"url(#sk-shimmer-1)\" \u002F>\n\u003C\u002Fsvg>\n","html",[164,742,743,810,819,853,859,868,878,933],{"__ignoreMap":607},[611,744,745,747,750,753,755,757,760,762,765,767,769,772,774,777,779,781,783,785,788,790,792,794,796,799,801,803,806,808],{"class":613,"line":614},[611,746,618],{"class":617},[611,748,749],{"class":621},"svg",[611,751,752],{"class":637}," role",[611,754,641],{"class":617},[611,756,645],{"class":644},[611,758,759],{"class":648},"img",[611,761,645],{"class":644},[611,763,764],{"class":637}," aria-label",[611,766,641],{"class":617},[611,768,645],{"class":644},[611,770,771],{"class":648},"Loading",[611,773,645],{"class":644},[611,775,776],{"class":637}," width",[611,778,641],{"class":617},[611,780,645],{"class":644},[611,782,684],{"class":648},[611,784,645],{"class":644},[611,786,787],{"class":637}," height",[611,789,641],{"class":617},[611,791,645],{"class":644},[611,793,684],{"class":648},[611,795,645],{"class":644},[611,797,798],{"class":637}," viewBox",[611,800,641],{"class":617},[611,802,645],{"class":644},[611,804,805],{"class":648},"0 0 64 64",[611,807,645],{"class":644},[611,809,625],{"class":617},[611,811,812,814,817],{"class":613,"line":628},[611,813,631],{"class":617},[611,815,816],{"class":621},"defs",[611,818,625],{"class":617},[611,820,821,824,827,830,832,834,837,839,842,844,846,849,851],{"class":613,"line":669},[611,822,823],{"class":617},"    \u003C",[611,825,826],{"class":621},"linearGradient",[611,828,829],{"class":637}," id",[611,831,641],{"class":617},[611,833,645],{"class":644},[611,835,836],{"class":648},"sk-shimmer-1",[611,838,645],{"class":644},[611,840,841],{"class":637}," gradientUnits",[611,843,641],{"class":617},[611,845,645],{"class":644},[611,847,848],{"class":648},"userSpaceOnUse",[611,850,645],{"class":644},[611,852,625],{"class":617},[611,854,855],{"class":613,"line":691},[611,856,858],{"class":857},"sutJx","      \u003C!-- shared shimmer gradient + \u003CanimateTransform> -->\n",[611,860,861,864,866],{"class":613,"line":721},[611,862,863],{"class":617},"    \u003C\u002F",[611,865,826],{"class":621},[611,867,625],{"class":617},[611,869,871,874,876],{"class":613,"line":870},6,[611,872,873],{"class":617},"  \u003C\u002F",[611,875,816],{"class":621},[611,877,625],{"class":617},[611,879,881,883,885,888,890,892,895,897,900,902,904,906,908,911,913,915,917,919,922,924,926,929,931],{"class":613,"line":880},7,[611,882,631],{"class":617},[611,884,430],{"class":621},[611,886,887],{"class":637}," cx",[611,889,641],{"class":617},[611,891,645],{"class":644},[611,893,894],{"class":648},"32",[611,896,645],{"class":644},[611,898,899],{"class":637}," cy",[611,901,641],{"class":617},[611,903,645],{"class":644},[611,905,894],{"class":648},[611,907,645],{"class":644},[611,909,910],{"class":637}," r",[611,912,641],{"class":617},[611,914,645],{"class":644},[611,916,894],{"class":648},[611,918,645],{"class":644},[611,920,921],{"class":637}," fill",[611,923,641],{"class":617},[611,925,645],{"class":644},[611,927,928],{"class":648},"url(#sk-shimmer-1)",[611,930,645],{"class":644},[611,932,666],{"class":617},[611,934,936,938,940],{"class":613,"line":935},8,[611,937,724],{"class":617},[611,939,749],{"class":621},[611,941,625],{"class":617},[150,943,944,945,948,949,951,952,954,955,959],{},"A ",[164,946,947],{},"\u003CSkeletonText :lines=\"4\" \u002F>"," emits one ",[164,950,170],{}," per line inside the same ",[164,953,166],{},", sharing the\ngradient. Try them all live in the ",[195,956,958],{"href":957},"\u002Fshowcase","Showcase",".",[961,962,963],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}",{"title":607,"searchDepth":669,"depth":669,"links":965},[966,967],{"id":235,"depth":628,"text":238},{"id":396,"depth":628,"text":397},"The Skeletonizer host and the nine manual primitives.","md",{},true,{"title":62,"description":968},"M-xWKiWAdFJJw7x7px6LqREQpty93FaDDModI-IkKH4",1783713298808]