Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
97 lines (97 loc) · 35.3 KB
/
Copy pathindex.html
File metadata and controls
97 lines (97 loc) · 35.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Automatic skeleton UI for Nuxt · Nuxt Skeletonizer</title><style id="nuxt-ui-colors">@layer theme {
:root, :host {
--ui-color-primary-50: var(--color-violet-50, oklch(96.9% 0.016 293.756));
--ui-color-primary-100: var(--color-violet-100, oklch(94.3% 0.029 294.588));
--ui-color-primary-200: var(--color-violet-200, oklch(89.4% 0.057 293.283));
--ui-color-primary-300: var(--color-violet-300, oklch(81.1% 0.111 293.571));
--ui-color-primary-400: var(--color-violet-400, oklch(70.2% 0.183 293.541));
--ui-color-primary-500: var(--color-violet-500, oklch(60.6% 0.25 292.717));
--ui-color-primary-600: var(--color-violet-600, oklch(54.1% 0.281 293.009));
--ui-color-primary-700: var(--color-violet-700, oklch(49.1% 0.27 292.581));
--ui-color-primary-800: var(--color-violet-800, oklch(43.2% 0.232 292.759));
--ui-color-primary-900: var(--color-violet-900, oklch(38% 0.189 293.745));
--ui-color-primary-950: var(--color-violet-950, oklch(28.3% 0.141 291.089));
--ui-color-secondary-50: var(--color-blue-50, oklch(97% 0.014 254.604));
--ui-color-secondary-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
--ui-color-secondary-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
--ui-color-secondary-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
--ui-color-secondary-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
--ui-color-secondary-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
--ui-color-secondary-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
--ui-color-secondary-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
--ui-color-secondary-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
--ui-color-secondary-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
--ui-color-secondary-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
--ui-color-success-50: var(--color-green-50, oklch(98.2% 0.018 155.826));
--ui-color-success-100: var(--color-green-100, oklch(96.2% 0.044 156.743));
--ui-color-success-200: var(--color-green-200, oklch(92.5% 0.084 155.995));
--ui-color-success-300: var(--color-green-300, oklch(87.1% 0.15 154.449));
--ui-color-success-400: var(--color-green-400, oklch(79.2% 0.209 151.711));
--ui-color-success-500: var(--color-green-500, oklch(72.3% 0.219 149.579));
--ui-color-success-600: var(--color-green-600, oklch(62.7% 0.194 149.214));
--ui-color-success-700: var(--color-green-700, oklch(52.7% 0.154 150.069));
--ui-color-success-800: var(--color-green-800, oklch(44.8% 0.119 151.328));
--ui-color-success-900: var(--color-green-900, oklch(39.3% 0.095 152.535));
--ui-color-success-950: var(--color-green-950, oklch(26.6% 0.065 152.934));
--ui-color-info-50: var(--color-blue-50, oklch(97% 0.014 254.604));
--ui-color-info-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
--ui-color-info-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
--ui-color-info-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
--ui-color-info-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
--ui-color-info-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
--ui-color-info-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
--ui-color-info-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
--ui-color-info-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
--ui-color-info-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
--ui-color-info-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
--ui-color-warning-50: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
--ui-color-warning-100: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
--ui-color-warning-200: var(--color-yellow-200, oklch(94.5% 0.129 101.54));
--ui-color-warning-300: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
--ui-color-warning-400: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
--ui-color-warning-500: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
--ui-color-warning-600: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
--ui-color-warning-700: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
--ui-color-warning-800: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
--ui-color-warning-900: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
--ui-color-warning-950: var(--color-yellow-950, oklch(28.6% 0.066 53.813));
--ui-color-error-50: var(--color-red-50, oklch(97.1% 0.013 17.38));
--ui-color-error-100: var(--color-red-100, oklch(93.6% 0.032 17.717));
--ui-color-error-200: var(--color-red-200, oklch(88.5% 0.062 18.334));
--ui-color-error-300: var(--color-red-300, oklch(80.8% 0.114 19.571));
--ui-color-error-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
--ui-color-error-500: var(--color-red-500, oklch(63.7% 0.237 25.331));
--ui-color-error-600: var(--color-red-600, oklch(57.7% 0.245 27.325));
--ui-color-error-700: var(--color-red-700, oklch(50.5% 0.213 27.518));
--ui-color-error-800: var(--color-red-800, oklch(44.4% 0.177 26.899));
--ui-color-error-900: var(--color-red-900, oklch(39.6% 0.141 25.723));
--ui-color-error-950: var(--color-red-950, oklch(25.8% 0.092 26.042));
--ui-color-neutral-50: var(--color-slate-50, oklch(98.4% 0.003 247.858));
--ui-color-neutral-100: var(--color-slate-100, oklch(96.8% 0.007 247.896));
--ui-color-neutral-200: var(--color-slate-200, oklch(92.9% 0.013 255.508));
--ui-color-neutral-300: var(--color-slate-300, oklch(86.9% 0.022 252.894));
--ui-color-neutral-400: var(--color-slate-400, oklch(70.4% 0.04 256.788));
--ui-color-neutral-500: var(--color-slate-500, oklch(55.4% 0.046 257.417));
--ui-color-neutral-600: var(--color-slate-600, oklch(44.6% 0.043 257.281));
--ui-color-neutral-700: var(--color-slate-700, oklch(37.2% 0.044 257.287));
--ui-color-neutral-800: var(--color-slate-800, oklch(27.9% 0.041 260.031));
--ui-color-neutral-900: var(--color-slate-900, oklch(20.8% 0.042 265.755));
--ui-color-neutral-950: var(--color-slate-950, oklch(12.9% 0.042 264.695));
}
:root, :host, .light {
--ui-primary: var(--ui-color-primary-500);
--ui-secondary: var(--ui-color-secondary-500);
--ui-success: var(--ui-color-success-500);
--ui-info: var(--ui-color-info-500);
--ui-warning: var(--ui-color-warning-500);
--ui-error: var(--ui-color-error-500);
}
.dark {
--ui-primary: var(--ui-color-primary-400);
--ui-secondary: var(--ui-color-secondary-400);
--ui-success: var(--ui-color-success-400);
--ui-info: var(--ui-color-info-400);
--ui-warning: var(--ui-color-warning-400);
--ui-error: var(--ui-color-error-400);
}
}</style><link rel="stylesheet" href="/nuxt-skeletonizer-docs/_nuxt/entry.CXq1QT_r.css" crossorigin><style>@layer base {:where(.i-lucide\:arrow-right){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E")}:where(.i-lucide\:bone){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5a.5.5 0 0 1-.5-.5a2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z'/%3E%3C/svg%3E")}:where(.i-lucide\:languages){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6'/%3E%3C/svg%3E")}:where(.i-lucide\:menu){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5h16M4 12h16M4 19h16'/%3E%3C/svg%3E")}:where(.i-lucide\:moon){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E")}:where(.i-lucide\:move){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2v20m3-3l-3 3l-3-3M19 9l3 3l-3 3M2 12h20M5 9l-3 3l3 3M9 5l3-3l3 3'/%3E%3C/svg%3E")}:where(.i-lucide\:palette){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z'/%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='black'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='black'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='black'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='black'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:search){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:sun){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-lucide\:wand-2){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21.64 3.64l-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72M14 7l3 3M5 6v4m14 4v4M10 2v2M7 8H3m18 8h-4M11 3H9'/%3E%3C/svg%3E")}:where(.i-simple-icons\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}}</style><link rel="preload" as="fetch" crossorigin="anonymous" href="/nuxt-skeletonizer-docs/_payload.json?6a9f1daf-74f8-4a72-a4b9-1952b7fd11c0"><link rel="modulepreload" as="script" crossorigin href="/nuxt-skeletonizer-docs/_nuxt/CpAEXTKB.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt-skeletonizer-docs/_nuxt/CO2pQiCX.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt-skeletonizer-docs/_nuxt/UZYaTXlp.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt-skeletonizer-docs/_nuxt/CqBIIm6C.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt-skeletonizer-docs/_nuxt/CU45RTaK.js"><script type="module" src="/nuxt-skeletonizer-docs/_nuxt/CpAEXTKB.js" crossorigin></script><link rel="alternate" hreflang="en" href="/nuxt-skeletonizer-docs/"><link rel="alternate" hreflang="it" href="/nuxt-skeletonizer-docs/it"><meta name="description" content="Turn any component into a layout-preserving skeleton — no duplicated markup, no layout shift. The Vue/Nuxt equivalent of Flutter Skeletonizer."><script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script></head><body><div id="__nuxt" class="isolate"><!--[--><!--[--><!--[--><!--[--><!--[--><header class="sticky top-0 z-50 border-b border-default bg-default/80 backdrop-blur"><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex h-16 items-center justify-between gap-4"><!--[--><a aria-current="page" href="/nuxt-skeletonizer-docs/" class="router-link-active router-link-exact-active flex items-center gap-2 font-bold text-lg"><span class="iconify i-lucide:bone text-primary size-6" aria-hidden="true" style=""></span><span class="hidden xs:inline">Nuxt Skeletonizer</span></a><nav class="flex items-center gap-1"><!--[--><a href="/nuxt-skeletonizer-docs/getting-started" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Docs<!--]--><!--[--><!----><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/playground" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Playground<!--]--><!--[--><!----><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/showcase" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Showcase<!--]--><!--[--><!----><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/examples" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Examples<!--]--><!--[--><!----><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/recipes" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Recipes<!--]--><!--[--><!----><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/engine" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Engine<!--]--><!--[--><!----><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/performance" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent hidden lg:inline-flex"><!--[--><!--[--><!----><!--]--><!--[-->Performance<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><button type="button" aria-label="Search documentation" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-lucide:search shrink-0 size-5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--[--><!--[--><!--[--><button type="button" id="reka-dropdown-menu-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Language" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent gap-1"><!--[--><!--[--><span class="iconify i-lucide:languages shrink-0 size-5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><span class="hidden sm:inline text-sm font-medium">EN</span><!--]--><!--[--><!----><!--]--><!--]--></button><!--[--><!----><!--v-if--><!--]--><!--]--><!--]--><!--]--><button type="button" aria-label="Switch to dark mode" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-lucide:moon shrink-0 size-5 hidden dark:inline-block" aria-hidden="true" style=""></span><span class="iconify i-lucide:sun shrink-0 size-5 dark:hidden" aria-hidden="true" style=""></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><a href="https://github.com/CodeCube0/nuxt-skeletonizer-dev" rel="noopener noreferrer" target="_blank" aria-label="GitHub" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-simple-icons:github shrink-0 size-5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></a><!--[--><!--[--><!--[--><button type="button" id="reka-dropdown-menu-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Docs" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><!--[--><!--[--><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--[--><!----><!--v-if--><!--]--><!--]--><!--]--><!--]--></nav><!--]--></div><!--[--><!----><!----><!--v-if--><!--]--></header><main class="min-h-[calc(100vh-var(--ui-header-height))]"><!--[--><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24"><!--[--><div class="text-center max-w-3xl mx-auto space-y-6"><span data-slot="base" class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--[--><!----><!--]--><!--[-->Nuxt 3.12+ & Nuxt 4 module<!--]--><!--[--><!----><!--]--></span><h1 class="text-4xl sm:text-6xl font-bold tracking-tight">Automatic skeleton UI for Nuxt</h1><p class="text-lg sm:text-xl text-muted">Turn any component into a layout-preserving skeleton — no duplicated markup, no layout shift. The Vue/Nuxt equivalent of Flutter Skeletonizer.</p><div class="flex items-center justify-center gap-3"><a href="/nuxt-skeletonizer-docs/getting-started" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><!--[--><!--[--><!----><!--]--><!--[-->Get started<!--]--><!--[--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true" style="" data-slot="trailingIcon"></span><!--]--><!--]--></a><a href="/nuxt-skeletonizer-docs/playground" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><!--[--><!--[--><!----><!--]--><!--[-->Open playground<!--]--><!--[--><!----><!--]--><!--]--></a></div></div><div class="mt-16 max-w-2xl mx-auto"><div class="flex items-center justify-between mb-3"><h2 class="text-sm font-semibold uppercase tracking-wide text-muted">Live demo</h2><div data-slot="root" class="relative flex items-start"><div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-2" role="switch" type="button" value="on" aria-checked="true" aria-required="false" data-state="checked"><!--[--><span data-state="checked" data-slot="thumb" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--[--><!--]--></span><!--]--><!--v-if--></button></div><div data-slot="wrapper" class="ms-2 text-sm"><label for="v-0-2" data-slot="label" class="block font-medium text-default"><!--[--><!--[-->Skeleton<!--]--><!--]--></label><!----></div></div></div><div class="sk-host sk-active" aria-busy="true"><!--[--><article class="flex gap-4 items-center p-4 rounded-xl border border-default bg-elevated/50"><img src="https://i.pravatar.cc/96?img=12" width="72" height="72" class="rounded-full" alt="User avatar"><div class="space-y-1"><h3 class="text-lg font-semibold m-0"> Ada Lovelace </h3><p class="text-muted m-0"> Principal engineer · enjoys skeletons that never shift the layout. </p><div class="flex gap-2 pt-1"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><!--[--><!--[--><!----><!--]--><!--[--> Follow <!--]--><!--[--><!----><!--]--><!--]--></button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"><!--[--><!--[--><!----><!--]--><!--[--> Message <!--]--><!--[--><!----><!--]--><!--]--></button></div></div></article><!--]--></div><p class="text-xs text-muted mt-3 text-center">The exact same markup — toggle the switch to see it skeletonized in place.</p></div><div class="mt-20 grid sm:grid-cols-3 gap-6"><div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default" style=""><!----><div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6"><div data-slot="wrapper" class="flex flex-col flex-1 items-start"><!----><div data-slot="leading" class="inline-flex items-center mb-2.5"><!--[--><span class="iconify i-lucide:wand-2 size-5 shrink-0 text-primary" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--></div><div data-slot="body" class="flex-1"><!--[--><div data-slot="title" class="text-base text-pretty font-semibold text-highlighted"><!--[-->Automatic<!--]--></div><div data-slot="description" class="text-[15px] text-pretty text-muted mt-1"><!--[-->A DOM-scanning engine classifies text, images, buttons, inputs and more, painting bones in place.<!--]--></div><!--]--></div><!----></div><!--[--><!--]--></div><!----></div><div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default" style=""><!----><div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6"><div data-slot="wrapper" class="flex flex-col flex-1 items-start"><!----><div data-slot="leading" class="inline-flex items-center mb-2.5"><!--[--><span class="iconify i-lucide:move size-5 shrink-0 text-primary" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--></div><div data-slot="body" class="flex-1"><!--[--><div data-slot="title" class="text-base text-pretty font-semibold text-highlighted"><!--[-->Zero layout shift<!--]--></div><div data-slot="description" class="text-[15px] text-pretty text-muted mt-1"><!--[-->Elements are styled, never removed — the layout is identical before and after loading.<!--]--></div><!--]--></div><!----></div><!--[--><!--]--></div><!----></div><div data-orientation="vertical" data-slot="root" class="relative flex rounded-lg bg-default ring ring-default" style=""><!----><div data-slot="container" class="relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6"><div data-slot="wrapper" class="flex flex-col flex-1 items-start"><!----><div data-slot="leading" class="inline-flex items-center mb-2.5"><!--[--><span class="iconify i-lucide:palette size-5 shrink-0 text-primary" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--></div><div data-slot="body" class="flex-1"><!--[--><div data-slot="title" class="text-base text-pretty font-semibold text-highlighted"><!--[-->Themeable<!--]--></div><div data-slot="description" class="text-[15px] text-pretty text-muted mt-1"><!--[-->CSS-variable theming, light/dark, runtime switching and five built-in animations.<!--]--></div><!--]--></div><!----></div><!--[--><!--]--></div><!----></div></div><!--]--></div><!--]--></main><footer class="border-t border-default mt-16"><div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 py-8 text-sm text-muted flex flex-col sm:flex-row items-center justify-between gap-3"><!--[--><p>© 2026 Nuxt Skeletonizer · MIT License</p><div class="flex items-center gap-4"><a href="/nuxt-skeletonizer-docs/getting-started" class="hover:text-default">Docs</a><a href="/nuxt-skeletonizer-docs/playground" class="hover:text-default">Playground</a><a href="https://github.com/CodeCube0/nuxt-skeletonizer-dev" target="_blank" class="hover:text-default">GitHub</a></div><!--]--></div></footer><!--]--><!--]--><!--[--><!--]--><!--v-if--><!--]--><!--[--><!--]--><!--]--><!--]--></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{skeletonizer:{enabled:false,autoScan:true,shimmer:true,shimmerDuration:1200,animation:"wave",baseColor:"#e5e7eb",highlightColor:"#f8fafc",darkBaseColor:"#2a2a2a",darkHighlightColor:"#3a3a3a",borderRadius:"0.375rem",opacity:1,respectBorderRadius:true,debug:false,darkModeSelector:".dark",scanDebounce:50,maxScanDepth:64,renderMode:"svg",svgPrecision:1,svgSharedGradient:true,adaptive:false,minFps:45,telemetry:false,offThread:false,layoutCache:false,explain:false},mdc:{components:{prose:true,map:{accordion:"ProseAccordion","accordion-item":"ProseAccordionItem",badge:"ProseBadge",callout:"ProseCallout",card:"ProseCard","card-group":"ProseCardGroup",caution:"ProseCaution","code-collapse":"ProseCodeCollapse","code-group":"ProseCodeGroup","code-icon":"ProseCodeIcon","code-preview":"ProseCodePreview","code-tree":"ProseCodeTree",collapsible:"ProseCollapsible",field:"ProseField","field-group":"ProseFieldGroup",icon:"ProseIcon",kbd:"ProseKbd",note:"ProseNote",prompt:"ProsePrompt",steps:"ProseSteps",tabs:"ProseTabs","tabs-item":"ProseTabsItem",tip:"ProseTip",warning:"ProseWarning"},customElements:[]},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}},highlight:{noApiRoute:true,theme:{light:"material-theme-lighter",default:"github-light",dark:"github-dark"},highlighter:"shiki",shikiEngine:"oniguruma",langs:["js","jsx","json","ts","tsx","vue","css","html","bash","md","mdc","yaml"]}},content:{wsUrl:""}},app:{baseURL:"/nuxt-skeletonizer-docs/",buildId:"6a9f1daf-74f8-4a72-a4b9-1952b7fd11c0",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__" data-src="/nuxt-skeletonizer-docs/_payload.json?6a9f1daf-74f8-4a72-a4b9-1952b7fd11c0">[{"state":1,"once":8,"_errors":9,"serverRendered":5,"path":11,"prerenderedAt":12},["Reactive",2],{"$scolor-mode":3,"$stoasts":7},{"preference":4,"value":4,"unknown":5,"forced":6},"system",true,false,[],["Set"],["ShallowReactive",10],{"navigation":-1},"\u002F",1792075104464]</script></body></html>