[{"data":1,"prerenderedAt":575},["ShallowReactive",2],{"navigation":3,"page-\u002Fen\u002Fnuxt-integration":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":14,"body":142,"description":570,"extension":571,"meta":572,"navigation":301,"path":15,"seo":573,"stem":16,"__hash__":574},"content\u002Fen\u002F10.nuxt-integration.md",{"type":143,"value":144,"toc":563},"minimark",[145,149,154,171,378,405,411,420,470,474,477,529,533,540,544,559],[146,147,14],"h1",{"id":148},"nuxt-integration",[150,151,153],"h2",{"id":152},"data-fetching","Data fetching",[155,156,157,158,162,163,166,167,170],"p",{},"The idiomatic pattern is to bind ",[159,160,161],"code",{},":enabled"," to the ",[159,164,165],{},"pending","\u002F",[159,168,169],{},"status"," of any data composable:",[172,173,178],"pre",{"className":174,"code":175,"language":176,"meta":177,"style":177},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst { data, pending } = await useLazyAsyncData('users', () => $fetch('\u002Fapi\u002Fusers'))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSkeletonizer :enabled=\"pending\">\n    \u003CUserTable :rows=\"data\" \u002F>\n  \u003C\u002FSkeletonizer>\n\u003C\u002Ftemplate>\n","vue","",[159,179,180,216,286,296,303,313,335,359,369],{"__ignoreMap":177},[181,182,185,189,193,197,200,203,207,211,213],"span",{"class":183,"line":184},"line",1,[181,186,188],{"class":187},"sP7_E","\u003C",[181,190,192],{"class":191},"sQzsp","script",[181,194,196],{"class":195},"s9AJx"," setup",[181,198,199],{"class":195}," lang",[181,201,202],{"class":187},"=",[181,204,206],{"class":205},"sjJ54","\"",[181,208,210],{"class":209},"s_sjI","ts",[181,212,206],{"class":205},[181,214,215],{"class":187},">\n",[181,217,219,223,226,230,233,236,239,243,247,251,255,258,261,263,265,268,271,274,276,278,281,283],{"class":183,"line":218},2,[181,220,222],{"class":221},"sbsja","const",[181,224,225],{"class":187}," {",[181,227,229],{"class":228},"s_hVV"," data",[181,231,232],{"class":187},",",[181,234,235],{"class":228}," pending",[181,237,238],{"class":187}," }",[181,240,242],{"class":241},"smGrS"," =",[181,244,246],{"class":245},"sVHd0"," await",[181,248,250],{"class":249},"sGLFI"," useLazyAsyncData",[181,252,254],{"class":253},"su5hD","(",[181,256,257],{"class":205},"'",[181,259,260],{"class":209},"users",[181,262,257],{"class":205},[181,264,232],{"class":187},[181,266,267],{"class":187}," ()",[181,269,270],{"class":221}," =>",[181,272,273],{"class":249}," $fetch",[181,275,254],{"class":253},[181,277,257],{"class":205},[181,279,280],{"class":209},"\u002Fapi\u002Fusers",[181,282,257],{"class":205},[181,284,285],{"class":253},"))\n",[181,287,289,292,294],{"class":183,"line":288},3,[181,290,291],{"class":187},"\u003C\u002F",[181,293,192],{"class":191},[181,295,215],{"class":187},[181,297,299],{"class":183,"line":298},4,[181,300,302],{"emptyLinePlaceholder":301},true,"\n",[181,304,306,308,311],{"class":183,"line":305},5,[181,307,188],{"class":187},[181,309,310],{"class":191},"template",[181,312,215],{"class":187},[181,314,316,319,322,325,327,329,331,333],{"class":183,"line":315},6,[181,317,318],{"class":187},"  \u003C",[181,320,321],{"class":191},"Skeletonizer",[181,323,324],{"class":195}," :enabled",[181,326,202],{"class":187},[181,328,206],{"class":205},[181,330,165],{"class":209},[181,332,206],{"class":205},[181,334,215],{"class":187},[181,336,338,341,344,347,349,351,354,356],{"class":183,"line":337},7,[181,339,340],{"class":187},"    \u003C",[181,342,343],{"class":191},"UserTable",[181,345,346],{"class":195}," :rows",[181,348,202],{"class":187},[181,350,206],{"class":205},[181,352,353],{"class":209},"data",[181,355,206],{"class":205},[181,357,358],{"class":187}," \u002F>\n",[181,360,362,365,367],{"class":183,"line":361},8,[181,363,364],{"class":187},"  \u003C\u002F",[181,366,321],{"class":191},[181,368,215],{"class":187},[181,370,372,374,376],{"class":183,"line":371},9,[181,373,291],{"class":187},[181,375,310],{"class":191},[181,377,215],{"class":187},[155,379,380,381,384,385,384,388,384,391,384,394,397,398,384,401,404],{},"This works with ",[159,382,383],{},"useFetch",", ",[159,386,387],{},"useLazyFetch",[159,389,390],{},"useAsyncData",[159,392,393],{},"useLazyAsyncData",[159,395,396],{},"useState",",\n",[159,399,400],{},"callOnce",[159,402,403],{},"useRoute"," and any other source of a reactive boolean.",[150,406,408],{"id":407},"skeleton-true",[159,409,410],{},"skeleton: true",[155,412,413,414,419],{},"For the most concise integration, use the ",[415,416,418],"a",{"href":417},"\u002Fcomposables","skeleton-aware composables",":",[172,421,424],{"className":422,"code":423,"language":210,"meta":177,"style":177},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","const { data } = await useSkeletonFetch('\u002Fapi\u002Fusers', { skeleton: true })\n",[159,425,426],{"__ignoreMap":177},[181,427,428,430,432,434,436,438,440,443,445,447,449,451,453,455,459,461,465,467],{"class":183,"line":184},[181,429,222],{"class":221},[181,431,225],{"class":187},[181,433,229],{"class":228},[181,435,238],{"class":187},[181,437,242],{"class":241},[181,439,246],{"class":245},[181,441,442],{"class":249}," useSkeletonFetch",[181,444,254],{"class":253},[181,446,257],{"class":205},[181,448,280],{"class":209},[181,450,257],{"class":205},[181,452,232],{"class":187},[181,454,225],{"class":187},[181,456,458],{"class":457},"skxfh"," skeleton",[181,460,419],{"class":187},[181,462,464],{"class":463},"syTEX"," true",[181,466,238],{"class":187},[181,468,469],{"class":253},")\n",[150,471,473],{"id":472},"rendering-features","Rendering features",[155,475,476],{},"The module is compatible with:",[478,479,480,495,509,514,522],"ul",{},[481,482,483,486,487,490,491,494],"li",{},[484,485,22],"strong",{}," and ",[484,488,489],{},"hydration"," (see ",[415,492,22],{"href":493},"\u002Fssr",")",[481,496,497,384,500,384,503,384,506],{},[484,498,499],{},"Teleport",[484,501,502],{},"Suspense",[484,504,505],{},"KeepAlive",[484,507,508],{},"Transition",[481,510,511],{},[484,512,513],{},"Async \u002F lazy components",[481,515,516,486,519],{},[484,517,518],{},"Nested layouts",[484,520,521],{},"Nuxt Layers",[481,523,524,525,528],{},"Future ",[484,526,527],{},"Server Components"," as the API stabilises",[150,530,532],{"id":531},"layers","Layers",[155,534,535,536,539],{},"Because configuration is read from ",[159,537,538],{},"runtimeConfig.public.skeletonizer",", a base layer can ship a\ndefault theme and downstream layers\u002Fapps can override colors, animation or the global toggle via\nconfig or env variables — no code changes required.",[150,541,543],{"id":542},"seo-head","SEO & head",[155,545,546,547,550,551,554,555,558],{},"Skeletons are client-side and ",[159,548,549],{},"aria-hidden",", so they never interfere with ",[159,552,553],{},"useSeoMeta"," \u002F ",[159,556,557],{},"useHead","\noutput or crawled content.",[560,561,562],"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 pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":177,"searchDepth":288,"depth":288,"links":564},[565,566,567,568,569],{"id":152,"depth":218,"text":153},{"id":407,"depth":218,"text":410},{"id":472,"depth":218,"text":473},{"id":531,"depth":218,"text":532},{"id":542,"depth":218,"text":543},"Works with every Nuxt data composable and rendering feature.","md",{},{"title":14,"description":570},"XO5K5MSUnfKz6JvWjf8pKHHtFNe2Pwf0pViIyVvug5E",1783713298617]