[{"data":1,"prerenderedAt":4592},["ShallowReactive",2],{"navigation":3,"-docs-guide-directory-structure-components":1107,"-docs-guide-directory-structure-components-surround":4587},[4,1018],{"title":5,"titleTemplate":6,"icon":7,"path":8,"stem":9,"children":10,"page":108},"Docs",null,"i-lucide-bookmark","/docs","docs",[11,109,345,805,897,934,976],{"title":12,"titleTemplate":13,"icon":14,"path":15,"stem":16,"children":17,"page":108},"Get Started","%s · Get Started with Nuxt","i-lucide-rocket","/docs/getting-started","docs/1.getting-started",[18,23,28,33,38,43,48,53,58,63,68,73,78,83,88,93,98,103],{"title":19,"path":20,"stem":21,"titleTemplate":6,"icon":22},"Introduction","/docs/getting-started/introduction","docs/1.getting-started/01.introduction","i-lucide-info",{"title":24,"path":25,"stem":26,"titleTemplate":6,"icon":27},"Installation","/docs/getting-started/installation","docs/1.getting-started/02.installation","i-lucide-play",{"title":29,"path":30,"stem":31,"titleTemplate":6,"icon":32},"Configuration","/docs/getting-started/configuration","docs/1.getting-started/03.configuration","i-lucide-cog",{"title":34,"path":35,"stem":36,"titleTemplate":6,"icon":37},"Views","/docs/getting-started/views","docs/1.getting-started/04.views","i-lucide-panels-top-left",{"title":39,"path":40,"stem":41,"titleTemplate":6,"icon":42},"Assets","/docs/getting-started/assets","docs/1.getting-started/05.assets","i-lucide-image",{"title":44,"path":45,"stem":46,"titleTemplate":6,"icon":47},"Styling","/docs/getting-started/styling","docs/1.getting-started/06.styling","i-lucide-palette",{"title":49,"path":50,"stem":51,"titleTemplate":6,"icon":52},"Routing","/docs/getting-started/routing","docs/1.getting-started/07.routing","i-lucide-milestone",{"title":54,"path":55,"stem":56,"titleTemplate":6,"icon":57},"SEO and Meta","/docs/getting-started/seo-meta","docs/1.getting-started/08.seo-meta","i-lucide-file-search",{"title":59,"path":60,"stem":61,"titleTemplate":6,"icon":62},"Transitions","/docs/getting-started/transitions","docs/1.getting-started/09.transitions","i-lucide-toggle-right",{"title":64,"path":65,"stem":66,"titleTemplate":6,"icon":67},"Data Fetching","/docs/getting-started/data-fetching","docs/1.getting-started/10.data-fetching","i-lucide-cable",{"title":69,"path":70,"stem":71,"titleTemplate":6,"icon":72},"State Management","/docs/getting-started/state-management","docs/1.getting-started/11.state-management","i-lucide-database",{"title":74,"path":75,"stem":76,"titleTemplate":6,"icon":77},"Error Handling","/docs/getting-started/error-handling","docs/1.getting-started/12.error-handling","i-lucide-bug-off",{"title":79,"path":80,"stem":81,"titleTemplate":6,"icon":82},"Server","/docs/getting-started/server","docs/1.getting-started/13.server","i-lucide-pc-case",{"title":84,"path":85,"stem":86,"titleTemplate":6,"icon":87},"Layers","/docs/getting-started/layers","docs/1.getting-started/14.layers","i-lucide-layers",{"title":89,"path":90,"stem":91,"titleTemplate":6,"icon":92},"Prerendering","/docs/getting-started/prerendering","docs/1.getting-started/15.prerendering","i-lucide-file-code-2",{"title":94,"path":95,"stem":96,"titleTemplate":6,"icon":97},"Deployment","/docs/getting-started/deployment","docs/1.getting-started/16.deployment","i-lucide-cloud",{"title":99,"path":100,"stem":101,"titleTemplate":6,"icon":102},"Testing","/docs/getting-started/testing","docs/1.getting-started/17.testing","i-lucide-circle-check",{"title":104,"path":105,"stem":106,"titleTemplate":6,"icon":107},"Upgrade Guide","/docs/getting-started/upgrade","docs/1.getting-started/18.upgrade","i-lucide-circle-arrow-up",false,{"title":110,"titleTemplate":6,"icon":111,"path":112,"stem":113,"children":114,"page":108},"Guide","i-lucide-book-open","/docs/guide","docs/2.guide",[115,158,271,322],{"title":116,"titleTemplate":117,"icon":118,"path":119,"stem":120,"children":121,"page":108},"Key Concepts","%s · Nuxt Concepts","i-lucide-medal","/docs/guide/concepts","docs/2.guide/1.concepts",[122,126,130,134,138,142,146,150,154],{"title":123,"path":124,"stem":125,"titleTemplate":6},"Auto-imports","/docs/guide/concepts/auto-imports","docs/2.guide/1.concepts/1.auto-imports",{"title":127,"path":128,"stem":129,"titleTemplate":6},"Nuxt Lifecycle","/docs/guide/concepts/nuxt-lifecycle","docs/2.guide/1.concepts/10.nuxt-lifecycle",{"title":131,"path":132,"stem":133,"titleTemplate":6},"Vue.js Development","/docs/guide/concepts/vuejs-development","docs/2.guide/1.concepts/2.vuejs-development",{"title":135,"path":136,"stem":137,"titleTemplate":6},"Rendering Modes","/docs/guide/concepts/rendering","docs/2.guide/1.concepts/3.rendering",{"title":139,"path":140,"stem":141,"titleTemplate":6},"Server Engine","/docs/guide/concepts/server-engine","docs/2.guide/1.concepts/4.server-engine",{"title":143,"path":144,"stem":145,"titleTemplate":6},"Modules","/docs/guide/concepts/modules","docs/2.guide/1.concepts/5.modules",{"title":147,"path":148,"stem":149,"titleTemplate":6},"ES Modules","/docs/guide/concepts/esm","docs/2.guide/1.concepts/7.esm",{"title":151,"path":152,"stem":153,"titleTemplate":6},"TypeScript","/docs/guide/concepts/typescript","docs/2.guide/1.concepts/8.typescript",{"title":155,"path":156,"stem":157,"titleTemplate":6},"Code Style","/docs/guide/concepts/code-style","docs/2.guide/1.concepts/9.code-style",{"title":159,"titleTemplate":160,"icon":161,"path":162,"stem":163,"children":164,"page":108},"Directory Structure","%s · Nuxt Directory Structure","i-lucide-folders","/docs/guide/directory-structure","docs/2.guide/2.directory-structure",[165,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,235,239,243,247,251,255,259,263,267],{"title":166,"path":167,"stem":168,"titleTemplate":6,"icon":169},".nuxt","/docs/guide/directory-structure/nuxt","docs/2.guide/2.directory-structure/0.nuxt","i-lucide-folder",{"title":171,"path":172,"stem":173,"titleTemplate":6,"icon":169},".output","/docs/guide/directory-structure/output","docs/2.guide/2.directory-structure/0.output",{"title":175,"path":176,"stem":177,"titleTemplate":6,"icon":169},"assets","/docs/guide/directory-structure/assets","docs/2.guide/2.directory-structure/1.assets",{"title":179,"path":180,"stem":181,"titleTemplate":6,"icon":169},"components","/docs/guide/directory-structure/components","docs/2.guide/2.directory-structure/1.components",{"title":183,"path":184,"stem":185,"titleTemplate":6,"icon":169},"composables","/docs/guide/directory-structure/composables","docs/2.guide/2.directory-structure/1.composables",{"title":187,"path":188,"stem":189,"titleTemplate":6,"icon":169},"content","/docs/guide/directory-structure/content","docs/2.guide/2.directory-structure/1.content",{"title":191,"path":192,"stem":193,"titleTemplate":6,"icon":169},"layouts","/docs/guide/directory-structure/layouts","docs/2.guide/2.directory-structure/1.layouts",{"title":195,"path":196,"stem":197,"titleTemplate":6,"icon":169},"middleware","/docs/guide/directory-structure/middleware","docs/2.guide/2.directory-structure/1.middleware",{"title":199,"path":200,"stem":201,"titleTemplate":6,"icon":169},"modules","/docs/guide/directory-structure/modules","docs/2.guide/2.directory-structure/1.modules",{"title":203,"path":204,"stem":205,"titleTemplate":6,"icon":169},"node_modules","/docs/guide/directory-structure/node_modules","docs/2.guide/2.directory-structure/1.node_modules",{"title":207,"path":208,"stem":209,"titleTemplate":6,"icon":169},"pages","/docs/guide/directory-structure/pages","docs/2.guide/2.directory-structure/1.pages",{"title":211,"path":212,"stem":213,"titleTemplate":6,"icon":169},"plugins","/docs/guide/directory-structure/plugins","docs/2.guide/2.directory-structure/1.plugins",{"title":215,"path":216,"stem":217,"titleTemplate":6,"icon":169},"public","/docs/guide/directory-structure/public","docs/2.guide/2.directory-structure/1.public",{"title":219,"path":220,"stem":221,"titleTemplate":6,"icon":169},"server","/docs/guide/directory-structure/server","docs/2.guide/2.directory-structure/1.server",{"title":223,"path":224,"stem":225,"titleTemplate":6,"icon":169},"shared","/docs/guide/directory-structure/shared","docs/2.guide/2.directory-structure/1.shared",{"title":227,"path":228,"stem":229,"titleTemplate":6,"icon":169},"utils","/docs/guide/directory-structure/utils","docs/2.guide/2.directory-structure/1.utils",{"title":231,"path":232,"stem":233,"titleTemplate":6,"icon":234},".env","/docs/guide/directory-structure/env","docs/2.guide/2.directory-structure/2.env","i-lucide-file",{"title":236,"path":237,"stem":238,"titleTemplate":6,"icon":234},".gitignore","/docs/guide/directory-structure/gitignore","docs/2.guide/2.directory-structure/2.gitignore",{"title":240,"path":241,"stem":242,"titleTemplate":6,"icon":234},".nuxtignore","/docs/guide/directory-structure/nuxtignore","docs/2.guide/2.directory-structure/2.nuxtignore",{"title":244,"path":245,"stem":246,"titleTemplate":6,"icon":234},".nuxtrc","/docs/guide/directory-structure/nuxtrc","docs/2.guide/2.directory-structure/2.nuxtrc",{"title":248,"path":249,"stem":250,"titleTemplate":6,"icon":234},"app.vue","/docs/guide/directory-structure/app","docs/2.guide/2.directory-structure/3.app",{"title":252,"path":253,"stem":254,"titleTemplate":6,"icon":234},"app.config.ts","/docs/guide/directory-structure/app-config","docs/2.guide/2.directory-structure/3.app-config",{"title":256,"path":257,"stem":258,"titleTemplate":6,"icon":234},"error.vue","/docs/guide/directory-structure/error","docs/2.guide/2.directory-structure/3.error",{"title":260,"path":261,"stem":262,"titleTemplate":6,"icon":234},"nuxt.config.ts","/docs/guide/directory-structure/nuxt-config","docs/2.guide/2.directory-structure/3.nuxt-config",{"title":264,"path":265,"stem":266,"titleTemplate":6,"icon":234},"package.json","/docs/guide/directory-structure/package","docs/2.guide/2.directory-structure/3.package",{"title":268,"path":269,"stem":270,"titleTemplate":6,"icon":234},"tsconfig.json","/docs/guide/directory-structure/tsconfig","docs/2.guide/2.directory-structure/3.tsconfig",{"title":272,"titleTemplate":273,"icon":274,"path":275,"stem":276,"children":277,"page":108},"Going Further","%s · Nuxt Advanced","i-lucide-star","/docs/guide/going-further","docs/2.guide/3.going-further",[278,282,286,290,294,298,302,306,310,314,318],{"title":279,"path":280,"stem":281,"titleTemplate":6},"Experimental Features","/docs/guide/going-further/experimental-features","docs/2.guide/3.going-further/1.experimental-features",{"title":283,"path":284,"stem":285,"titleTemplate":6},"Features","/docs/guide/going-further/features","docs/2.guide/3.going-further/1.features",{"title":287,"path":288,"stem":289,"titleTemplate":6},"How Nuxt Works?","/docs/guide/going-further/internals","docs/2.guide/3.going-further/1.internals",{"title":291,"path":292,"stem":293,"titleTemplate":6},"Runtime Config","/docs/guide/going-further/runtime-config","docs/2.guide/3.going-further/10.runtime-config",{"title":295,"path":296,"stem":297,"titleTemplate":6},"Nightly Release Channel","/docs/guide/going-further/nightly-release-channel","docs/2.guide/3.going-further/11.nightly-release-channel",{"title":299,"path":300,"stem":301,"titleTemplate":6},"Lifecycle Hooks","/docs/guide/going-further/hooks","docs/2.guide/3.going-further/2.hooks",{"title":303,"path":304,"stem":305,"titleTemplate":6},"Module Author Guide","/docs/guide/going-further/modules","docs/2.guide/3.going-further/3.modules",{"title":307,"path":308,"stem":309,"titleTemplate":6},"Nuxt Kit","/docs/guide/going-further/kit","docs/2.guide/3.going-further/4.kit",{"title":311,"path":312,"stem":313,"titleTemplate":6},"NuxtApp","/docs/guide/going-further/nuxt-app","docs/2.guide/3.going-further/6.nuxt-app",{"title":315,"path":316,"stem":317,"titleTemplate":6},"Authoring Nuxt Layers","/docs/guide/going-further/layers","docs/2.guide/3.going-further/7.layers",{"title":319,"path":320,"stem":321,"titleTemplate":6},"Debugging","/docs/guide/going-further/debugging","docs/2.guide/3.going-further/9.debugging",{"title":323,"titleTemplate":324,"icon":325,"path":326,"stem":327,"children":328,"page":108},"Recipes","%s · Recipes","i-lucide-cooking-pot","/docs/guide/recipes","docs/2.guide/4.recipes",[329,333,337,341],{"title":330,"path":331,"stem":332,"titleTemplate":6},"Custom Routing","/docs/guide/recipes/custom-routing","docs/2.guide/4.recipes/1.custom-routing",{"title":334,"path":335,"stem":336,"titleTemplate":6},"Vite Plugins","/docs/guide/recipes/vite-plugin","docs/2.guide/4.recipes/2.vite-plugin",{"title":338,"path":339,"stem":340,"titleTemplate":6},"Custom useFetch","/docs/guide/recipes/custom-usefetch","docs/2.guide/4.recipes/3.custom-usefetch",{"title":342,"path":343,"stem":344,"titleTemplate":6},"Sessions and Authentication","/docs/guide/recipes/sessions-and-authentication","docs/2.guide/4.recipes/4.sessions-and-authentication",{"title":346,"titleTemplate":347,"icon":348,"path":349,"stem":350,"children":351,"page":108},"API","%s · Nuxt API","i-lucide-code-xml","/docs/api","docs/3.api",[352,416,539,654,721,787,800],{"title":353,"titleTemplate":354,"icon":355,"path":356,"stem":357,"children":358,"page":108},"Components","%s · Nuxt Components","i-lucide-box","/docs/api/components","docs/3.api/1.components",[359,363,367,371,375,379,384,388,392,396,400,404,408,412],{"title":360,"path":361,"stem":362,"titleTemplate":6},"\u003CClientOnly>","/docs/api/components/client-only","docs/3.api/1.components/1.client-only",{"title":364,"path":365,"stem":366,"titleTemplate":6},"\u003CDevOnly>","/docs/api/components/dev-only","docs/3.api/1.components/1.dev-only",{"title":368,"path":369,"stem":370,"titleTemplate":6},"\u003CNuxtClientFallback>","/docs/api/components/nuxt-client-fallback","docs/3.api/1.components/1.nuxt-client-fallback",{"title":372,"path":373,"stem":374,"titleTemplate":6},"\u003CNuxtPicture>","/docs/api/components/nuxt-picture","docs/3.api/1.components/10.nuxt-picture",{"title":376,"path":377,"stem":378,"titleTemplate":6},"\u003CTeleport>","/docs/api/components/teleports","docs/3.api/1.components/11.teleports",{"title":380,"path":381,"stem":382,"titleTemplate":6,"badge":383},"\u003CNuxtRouteAnnouncer>","/docs/api/components/nuxt-route-announcer","docs/3.api/1.components/12.nuxt-route-announcer","New",{"title":385,"path":386,"stem":387,"titleTemplate":6},"\u003CNuxtPage>","/docs/api/components/nuxt-page","docs/3.api/1.components/2.nuxt-page",{"title":389,"path":390,"stem":391,"titleTemplate":6},"\u003CNuxtLayout>","/docs/api/components/nuxt-layout","docs/3.api/1.components/3.nuxt-layout",{"title":393,"path":394,"stem":395,"titleTemplate":6},"\u003CNuxtLink>","/docs/api/components/nuxt-link","docs/3.api/1.components/4.nuxt-link",{"title":397,"path":398,"stem":399,"titleTemplate":6},"\u003CNuxtLoadingIndicator>","/docs/api/components/nuxt-loading-indicator","docs/3.api/1.components/5.nuxt-loading-indicator",{"title":401,"path":402,"stem":403,"titleTemplate":6},"\u003CNuxtErrorBoundary>","/docs/api/components/nuxt-error-boundary","docs/3.api/1.components/6.nuxt-error-boundary",{"title":405,"path":406,"stem":407,"titleTemplate":6},"\u003CNuxtWelcome>","/docs/api/components/nuxt-welcome","docs/3.api/1.components/7.nuxt-welcome",{"title":409,"path":410,"stem":411,"titleTemplate":6},"\u003CNuxtIsland>","/docs/api/components/nuxt-island","docs/3.api/1.components/8.nuxt-island",{"title":413,"path":414,"stem":415,"titleTemplate":6},"\u003CNuxtImg>","/docs/api/components/nuxt-img","docs/3.api/1.components/9.nuxt-img",{"title":417,"titleTemplate":418,"icon":419,"path":420,"stem":421,"children":422,"page":108},"Composables","%s · Nuxt Composables","i-lucide-arrow-left-right","/docs/api/composables","docs/3.api/2.composables",[423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535],{"title":424,"path":425,"stem":426,"titleTemplate":6},"onPrehydrate","/docs/api/composables/on-prehydrate","docs/3.api/2.composables/on-prehydrate",{"title":428,"path":429,"stem":430,"titleTemplate":6},"useAppConfig","/docs/api/composables/use-app-config","docs/3.api/2.composables/use-app-config",{"title":432,"path":433,"stem":434,"titleTemplate":6},"useAsyncData","/docs/api/composables/use-async-data","docs/3.api/2.composables/use-async-data",{"title":436,"path":437,"stem":438,"titleTemplate":6},"useCookie","/docs/api/composables/use-cookie","docs/3.api/2.composables/use-cookie",{"title":440,"path":441,"stem":442,"titleTemplate":6},"useError","/docs/api/composables/use-error","docs/3.api/2.composables/use-error",{"title":444,"path":445,"stem":446,"titleTemplate":6},"useFetch","/docs/api/composables/use-fetch","docs/3.api/2.composables/use-fetch",{"title":448,"path":449,"stem":450,"titleTemplate":6},"useHead","/docs/api/composables/use-head","docs/3.api/2.composables/use-head",{"title":452,"path":453,"stem":454,"titleTemplate":6},"useHeadSafe","/docs/api/composables/use-head-safe","docs/3.api/2.composables/use-head-safe",{"title":456,"path":457,"stem":458,"titleTemplate":6},"useHydration","/docs/api/composables/use-hydration","docs/3.api/2.composables/use-hydration",{"title":460,"path":461,"stem":462,"titleTemplate":6},"useLazyAsyncData","/docs/api/composables/use-lazy-async-data","docs/3.api/2.composables/use-lazy-async-data",{"title":464,"path":465,"stem":466,"titleTemplate":6},"useLazyFetch","/docs/api/composables/use-lazy-fetch","docs/3.api/2.composables/use-lazy-fetch",{"title":468,"path":469,"stem":470,"titleTemplate":6},"useLoadingIndicator","/docs/api/composables/use-loading-indicator","docs/3.api/2.composables/use-loading-indicator",{"title":472,"path":473,"stem":474,"titleTemplate":6},"useNuxtApp","/docs/api/composables/use-nuxt-app","docs/3.api/2.composables/use-nuxt-app",{"title":476,"path":477,"stem":478,"titleTemplate":6},"useNuxtData","/docs/api/composables/use-nuxt-data","docs/3.api/2.composables/use-nuxt-data",{"title":480,"path":481,"stem":482,"titleTemplate":6},"usePreviewMode","/docs/api/composables/use-preview-mode","docs/3.api/2.composables/use-preview-mode",{"title":484,"path":485,"stem":486,"titleTemplate":6},"useRequestEvent","/docs/api/composables/use-request-event","docs/3.api/2.composables/use-request-event",{"title":488,"path":489,"stem":490,"titleTemplate":6},"useRequestFetch","/docs/api/composables/use-request-fetch","docs/3.api/2.composables/use-request-fetch",{"title":492,"path":493,"stem":494,"titleTemplate":6},"useRequestHeader","/docs/api/composables/use-request-header","docs/3.api/2.composables/use-request-header",{"title":496,"path":497,"stem":498,"titleTemplate":6},"useRequestHeaders","/docs/api/composables/use-request-headers","docs/3.api/2.composables/use-request-headers",{"title":500,"path":501,"stem":502,"titleTemplate":6},"useRequestURL","/docs/api/composables/use-request-url","docs/3.api/2.composables/use-request-url",{"title":504,"path":505,"stem":506,"titleTemplate":6},"useResponseHeader","/docs/api/composables/use-response-header","docs/3.api/2.composables/use-response-header",{"title":508,"path":509,"stem":510,"titleTemplate":6},"useRoute","/docs/api/composables/use-route","docs/3.api/2.composables/use-route",{"title":512,"path":513,"stem":514,"titleTemplate":6,"badge":383},"useRouteAnnouncer","/docs/api/composables/use-route-announcer","docs/3.api/2.composables/use-route-announcer",{"title":516,"path":517,"stem":518,"titleTemplate":6},"useRouter","/docs/api/composables/use-router","docs/3.api/2.composables/use-router",{"title":520,"path":521,"stem":522,"titleTemplate":6},"useRuntimeConfig","/docs/api/composables/use-runtime-config","docs/3.api/2.composables/use-runtime-config",{"title":524,"path":525,"stem":526,"titleTemplate":6},"useRuntimeHook","/docs/api/composables/use-runtime-hook","docs/3.api/2.composables/use-runtime-hook",{"title":528,"path":529,"stem":530,"titleTemplate":6},"useSeoMeta","/docs/api/composables/use-seo-meta","docs/3.api/2.composables/use-seo-meta",{"title":532,"path":533,"stem":534,"titleTemplate":6},"useServerSeoMeta","/docs/api/composables/use-server-seo-meta","docs/3.api/2.composables/use-server-seo-meta",{"title":536,"path":537,"stem":538,"titleTemplate":6},"useState","/docs/api/composables/use-state","docs/3.api/2.composables/use-state",{"title":540,"titleTemplate":541,"icon":542,"path":543,"stem":544,"children":545,"page":108},"Utils","%s · Nuxt Utils","i-lucide-square-function","/docs/api/utils","docs/3.api/3.utils",[546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610,614,618,622,626,630,634,638,642,646,650],{"title":547,"path":548,"stem":549,"titleTemplate":6},"$fetch","/docs/api/utils/dollarfetch","docs/3.api/3.utils/$fetch",{"title":551,"path":552,"stem":553,"titleTemplate":6},"abortNavigation","/docs/api/utils/abort-navigation","docs/3.api/3.utils/abort-navigation",{"title":555,"path":556,"stem":557,"titleTemplate":6},"addRouteMiddleware","/docs/api/utils/add-route-middleware","docs/3.api/3.utils/add-route-middleware",{"title":559,"path":560,"stem":561,"titleTemplate":6,"badge":383},"callOnce","/docs/api/utils/call-once","docs/3.api/3.utils/call-once",{"title":563,"path":564,"stem":565,"titleTemplate":6},"clearError","/docs/api/utils/clear-error","docs/3.api/3.utils/clear-error",{"title":567,"path":568,"stem":569,"titleTemplate":6},"clearNuxtData","/docs/api/utils/clear-nuxt-data","docs/3.api/3.utils/clear-nuxt-data",{"title":571,"path":572,"stem":573,"titleTemplate":6},"clearNuxtState","/docs/api/utils/clear-nuxt-state","docs/3.api/3.utils/clear-nuxt-state",{"title":575,"path":576,"stem":577,"titleTemplate":6},"createError","/docs/api/utils/create-error","docs/3.api/3.utils/create-error",{"title":579,"path":580,"stem":581,"titleTemplate":6},"defineNuxtComponent","/docs/api/utils/define-nuxt-component","docs/3.api/3.utils/define-nuxt-component",{"title":583,"path":584,"stem":585,"titleTemplate":6},"defineNuxtRouteMiddleware","/docs/api/utils/define-nuxt-route-middleware","docs/3.api/3.utils/define-nuxt-route-middleware",{"title":587,"path":588,"stem":589,"titleTemplate":6},"definePageMeta","/docs/api/utils/define-page-meta","docs/3.api/3.utils/define-page-meta",{"title":591,"path":592,"stem":593,"titleTemplate":6},"defineRouteRules","/docs/api/utils/define-route-rules","docs/3.api/3.utils/define-route-rules",{"title":595,"path":596,"stem":597,"titleTemplate":6},"navigateTo","/docs/api/utils/navigate-to","docs/3.api/3.utils/navigate-to",{"title":599,"path":600,"stem":601,"titleTemplate":6},"onBeforeRouteLeave","/docs/api/utils/on-before-route-leave","docs/3.api/3.utils/on-before-route-leave",{"title":603,"path":604,"stem":605,"titleTemplate":6},"onBeforeRouteUpdate","/docs/api/utils/on-before-route-update","docs/3.api/3.utils/on-before-route-update",{"title":607,"path":608,"stem":609,"titleTemplate":6},"onNuxtReady","/docs/api/utils/on-nuxt-ready","docs/3.api/3.utils/on-nuxt-ready",{"title":611,"path":612,"stem":613,"titleTemplate":6},"prefetchComponents","/docs/api/utils/prefetch-components","docs/3.api/3.utils/prefetch-components",{"title":615,"path":616,"stem":617,"titleTemplate":6},"preloadComponents","/docs/api/utils/preload-components","docs/3.api/3.utils/preload-components",{"title":619,"path":620,"stem":621,"titleTemplate":6},"preloadRouteComponents","/docs/api/utils/preload-route-components","docs/3.api/3.utils/preload-route-components",{"title":623,"path":624,"stem":625,"titleTemplate":6},"prerenderRoutes","/docs/api/utils/prerender-routes","docs/3.api/3.utils/prerender-routes",{"title":627,"path":628,"stem":629,"titleTemplate":6,"badge":383},"refreshCookie","/docs/api/utils/refresh-cookie","docs/3.api/3.utils/refresh-cookie",{"title":631,"path":632,"stem":633,"titleTemplate":6},"refreshNuxtData","/docs/api/utils/refresh-nuxt-data","docs/3.api/3.utils/refresh-nuxt-data",{"title":635,"path":636,"stem":637,"titleTemplate":6},"reloadNuxtApp","/docs/api/utils/reload-nuxt-app","docs/3.api/3.utils/reload-nuxt-app",{"title":639,"path":640,"stem":641,"titleTemplate":6},"setPageLayout","/docs/api/utils/set-page-layout","docs/3.api/3.utils/set-page-layout",{"title":643,"path":644,"stem":645,"titleTemplate":6},"setResponseStatus","/docs/api/utils/set-response-status","docs/3.api/3.utils/set-response-status",{"title":647,"path":648,"stem":649,"titleTemplate":6},"showError","/docs/api/utils/show-error","docs/3.api/3.utils/show-error",{"title":651,"path":652,"stem":653,"titleTemplate":6},"updateAppConfig","/docs/api/utils/update-app-config","docs/3.api/3.utils/update-app-config",{"title":655,"titleTemplate":656,"icon":657,"path":658,"stem":659,"children":660,"page":108},"Commands","%s · Nuxt Commands","i-lucide-square-terminal","/docs/api/commands","docs/3.api/4.commands",[661,665,669,673,677,681,685,689,693,697,701,705,709,713,717],{"title":662,"path":663,"stem":664,"titleTemplate":6},"nuxi add","/docs/api/commands/add","docs/3.api/4.commands/add",{"title":666,"path":667,"stem":668,"titleTemplate":6},"nuxi analyze","/docs/api/commands/analyze","docs/3.api/4.commands/analyze",{"title":670,"path":671,"stem":672,"titleTemplate":6},"nuxi build","/docs/api/commands/build","docs/3.api/4.commands/build",{"title":674,"path":675,"stem":676,"titleTemplate":6},"nuxi build-module","/docs/api/commands/build-module","docs/3.api/4.commands/build-module",{"title":678,"path":679,"stem":680,"titleTemplate":6},"nuxi cleanup","/docs/api/commands/cleanup","docs/3.api/4.commands/cleanup",{"title":682,"path":683,"stem":684,"titleTemplate":6},"nuxi dev","/docs/api/commands/dev","docs/3.api/4.commands/dev",{"title":686,"path":687,"stem":688,"titleTemplate":6},"nuxi devtools","/docs/api/commands/devtools","docs/3.api/4.commands/devtools",{"title":690,"path":691,"stem":692,"titleTemplate":6},"nuxi generate","/docs/api/commands/generate","docs/3.api/4.commands/generate",{"title":694,"path":695,"stem":696,"titleTemplate":6},"nuxi info","/docs/api/commands/info","docs/3.api/4.commands/info",{"title":698,"path":699,"stem":700,"titleTemplate":6},"nuxi init","/docs/api/commands/init","docs/3.api/4.commands/init",{"title":702,"path":703,"stem":704,"titleTemplate":6},"nuxi module","/docs/api/commands/module","docs/3.api/4.commands/module",{"title":706,"path":707,"stem":708,"titleTemplate":6},"nuxi prepare","/docs/api/commands/prepare","docs/3.api/4.commands/prepare",{"title":710,"path":711,"stem":712,"titleTemplate":6},"nuxi preview","/docs/api/commands/preview","docs/3.api/4.commands/preview",{"title":714,"path":715,"stem":716,"titleTemplate":6},"nuxi typecheck","/docs/api/commands/typecheck","docs/3.api/4.commands/typecheck",{"title":718,"path":719,"stem":720,"titleTemplate":6},"nuxi upgrade","/docs/api/commands/upgrade","docs/3.api/4.commands/upgrade",{"title":307,"titleTemplate":722,"icon":723,"path":724,"stem":725,"children":726,"page":108},"%s · Nuxt Kit","i-lucide-package","/docs/api/kit","docs/3.api/5.kit",[727,730,733,737,741,745,749,753,757,761,765,768,771,775,779,783],{"title":143,"path":728,"stem":729,"titleTemplate":6},"/docs/api/kit/modules","docs/3.api/5.kit/1.modules",{"title":291,"path":731,"stem":732,"titleTemplate":6},"/docs/api/kit/runtime-config","docs/3.api/5.kit/10.runtime-config",{"title":734,"path":735,"stem":736,"titleTemplate":6},"Templates","/docs/api/kit/templates","docs/3.api/5.kit/10.templates",{"title":738,"path":739,"stem":740,"titleTemplate":6},"Nitro","/docs/api/kit/nitro","docs/3.api/5.kit/11.nitro",{"title":742,"path":743,"stem":744,"titleTemplate":6},"Resolving","/docs/api/kit/resolving","docs/3.api/5.kit/12.resolving",{"title":746,"path":747,"stem":748,"titleTemplate":6},"Logging","/docs/api/kit/logging","docs/3.api/5.kit/13.logging",{"title":750,"path":751,"stem":752,"titleTemplate":6},"Builder","/docs/api/kit/builder","docs/3.api/5.kit/14.builder",{"title":754,"path":755,"stem":756,"titleTemplate":6},"Examples","/docs/api/kit/examples","docs/3.api/5.kit/15.examples",{"title":758,"path":759,"stem":760,"titleTemplate":6},"Programmatic Usage","/docs/api/kit/programmatic","docs/3.api/5.kit/2.programmatic",{"title":762,"path":763,"stem":764,"titleTemplate":6},"Compatibility","/docs/api/kit/compatibility","docs/3.api/5.kit/3.compatibility",{"title":123,"path":766,"stem":767,"titleTemplate":6},"/docs/api/kit/autoimports","docs/3.api/5.kit/4.autoimports",{"title":353,"path":769,"stem":770,"titleTemplate":6},"/docs/api/kit/components","docs/3.api/5.kit/5.components",{"title":772,"path":773,"stem":774,"titleTemplate":6},"Context","/docs/api/kit/context","docs/3.api/5.kit/6.context",{"title":776,"path":777,"stem":778,"titleTemplate":6},"Pages","/docs/api/kit/pages","docs/3.api/5.kit/7.pages",{"title":780,"path":781,"stem":782,"titleTemplate":6},"Layout","/docs/api/kit/layout","docs/3.api/5.kit/8.layout",{"title":784,"path":785,"stem":786,"titleTemplate":6},"Plugins","/docs/api/kit/plugins","docs/3.api/5.kit/9.plugins",{"title":788,"titleTemplate":6,"icon":789,"path":790,"stem":791,"children":792,"page":108},"Advanced","i-lucide-brain","/docs/api/advanced","docs/3.api/6.advanced",[793,796],{"title":299,"path":794,"stem":795,"titleTemplate":6},"/docs/api/advanced/hooks","docs/3.api/6.advanced/1.hooks",{"title":797,"path":798,"stem":799,"titleTemplate":6},"Import meta","/docs/api/advanced/import-meta","docs/3.api/6.advanced/2.import-meta",{"title":801,"path":802,"stem":803,"titleTemplate":804,"icon":32},"Nuxt Configuration","/docs/api/nuxt-config","docs/3.api/6.nuxt-config","%s",{"title":754,"titleTemplate":806,"icon":807,"path":808,"stem":809,"children":810,"page":108},"%s · Nuxt Examples","i-lucide-app-window-mac","/docs/examples","docs/4.examples",[811,815,837,852,888],{"title":812,"path":813,"stem":814,"titleTemplate":6},"Hello World","/docs/examples/hello-world","docs/4.examples/0.hello-world",{"title":283,"path":816,"stem":817,"children":818,"page":108},"/docs/examples/features","docs/4.examples/1.features",[819,823,826,829,833],{"title":820,"path":821,"stem":822,"titleTemplate":6},"Auto Imports","/docs/examples/features/auto-imports","docs/4.examples/1.features/1.auto-imports",{"title":64,"path":824,"stem":825,"titleTemplate":6},"/docs/examples/features/data-fetching","docs/4.examples/1.features/2.data-fetching",{"title":69,"path":827,"stem":828,"titleTemplate":6},"/docs/examples/features/state-management","docs/4.examples/1.features/3.state-management",{"title":830,"path":831,"stem":832,"titleTemplate":6},"Meta Tags","/docs/examples/features/meta-tags","docs/4.examples/1.features/4.meta-tags",{"title":834,"path":835,"stem":836,"titleTemplate":6},"Layouts","/docs/examples/features/layouts","docs/4.examples/1.features/5.layouts",{"title":49,"path":838,"stem":839,"children":840,"page":108},"/docs/examples/routing","docs/4.examples/2.routing",[841,845,848],{"title":842,"path":843,"stem":844,"titleTemplate":6},"Middleware","/docs/examples/routing/middleware","docs/4.examples/2.routing/middleware",{"title":776,"path":846,"stem":847,"titleTemplate":6},"/docs/examples/routing/pages","docs/4.examples/2.routing/pages",{"title":849,"path":850,"stem":851,"titleTemplate":6},"Universal Router","/docs/examples/routing/universal-router","docs/4.examples/2.routing/universal-router",{"title":788,"path":853,"stem":854,"children":855,"page":108},"/docs/examples/advanced","docs/4.examples/4.advanced",[856,859,862,866,870,874,878,881,884],{"title":84,"path":857,"stem":858,"titleTemplate":6},"/docs/examples/advanced/config-extends","docs/4.examples/4.advanced/config-extends",{"title":74,"path":860,"stem":861,"titleTemplate":6},"/docs/examples/advanced/error-handling","docs/4.examples/4.advanced/error-handling",{"title":863,"path":864,"stem":865,"titleTemplate":6},"JSX / TSX","/docs/examples/advanced/jsx","docs/4.examples/4.advanced/jsx",{"title":867,"path":868,"stem":869,"titleTemplate":6},"Locale","/docs/examples/advanced/locale","docs/4.examples/4.advanced/locale",{"title":871,"path":872,"stem":873,"titleTemplate":6},"Module Extend Pages","/docs/examples/advanced/module-extend-pages","docs/4.examples/4.advanced/module-extend-pages",{"title":875,"path":876,"stem":877,"titleTemplate":6},"Teleport","/docs/examples/advanced/teleport","docs/4.examples/4.advanced/teleport",{"title":99,"path":879,"stem":880,"titleTemplate":6},"/docs/examples/advanced/testing","docs/4.examples/4.advanced/testing",{"title":436,"path":882,"stem":883,"titleTemplate":6},"/docs/examples/advanced/use-cookie","docs/4.examples/4.advanced/use-cookie",{"title":885,"path":886,"stem":887,"titleTemplate":6},"Use Custom Fetch Composable","/docs/examples/advanced/use-custom-fetch-composable","docs/4.examples/4.advanced/use-custom-fetch-composable",{"title":889,"path":890,"stem":891,"children":892,"page":108},"Experimental","/docs/examples/experimental","docs/4.examples/7.experimental",[893],{"title":894,"path":895,"stem":896,"titleTemplate":6},"WASM","/docs/examples/experimental/wasm","docs/4.examples/7.experimental/wasm",{"title":898,"titleTemplate":899,"icon":900,"path":901,"stem":902,"children":903,"page":108},"Community","%s · Nuxt Community","i-lucide-messages-square","/docs/community","docs/5.community",[904,909,914,919,924,929],{"title":905,"path":906,"stem":907,"titleTemplate":6,"icon":908},"Getting Help","/docs/community/getting-help","docs/5.community/2.getting-help","i-lucide-life-buoy",{"title":910,"path":911,"stem":912,"titleTemplate":6,"icon":913},"Reporting Bugs","/docs/community/reporting-bugs","docs/5.community/3.reporting-bugs","i-lucide-bug",{"title":915,"path":916,"stem":917,"titleTemplate":6,"icon":918},"Contribution","/docs/community/contribution","docs/5.community/4.contribution","i-lucide-git-pull-request",{"title":920,"path":921,"stem":922,"titleTemplate":6,"icon":923},"Framework","/docs/community/framework-contribution","docs/5.community/5.framework-contribution","i-lucide-github",{"title":925,"path":926,"stem":927,"titleTemplate":6,"icon":928},"Roadmap","/docs/community/roadmap","docs/5.community/6.roadmap","i-lucide-map",{"title":930,"path":931,"stem":932,"titleTemplate":6,"icon":933},"Releases","/docs/community/changelog","docs/5.community/7.changelog","i-lucide-bell-dot",{"title":935,"titleTemplate":936,"icon":937,"path":938,"stem":939,"children":940,"page":108},"Migrate to Nuxt Bridge","Migrate to Nuxt Bridge: %s","i-lucide-ship","/docs/bridge","docs/6.bridge",[941,945,948,951,955,959,963,966,969,972],{"title":942,"path":943,"stem":944,"titleTemplate":6},"Overview","/docs/bridge/overview","docs/6.bridge/1.overview",{"title":29,"path":946,"stem":947,"titleTemplate":6},"/docs/bridge/configuration","docs/6.bridge/10.configuration",{"title":151,"path":949,"stem":950,"titleTemplate":6},"/docs/bridge/typescript","docs/6.bridge/2.typescript",{"title":952,"path":953,"stem":954,"titleTemplate":6},"Legacy Composition API","/docs/bridge/bridge-composition-api","docs/6.bridge/3.bridge-composition-api",{"title":956,"path":957,"stem":958,"titleTemplate":6},"Plugins and Middleware","/docs/bridge/plugins-and-middleware","docs/6.bridge/4.plugins-and-middleware",{"title":960,"path":961,"stem":962,"titleTemplate":6},"New Composition API","/docs/bridge/nuxt3-compatible-api","docs/6.bridge/5.nuxt3-compatible-api",{"title":830,"path":964,"stem":965,"titleTemplate":6},"/docs/bridge/meta","docs/6.bridge/6.meta",{"title":291,"path":967,"stem":968,"titleTemplate":6},"/docs/bridge/runtime-config","docs/6.bridge/7.runtime-config",{"title":738,"path":970,"stem":971,"titleTemplate":6},"/docs/bridge/nitro","docs/6.bridge/8.nitro",{"title":973,"path":974,"stem":975,"titleTemplate":6},"Vite","/docs/bridge/vite","docs/6.bridge/9.vite",{"title":977,"titleTemplate":978,"icon":107,"path":979,"stem":980,"children":981,"page":108},"Migrate to Nuxt 3","Migrate to Nuxt 3: %s","/docs/migration","docs/7.migration",[982,985,989,992,995,998,1001,1004,1007,1011,1015],{"title":942,"path":983,"stem":984,"titleTemplate":6},"/docs/migration/overview","docs/7.migration/1.overview",{"title":986,"path":987,"stem":988,"titleTemplate":6},"Build Tooling","/docs/migration/bundling","docs/7.migration/10.bundling",{"title":79,"path":990,"stem":991,"titleTemplate":6},"/docs/migration/server","docs/7.migration/11.server",{"title":29,"path":993,"stem":994,"titleTemplate":6},"/docs/migration/configuration","docs/7.migration/2.configuration",{"title":143,"path":996,"stem":997,"titleTemplate":6},"/docs/migration/module-authors","docs/7.migration/20.module-authors",{"title":820,"path":999,"stem":1000,"titleTemplate":6},"/docs/migration/auto-imports","docs/7.migration/3.auto-imports",{"title":830,"path":1002,"stem":1003,"titleTemplate":6},"/docs/migration/meta","docs/7.migration/4.meta",{"title":956,"path":1005,"stem":1006,"titleTemplate":6},"/docs/migration/plugins-and-middleware","docs/7.migration/5.plugins-and-middleware",{"title":1008,"path":1009,"stem":1010,"titleTemplate":6},"Pages and Layouts","/docs/migration/pages-and-layouts","docs/7.migration/6.pages-and-layouts",{"title":1012,"path":1013,"stem":1014,"titleTemplate":6},"Component Options","/docs/migration/component-options","docs/7.migration/7.component-options",{"title":291,"path":1016,"stem":1017,"titleTemplate":6},"/docs/migration/runtime-config","docs/7.migration/8.runtime-config",{"title":1019,"path":1020,"stem":1021,"children":1022,"page":108},"Blog","/blog","blog",[1023,1027,1031,1035,1039,1043,1047,1051,1055,1059,1063,1067,1071,1075,1079,1083,1087,1091,1095,1099,1103],{"title":1024,"path":1025,"stem":1026},"Announcing 3.0","/blog/v3","blog/1.v3",{"title":1028,"path":1029,"stem":1030},"Nuxt 3.3","/blog/v3-3","blog/10.v3-3",{"title":1032,"path":1033,"stem":1034},"Nuxt 3.4","/blog/v3-4","blog/11.v3-4",{"title":1036,"path":1037,"stem":1038},"Nuxt 3.5","/blog/v3-5","blog/12.v3-5",{"title":1040,"path":1041,"stem":1042},"Nuxt 3.6","/blog/v3-6","blog/13.v3-6",{"title":1044,"path":1045,"stem":1046},"Nuxt on the Edge","/blog/nuxt-on-the-edge","blog/14.nuxt-on-the-edge",{"title":1048,"path":1049,"stem":1050},"Nuxt DevTools v1.0","/blog/nuxt-devtools-v1-0","blog/18.nuxt-devtools-v1-0",{"title":1052,"path":1053,"stem":1054},"Nuxt: A vision for 2023","/blog/vision-2023","blog/2.vision-2023",{"title":1056,"path":1057,"stem":1058},"The Evolution of Shiki v1.0","/blog/shiki-v1","blog/21.shiki-v1",{"title":1060,"path":1061,"stem":1062},"Refreshed Nuxt ESLint Integrations","/blog/eslint-module","blog/24.eslint-module",{"title":1064,"path":1065,"stem":1066},"Introducing Nuxt Scripts","/blog/nuxt-scripts","blog/26.nuxt-scripts",{"title":1068,"path":1069,"stem":1070},"Introducing Nuxt Icon v1","/blog/nuxt-icon-v1-0","blog/29.nuxt-icon-v1-0",{"title":1072,"path":1073,"stem":1074},"Introducing Nuxt DevTools","/blog/introducing-nuxt-devtools","blog/3.introducing-nuxt-devtools",{"title":1076,"path":1077,"stem":1078},"Announcing Nuxt 3 Release Candidate","/blog/nuxt3-rc","blog/3.nuxt3-rc",{"title":1080,"path":1081,"stem":1082},"Nuxt 2 End-of-Life (EOL)","/blog/nuxt2-eol","blog/4.nuxt2-eol",{"title":1084,"path":1085,"stem":1086},"Introducing Nuxt 3 Beta","/blog/nuxt3-beta","blog/4.nuxt3-beta",{"title":1088,"path":1089,"stem":1090},"Going Full Static","/blog/going-full-static","blog/5.going-full-static",{"title":1092,"path":1093,"stem":1094},"Introducing Smart Prefetching","/blog/introducing-smart-prefetching","blog/6.introducing-smart-prefetching",{"title":1096,"path":1097,"stem":1098},"Understanding how fetch works in Nuxt 2.12","/blog/understanding-how-fetch-works-in-nuxt-2-12","blog/7.understanding-how-fetch-works-in-nuxt-2-12",{"title":1100,"path":1101,"stem":1102},"Nuxt 2 Static Improvements","/blog/nuxt-static-improvements","blog/8.nuxt-static-improvements",{"title":1104,"path":1105,"stem":1106},"Nuxt 2: From Terminal to Browser","/blog/nuxtjs-from-terminal-to-browser","blog/9.nuxtjs-from-terminal-to-browser",{"id":1108,"title":179,"body":1109,"description":4579,"extension":4580,"links":6,"meta":4581,"navigation":4584,"path":180,"seo":4585,"stem":181,"titleTemplate":6,"__hash__":4586},"docs/docs/2.guide/2.directory-structure/1.components.md",{"type":1110,"value":1111,"toc":4558},"minimal",[1112,1116,1163,1243,1248,1251,1293,1296,1310,1324,1335,1440,1454,1458,1503,1506,1659,1668,1679,1682,1722,1733,1742,1746,1753,1759,1927,1931,1934,1937,1940,1945,1948,1960,1966,1969,2018,2028,2043,2048,2051,2054,2102,2113,2118,2121,2178,2188,2199,2204,2207,2264,2275,2280,2283,2340,2345,2348,2492,2497,2500,2548,2552,2559,2686,2690,2693,2757,2761,2767,2982,2986,2992,3172,3177,3181,3195,3384,3388,3402,3483,3487,3494,3515,3567,3575,3593,3601,3605,3608,3615,3622,3629,3633,3636,3639,3642,3688,3695,3717,3795,3811,3816,3821,3826,3830,3839,3846,3931,3944,3948,3958,3961,3986,3993,4005,4009,4018,4048,4098,4102,4110,4112,4116,4119,4126,4129,4213,4223,4408,4415,4457,4466,4545,4551,4554],[1113,1114,1115],"p",{},"Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).",[1117,1118,1123],"pre",{"className":1119,"code":1120,"filename":159,"language":1121,"meta":1122,"style":1122},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","-| components/\n---| AppHeader.vue\n---| AppFooter.vue\n","bash","",[1124,1125,1126,1142,1153],"code",{"__ignoreMap":1122},[1127,1128,1131,1135,1139],"span",{"class":1129,"line":1130},"line",1,[1127,1132,1134],{"class":1133},"sT2Ow","-",[1127,1136,1138],{"class":1137},"sYp4K","|",[1127,1140,1141],{"class":1133}," components/\n",[1127,1143,1145,1148,1150],{"class":1129,"line":1144},2,[1127,1146,1147],{"class":1133},"---",[1127,1149,1138],{"class":1137},[1127,1151,1152],{"class":1133}," AppHeader.vue\n",[1127,1154,1156,1158,1160],{"class":1129,"line":1155},3,[1127,1157,1147],{"class":1133},[1127,1159,1138],{"class":1137},[1127,1161,1162],{"class":1133}," AppFooter.vue\n",[1117,1164,1168],{"className":1165,"code":1166,"filename":248,"language":1167,"meta":1122,"style":1122},"language-html shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CAppHeader />\n    \u003CNuxtPage />\n    \u003CAppFooter />\n  \u003C/div>\n\u003C/template>\n","html",[1124,1169,1170,1182,1192,1203,1213,1223,1233],{"__ignoreMap":1122},[1127,1171,1172,1175,1179],{"class":1129,"line":1130},[1127,1173,1174],{"class":1137},"\u003C",[1127,1176,1178],{"class":1177},"sQ5dg","template",[1127,1180,1181],{"class":1137},">\n",[1127,1183,1184,1187,1190],{"class":1129,"line":1144},[1127,1185,1186],{"class":1137},"  \u003C",[1127,1188,1189],{"class":1177},"div",[1127,1191,1181],{"class":1137},[1127,1193,1194,1197,1200],{"class":1129,"line":1155},[1127,1195,1196],{"class":1137},"    \u003C",[1127,1198,1199],{"class":1177},"AppHeader",[1127,1201,1202],{"class":1137}," />\n",[1127,1204,1206,1208,1211],{"class":1129,"line":1205},4,[1127,1207,1196],{"class":1137},[1127,1209,1210],{"class":1177},"NuxtPage",[1127,1212,1202],{"class":1137},[1127,1214,1216,1218,1221],{"class":1129,"line":1215},5,[1127,1217,1196],{"class":1137},[1127,1219,1220],{"class":1177},"AppFooter",[1127,1222,1202],{"class":1137},[1127,1224,1226,1229,1231],{"class":1129,"line":1225},6,[1127,1227,1228],{"class":1137},"  \u003C/",[1127,1230,1189],{"class":1177},[1127,1232,1181],{"class":1137},[1127,1234,1236,1239,1241],{"class":1129,"line":1235},7,[1127,1237,1238],{"class":1137},"\u003C/",[1127,1240,1178],{"class":1177},[1127,1242,1181],{"class":1137},[1244,1245,1247],"h2",{"id":1246},"component-names","Component Names",[1113,1249,1250],{},"If you have a component in nested directories such as:",[1117,1252,1254],{"className":1119,"code":1253,"filename":159,"language":1121,"meta":1122,"style":1122},"-| components/\n---| base/\n-----| foo/\n-------| Button.vue\n",[1124,1255,1256,1264,1273,1283],{"__ignoreMap":1122},[1127,1257,1258,1260,1262],{"class":1129,"line":1130},[1127,1259,1134],{"class":1133},[1127,1261,1138],{"class":1137},[1127,1263,1141],{"class":1133},[1127,1265,1266,1268,1270],{"class":1129,"line":1144},[1127,1267,1147],{"class":1133},[1127,1269,1138],{"class":1137},[1127,1271,1272],{"class":1133}," base/\n",[1127,1274,1275,1278,1280],{"class":1129,"line":1155},[1127,1276,1277],{"class":1133},"-----",[1127,1279,1138],{"class":1137},[1127,1281,1282],{"class":1133}," foo/\n",[1127,1284,1285,1288,1290],{"class":1129,"line":1205},[1127,1286,1287],{"class":1133},"-------",[1127,1289,1138],{"class":1137},[1127,1291,1292],{"class":1133}," Button.vue\n",[1113,1294,1295],{},"... then the component's name will be based on its own path directory and filename, with duplicate segments being removed. Therefore, the component's name will be:",[1117,1297,1299],{"className":1165,"code":1298,"language":1167,"meta":1122,"style":1122},"\u003CBaseFooButton />\n",[1124,1300,1301],{"__ignoreMap":1122},[1127,1302,1303,1305,1308],{"class":1129,"line":1130},[1127,1304,1174],{"class":1137},[1127,1306,1307],{"class":1177},"BaseFooButton",[1127,1309,1202],{"class":1137},[1311,1312,1313],"note",{},[1113,1314,1315,1316,1319,1320,1323],{},"For clarity, we recommend that the component's filename matches its name. So, in the example above, you could rename ",[1124,1317,1318],{},"Button.vue"," to be ",[1124,1321,1322],{},"BaseFooButton.vue",".",[1113,1325,1326,1327,1330,1331,1334],{},"If you want to auto-import components based only on its name, not path, then you need to set ",[1124,1328,1329],{},"pathPrefix"," option to ",[1124,1332,1333],{},"false"," using extended form of the configuration object:",[1117,1336,1341],{"className":1337,"code":1338,"filename":260,"language":1339,"meta":1340,"style":1122},"language-ts shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight has-diff","export default defineNuxtConfig({\n  components: [\n    {\n      path: '~/components',\n      pathPrefix: false, // [!code ++]\n    },\n  ],\n});\n","ts","twoslash",[1124,1342,1343,1363,1374,1379,1399,1416,1421,1428],{"__ignoreMap":1122},[1127,1344,1345,1349,1352,1356,1360],{"class":1129,"line":1130},[1127,1346,1348],{"class":1347},"sFVN2","export",[1127,1350,1351],{"class":1347}," default",[1127,1353,1355],{"class":1354},"szd4z"," defineNuxtConfig",[1127,1357,1359],{"class":1358},"spdxX","(",[1127,1361,1362],{"class":1137},"{\n",[1127,1364,1365,1368,1371],{"class":1129,"line":1144},[1127,1366,1367],{"class":1177},"  components",[1127,1369,1370],{"class":1137},":",[1127,1372,1373],{"class":1358}," [\n",[1127,1375,1376],{"class":1129,"line":1155},[1127,1377,1378],{"class":1137},"    {\n",[1127,1380,1381,1384,1386,1389,1393,1396],{"class":1129,"line":1205},[1127,1382,1383],{"class":1177},"      path",[1127,1385,1370],{"class":1137},[1127,1387,1388],{"class":1137}," '",[1127,1390,1392],{"class":1391},"s5UST","~/components",[1127,1394,1395],{"class":1137},"'",[1127,1397,1398],{"class":1137},",\n",[1127,1400,1404,1407,1409,1413],{"class":1401,"line":1215},[1129,1402,1403],"diff","add",[1127,1405,1406],{"class":1177},"      pathPrefix",[1127,1408,1370],{"class":1137},[1127,1410,1412],{"class":1411},"sagxc"," false",[1127,1414,1415],{"class":1137},",",[1127,1417,1418],{"class":1129,"line":1225},[1127,1419,1420],{"class":1137},"    },\n",[1127,1422,1423,1426],{"class":1129,"line":1235},[1127,1424,1425],{"class":1358},"  ]",[1127,1427,1398],{"class":1137},[1127,1429,1431,1434,1437],{"class":1129,"line":1430},8,[1127,1432,1433],{"class":1137},"}",[1127,1435,1436],{"class":1358},")",[1127,1438,1439],{"class":1137},";\n",[1113,1441,1442,1443,1446,1447,1450,1451,1323],{},"This registers the components using the same strategy as used in Nuxt 2. For example, ",[1124,1444,1445],{},"~/components/Some/MyComponent.vue"," will be usable as ",[1124,1448,1449],{},"\u003CMyComponent>"," and not ",[1124,1452,1453],{},"\u003CSomeMyComponent>",[1244,1455,1457],{"id":1456},"dynamic-components","Dynamic Components",[1113,1459,1460,1461,1491,1492,1495,1496,1499,1500,1502],{},"If you want to use the Vue ",[1124,1462,1465,1467,1470,1473,1477,1480,1483,1486,1488],{"className":1463,"language":1464,"style":1122},"language-vue shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","vue",[1127,1466,1174],{"class":1137},[1127,1468,1469],{"class":1177},"component",[1127,1471,1472],{"class":1137}," :",[1127,1474,1476],{"class":1475},"sRBFq","is",[1127,1478,1479],{"class":1137},"=",[1127,1481,1482],{"class":1137},"\"",[1127,1484,1485],{"class":1358},"someComputedComponent",[1127,1487,1482],{"class":1137},[1127,1489,1490],{"class":1137},">"," syntax, you need to use the ",[1124,1493,1494],{},"resolveComponent"," helper provided by Vue or import the component directly from ",[1124,1497,1498],{},"#components"," and pass it into ",[1124,1501,1476],{}," prop.",[1113,1504,1505],{},"For example:",[1117,1507,1510],{"className":1463,"code":1508,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Cscript setup lang=\"ts\">\nimport { SomeComponent } from '#components'\n\nconst MyButton = resolveComponent('MyButton')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ccomponent :is=\"clickable ? MyButton : 'div'\" />\n  \u003Ccomponent :is=\"SomeComponent\" />\n\u003C/template>\n","pages/index.vue",[1124,1511,1512,1535,1559,1565,1590,1598,1602,1610,1630,1650],{"__ignoreMap":1122},[1127,1513,1514,1516,1519,1522,1525,1527,1529,1531,1533],{"class":1129,"line":1130},[1127,1515,1174],{"class":1137},[1127,1517,1518],{"class":1177},"script",[1127,1520,1521],{"class":1475}," setup",[1127,1523,1524],{"class":1475}," lang",[1127,1526,1479],{"class":1137},[1127,1528,1482],{"class":1137},[1127,1530,1339],{"class":1391},[1127,1532,1482],{"class":1137},[1127,1534,1181],{"class":1137},[1127,1536,1537,1540,1543,1546,1549,1552,1554,1556],{"class":1129,"line":1144},[1127,1538,1539],{"class":1347},"import",[1127,1541,1542],{"class":1137}," {",[1127,1544,1545],{"class":1358}," SomeComponent",[1127,1547,1548],{"class":1137}," }",[1127,1550,1551],{"class":1347}," from",[1127,1553,1388],{"class":1137},[1127,1555,1498],{"class":1391},[1127,1557,1558],{"class":1137},"'\n",[1127,1560,1561],{"class":1129,"line":1155},[1127,1562,1564],{"emptyLinePlaceholder":1563},true,"\n",[1127,1566,1567,1570,1573,1575,1578,1580,1582,1585,1587],{"class":1129,"line":1205},[1127,1568,1569],{"class":1475},"const",[1127,1571,1572],{"class":1358}," MyButton ",[1127,1574,1479],{"class":1137},[1127,1576,1577],{"class":1354}," resolveComponent",[1127,1579,1359],{"class":1358},[1127,1581,1395],{"class":1137},[1127,1583,1584],{"class":1391},"MyButton",[1127,1586,1395],{"class":1137},[1127,1588,1589],{"class":1358},")\n",[1127,1591,1592,1594,1596],{"class":1129,"line":1215},[1127,1593,1238],{"class":1137},[1127,1595,1518],{"class":1177},[1127,1597,1181],{"class":1137},[1127,1599,1600],{"class":1129,"line":1225},[1127,1601,1564],{"emptyLinePlaceholder":1563},[1127,1603,1604,1606,1608],{"class":1129,"line":1235},[1127,1605,1174],{"class":1137},[1127,1607,1178],{"class":1177},[1127,1609,1181],{"class":1137},[1127,1611,1612,1614,1616,1619,1621,1623,1626,1628],{"class":1129,"line":1430},[1127,1613,1186],{"class":1137},[1127,1615,1469],{"class":1177},[1127,1617,1618],{"class":1475}," :is",[1127,1620,1479],{"class":1137},[1127,1622,1482],{"class":1137},[1127,1624,1625],{"class":1391},"clickable ? MyButton : 'div'",[1127,1627,1482],{"class":1137},[1127,1629,1202],{"class":1137},[1127,1631,1633,1635,1637,1639,1641,1643,1646,1648],{"class":1129,"line":1632},9,[1127,1634,1186],{"class":1137},[1127,1636,1469],{"class":1177},[1127,1638,1618],{"class":1475},[1127,1640,1479],{"class":1137},[1127,1642,1482],{"class":1137},[1127,1644,1645],{"class":1391},"SomeComponent",[1127,1647,1482],{"class":1137},[1127,1649,1202],{"class":1137},[1127,1651,1653,1655,1657],{"class":1129,"line":1652},10,[1127,1654,1238],{"class":1137},[1127,1656,1178],{"class":1177},[1127,1658,1181],{"class":1137},[1660,1661,1662],"important",{},[1113,1663,1664,1665,1667],{},"If you are using ",[1124,1666,1494],{}," to handle dynamic components, make sure not to insert anything but the name of the component, which must be a string and not a variable.",[1669,1670,1674],"tip",{"icon":1671,"target":1672,"to":1673},"i-lucide-video","\\_blank","https://www.youtube.com/watch?v=4kq8E5IUM2U",[1113,1675,1676,1677,1323],{},"Watch Daniel Roe's short video about ",[1124,1678,1494],{},[1113,1680,1681],{},"Alternatively, though not recommended, you can register all your components globally, which will create async chunks for all your components and make them available throughout your application.",[1117,1683,1686],{"className":1684,"code":1685,"language":1402,"meta":1122,"style":1122},"language-diff shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","  export default defineNuxtConfig({\n    components: {\n+     global: true,\n+     dirs: ['~/components']\n    },\n  })\n",[1124,1687,1688,1693,1698,1706,1713,1717],{"__ignoreMap":1122},[1127,1689,1690],{"class":1129,"line":1130},[1127,1691,1692],{"class":1358},"  export default defineNuxtConfig({\n",[1127,1694,1695],{"class":1129,"line":1144},[1127,1696,1697],{"class":1358},"    components: {\n",[1127,1699,1700,1703],{"class":1129,"line":1155},[1127,1701,1702],{"class":1137},"+",[1127,1704,1705],{"class":1391},"     global: true,\n",[1127,1707,1708,1710],{"class":1129,"line":1205},[1127,1709,1702],{"class":1137},[1127,1711,1712],{"class":1391},"     dirs: ['~/components']\n",[1127,1714,1715],{"class":1129,"line":1215},[1127,1716,1420],{"class":1358},[1127,1718,1719],{"class":1129,"line":1225},[1127,1720,1721],{"class":1358},"  })\n",[1113,1723,1724,1725,1728,1729,1732],{},"You can also selectively register some components globally by placing them in a ",[1124,1726,1727],{},"~/components/global"," directory, or by using a ",[1124,1730,1731],{},".global.vue"," suffix in the filename. As noted above, each global component is rendered in a separate chunk, so be careful not to overuse this feature.",[1311,1734,1735],{},[1113,1736,1737,1738,1741],{},"The ",[1124,1739,1740],{},"global"," option can also be set per component directory.",[1244,1743,1745],{"id":1744},"dynamic-imports","Dynamic Imports",[1113,1747,1748,1749,1752],{},"To dynamically import a component (also known as lazy-loading a component) all you need to do is add the ",[1124,1750,1751],{},"Lazy"," prefix to the component's name. This is particularly useful if the component is not always needed.",[1113,1754,1755,1756,1758],{},"By using the ",[1124,1757,1751],{}," prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.",[1117,1760,1762],{"className":1463,"code":1761,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Cscript setup lang=\"ts\">\nconst show = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Mountains\u003C/h1>\n    \u003CLazyMountainsList v-if=\"show\" />\n    \u003Cbutton v-if=\"!show\" @click=\"show = true\">Show List\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[1124,1763,1764,1784,1802,1810,1814,1822,1830,1848,1869,1910,1918],{"__ignoreMap":1122},[1127,1765,1766,1768,1770,1772,1774,1776,1778,1780,1782],{"class":1129,"line":1130},[1127,1767,1174],{"class":1137},[1127,1769,1518],{"class":1177},[1127,1771,1521],{"class":1475},[1127,1773,1524],{"class":1475},[1127,1775,1479],{"class":1137},[1127,1777,1482],{"class":1137},[1127,1779,1339],{"class":1391},[1127,1781,1482],{"class":1137},[1127,1783,1181],{"class":1137},[1127,1785,1786,1788,1791,1793,1796,1798,1800],{"class":1129,"line":1144},[1127,1787,1569],{"class":1475},[1127,1789,1790],{"class":1358}," show ",[1127,1792,1479],{"class":1137},[1127,1794,1795],{"class":1354}," ref",[1127,1797,1359],{"class":1358},[1127,1799,1333],{"class":1411},[1127,1801,1589],{"class":1358},[1127,1803,1804,1806,1808],{"class":1129,"line":1155},[1127,1805,1238],{"class":1137},[1127,1807,1518],{"class":1177},[1127,1809,1181],{"class":1137},[1127,1811,1812],{"class":1129,"line":1205},[1127,1813,1564],{"emptyLinePlaceholder":1563},[1127,1815,1816,1818,1820],{"class":1129,"line":1215},[1127,1817,1174],{"class":1137},[1127,1819,1178],{"class":1177},[1127,1821,1181],{"class":1137},[1127,1823,1824,1826,1828],{"class":1129,"line":1225},[1127,1825,1186],{"class":1137},[1127,1827,1189],{"class":1177},[1127,1829,1181],{"class":1137},[1127,1831,1832,1834,1837,1839,1842,1844,1846],{"class":1129,"line":1235},[1127,1833,1196],{"class":1137},[1127,1835,1836],{"class":1177},"h1",[1127,1838,1490],{"class":1137},[1127,1840,1841],{"class":1358},"Mountains",[1127,1843,1238],{"class":1137},[1127,1845,1836],{"class":1177},[1127,1847,1181],{"class":1137},[1127,1849,1850,1852,1855,1858,1860,1862,1865,1867],{"class":1129,"line":1430},[1127,1851,1196],{"class":1137},[1127,1853,1854],{"class":1177},"LazyMountainsList",[1127,1856,1857],{"class":1475}," v-if",[1127,1859,1479],{"class":1137},[1127,1861,1482],{"class":1137},[1127,1863,1864],{"class":1391},"show",[1127,1866,1482],{"class":1137},[1127,1868,1202],{"class":1137},[1127,1870,1871,1873,1876,1878,1880,1882,1885,1887,1890,1892,1894,1897,1899,1901,1904,1906,1908],{"class":1129,"line":1632},[1127,1872,1196],{"class":1137},[1127,1874,1875],{"class":1177},"button",[1127,1877,1857],{"class":1475},[1127,1879,1479],{"class":1137},[1127,1881,1482],{"class":1137},[1127,1883,1884],{"class":1391},"!show",[1127,1886,1482],{"class":1137},[1127,1888,1889],{"class":1475}," @click",[1127,1891,1479],{"class":1137},[1127,1893,1482],{"class":1137},[1127,1895,1896],{"class":1391},"show = true",[1127,1898,1482],{"class":1137},[1127,1900,1490],{"class":1137},[1127,1902,1903],{"class":1358},"Show List",[1127,1905,1238],{"class":1137},[1127,1907,1875],{"class":1177},[1127,1909,1181],{"class":1137},[1127,1911,1912,1914,1916],{"class":1129,"line":1652},[1127,1913,1228],{"class":1137},[1127,1915,1189],{"class":1177},[1127,1917,1181],{"class":1137},[1127,1919,1921,1923,1925],{"class":1129,"line":1920},11,[1127,1922,1238],{"class":1137},[1127,1924,1178],{"class":1177},[1127,1926,1181],{"class":1137},[1244,1928,1930],{"id":1929},"delayed-or-lazy-hydration","Delayed (or Lazy) Hydration",[1113,1932,1933],{},"Lazy components are great for controlling the chunk sizes in your app, but they don't always enhance runtime performance, as they still load eagerly unless conditionally rendered. In real-world applications, some pages may include a lot of content and a lot of components, and most of the time not all of them need to be interactive as soon as the page is loaded. Having them all load eagerly can negatively impact performance.",[1113,1935,1936],{},"In order to optimize your app, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks.",[1113,1938,1939],{},"Nuxt supports this using lazy (or delayed) hydration, allowing you to control when components become interactive.",[1941,1942,1944],"h3",{"id":1943},"hydration-strategies","Hydration Strategies",[1113,1946,1947],{},"Nuxt provides a range of built-in hydration strategies. Only one strategy can be used per lazy component.",[1949,1950,1951],"warning",{},[1113,1952,1953,1954,1957,1958,1323],{},"Currently Nuxt's built-in lazy hydration only works in single-file components (SFCs), and requires you to define the prop in the template (rather than spreading an object of props via ",[1124,1955,1956],{},"v-bind","). It also does not work with direct imports from ",[1124,1959,1498],{},[1961,1962,1964],"h4",{"id":1963},"hydrate-on-visible",[1124,1965,1963],{},[1113,1967,1968],{},"Hydrates the component when it becomes visible in the viewport.",[1117,1970,1972],{"className":1463,"code":1971,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-visible />\n  \u003C/div>\n\u003C/template>\n",[1124,1973,1974,1982,1990,2002,2010],{"__ignoreMap":1122},[1127,1975,1976,1978,1980],{"class":1129,"line":1130},[1127,1977,1174],{"class":1137},[1127,1979,1178],{"class":1177},[1127,1981,1181],{"class":1137},[1127,1983,1984,1986,1988],{"class":1129,"line":1144},[1127,1985,1186],{"class":1137},[1127,1987,1189],{"class":1177},[1127,1989,1181],{"class":1137},[1127,1991,1992,1994,1997,2000],{"class":1129,"line":1155},[1127,1993,1196],{"class":1137},[1127,1995,1996],{"class":1177},"LazyMyComponent",[1127,1998,1999],{"class":1475}," hydrate-on-visible",[1127,2001,1202],{"class":1137},[1127,2003,2004,2006,2008],{"class":1129,"line":1205},[1127,2005,1228],{"class":1137},[1127,2007,1189],{"class":1177},[1127,2009,1181],{"class":1137},[1127,2011,2012,2014,2016],{"class":1129,"line":1215},[1127,2013,1238],{"class":1137},[1127,2015,1178],{"class":1177},[1127,2017,1181],{"class":1137},[2019,2020,2023],"read-more",{"to":2021,"title":2022},"https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver","IntersectionObserver options",[1113,2024,2025,2026,1323],{},"Read more about the options for ",[1124,2027,1963],{},[1311,2029,2030],{},[1113,2031,2032,2033,1323],{},"Under the hood, this uses Vue's built-in ",[2034,2035,2039,2042],"a",{"href":2036,"rel":2037},"https://vuejs.org/guide/components/async.html#hydrate-on-visible",[2038],"nofollow",[1124,2040,2041],{},"hydrateOnVisible"," strategy",[1961,2044,2046],{"id":2045},"hydrate-on-idle",[1124,2047,2045],{},[1113,2049,2050],{},"Hydrates the component when the browser is idle. This is suitable if you need the component to load as soon as possible, but not block the critical rendering path.",[1113,2052,2053],{},"You can also pass a number which serves as a max timeout.",[1117,2055,2057],{"className":1463,"code":2056,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-idle />\n  \u003C/div>\n\u003C/template>\n",[1124,2058,2059,2067,2075,2086,2094],{"__ignoreMap":1122},[1127,2060,2061,2063,2065],{"class":1129,"line":1130},[1127,2062,1174],{"class":1137},[1127,2064,1178],{"class":1177},[1127,2066,1181],{"class":1137},[1127,2068,2069,2071,2073],{"class":1129,"line":1144},[1127,2070,1186],{"class":1137},[1127,2072,1189],{"class":1177},[1127,2074,1181],{"class":1137},[1127,2076,2077,2079,2081,2084],{"class":1129,"line":1155},[1127,2078,1196],{"class":1137},[1127,2080,1996],{"class":1177},[1127,2082,2083],{"class":1475}," hydrate-on-idle",[1127,2085,1202],{"class":1137},[1127,2087,2088,2090,2092],{"class":1129,"line":1205},[1127,2089,1228],{"class":1137},[1127,2091,1189],{"class":1177},[1127,2093,1181],{"class":1137},[1127,2095,2096,2098,2100],{"class":1129,"line":1215},[1127,2097,1238],{"class":1137},[1127,2099,1178],{"class":1177},[1127,2101,1181],{"class":1137},[1311,2103,2104],{},[1113,2105,2032,2106,1323],{},[2034,2107,2110,2042],{"href":2108,"rel":2109},"https://vuejs.org/guide/components/async.html#hydrate-on-idle",[2038],[1124,2111,2112],{},"hydrateOnIdle",[1961,2114,2116],{"id":2115},"hydrate-on-interaction",[1124,2117,2115],{},[1113,2119,2120],{},"Hydrates the component after a specified interaction (e.g., click, mouseover).",[1117,2122,2124],{"className":1463,"code":2123,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-interaction=\"mouseover\" />\n  \u003C/div>\n\u003C/template>\n",[1124,2125,2126,2134,2142,2162,2170],{"__ignoreMap":1122},[1127,2127,2128,2130,2132],{"class":1129,"line":1130},[1127,2129,1174],{"class":1137},[1127,2131,1178],{"class":1177},[1127,2133,1181],{"class":1137},[1127,2135,2136,2138,2140],{"class":1129,"line":1144},[1127,2137,1186],{"class":1137},[1127,2139,1189],{"class":1177},[1127,2141,1181],{"class":1137},[1127,2143,2144,2146,2148,2151,2153,2155,2158,2160],{"class":1129,"line":1155},[1127,2145,1196],{"class":1137},[1127,2147,1996],{"class":1177},[1127,2149,2150],{"class":1475}," hydrate-on-interaction",[1127,2152,1479],{"class":1137},[1127,2154,1482],{"class":1137},[1127,2156,2157],{"class":1391},"mouseover",[1127,2159,1482],{"class":1137},[1127,2161,1202],{"class":1137},[1127,2163,2164,2166,2168],{"class":1129,"line":1205},[1127,2165,1228],{"class":1137},[1127,2167,1189],{"class":1177},[1127,2169,1181],{"class":1137},[1127,2171,2172,2174,2176],{"class":1129,"line":1215},[1127,2173,1238],{"class":1137},[1127,2175,1178],{"class":1177},[1127,2177,1181],{"class":1137},[1113,2179,2180,2181,2184,2185,1323],{},"If you do not pass an event or list of events, it defaults to hydrating on ",[1124,2182,2183],{},"pointerenter"," and ",[1124,2186,2187],{},"focus",[1311,2189,2190],{},[1113,2191,2032,2192,1323],{},[2034,2193,2196,2042],{"href":2194,"rel":2195},"https://vuejs.org/guide/components/async.html#hydrate-on-interaction",[2038],[1124,2197,2198],{},"hydrateOnInteraction",[1961,2200,2202],{"id":2201},"hydrate-on-media-query",[1124,2203,2201],{},[1113,2205,2206],{},"Hydrates the component when the window matches a media query.",[1117,2208,2210],{"className":1463,"code":2209,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-media-query=\"(max-width: 768px)\" />\n  \u003C/div>\n\u003C/template>\n",[1124,2211,2212,2220,2228,2248,2256],{"__ignoreMap":1122},[1127,2213,2214,2216,2218],{"class":1129,"line":1130},[1127,2215,1174],{"class":1137},[1127,2217,1178],{"class":1177},[1127,2219,1181],{"class":1137},[1127,2221,2222,2224,2226],{"class":1129,"line":1144},[1127,2223,1186],{"class":1137},[1127,2225,1189],{"class":1177},[1127,2227,1181],{"class":1137},[1127,2229,2230,2232,2234,2237,2239,2241,2244,2246],{"class":1129,"line":1155},[1127,2231,1196],{"class":1137},[1127,2233,1996],{"class":1177},[1127,2235,2236],{"class":1475}," hydrate-on-media-query",[1127,2238,1479],{"class":1137},[1127,2240,1482],{"class":1137},[1127,2242,2243],{"class":1391},"(max-width: 768px)",[1127,2245,1482],{"class":1137},[1127,2247,1202],{"class":1137},[1127,2249,2250,2252,2254],{"class":1129,"line":1205},[1127,2251,1228],{"class":1137},[1127,2253,1189],{"class":1177},[1127,2255,1181],{"class":1137},[1127,2257,2258,2260,2262],{"class":1129,"line":1215},[1127,2259,1238],{"class":1137},[1127,2261,1178],{"class":1177},[1127,2263,1181],{"class":1137},[1311,2265,2266],{},[1113,2267,2032,2268,1323],{},[2034,2269,2272,2042],{"href":2270,"rel":2271},"https://vuejs.org/guide/components/async.html#hydrate-on-media-query",[2038],[1124,2273,2274],{},"hydrateOnMediaQuery",[1961,2276,2278],{"id":2277},"hydrate-after",[1124,2279,2277],{},[1113,2281,2282],{},"Hydrates the component after a specified delay (in milliseconds).",[1117,2284,2286],{"className":1463,"code":2285,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent :hydrate-after=\"2000\" />\n  \u003C/div>\n\u003C/template>\n",[1124,2287,2288,2296,2304,2324,2332],{"__ignoreMap":1122},[1127,2289,2290,2292,2294],{"class":1129,"line":1130},[1127,2291,1174],{"class":1137},[1127,2293,1178],{"class":1177},[1127,2295,1181],{"class":1137},[1127,2297,2298,2300,2302],{"class":1129,"line":1144},[1127,2299,1186],{"class":1137},[1127,2301,1189],{"class":1177},[1127,2303,1181],{"class":1137},[1127,2305,2306,2308,2310,2313,2315,2317,2320,2322],{"class":1129,"line":1155},[1127,2307,1196],{"class":1137},[1127,2309,1996],{"class":1177},[1127,2311,2312],{"class":1475}," :hydrate-after",[1127,2314,1479],{"class":1137},[1127,2316,1482],{"class":1137},[1127,2318,2319],{"class":1391},"2000",[1127,2321,1482],{"class":1137},[1127,2323,1202],{"class":1137},[1127,2325,2326,2328,2330],{"class":1129,"line":1205},[1127,2327,1228],{"class":1137},[1127,2329,1189],{"class":1177},[1127,2331,1181],{"class":1137},[1127,2333,2334,2336,2338],{"class":1129,"line":1215},[1127,2335,1238],{"class":1137},[1127,2337,1178],{"class":1177},[1127,2339,1181],{"class":1137},[1961,2341,2343],{"id":2342},"hydrate-when",[1124,2344,2342],{},[1113,2346,2347],{},"Hydrates the component based on a boolean condition.",[1117,2349,2351],{"className":1463,"code":2350,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent :hydrate-when=\"isReady\" />\n  \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst isReady = ref(false)\nfunction myFunction() {\n  // trigger custom hydration strategy...\n  isReady.value = true\n}\n\u003C/script>\n",[1124,2352,2353,2361,2369,2389,2397,2405,2425,2442,2456,2462,2478,2483],{"__ignoreMap":1122},[1127,2354,2355,2357,2359],{"class":1129,"line":1130},[1127,2356,1174],{"class":1137},[1127,2358,1178],{"class":1177},[1127,2360,1181],{"class":1137},[1127,2362,2363,2365,2367],{"class":1129,"line":1144},[1127,2364,1186],{"class":1137},[1127,2366,1189],{"class":1177},[1127,2368,1181],{"class":1137},[1127,2370,2371,2373,2375,2378,2380,2382,2385,2387],{"class":1129,"line":1155},[1127,2372,1196],{"class":1137},[1127,2374,1996],{"class":1177},[1127,2376,2377],{"class":1475}," :hydrate-when",[1127,2379,1479],{"class":1137},[1127,2381,1482],{"class":1137},[1127,2383,2384],{"class":1391},"isReady",[1127,2386,1482],{"class":1137},[1127,2388,1202],{"class":1137},[1127,2390,2391,2393,2395],{"class":1129,"line":1205},[1127,2392,1228],{"class":1137},[1127,2394,1189],{"class":1177},[1127,2396,1181],{"class":1137},[1127,2398,2399,2401,2403],{"class":1129,"line":1215},[1127,2400,1238],{"class":1137},[1127,2402,1178],{"class":1177},[1127,2404,1181],{"class":1137},[1127,2406,2407,2409,2411,2413,2415,2417,2419,2421,2423],{"class":1129,"line":1225},[1127,2408,1174],{"class":1137},[1127,2410,1518],{"class":1177},[1127,2412,1521],{"class":1475},[1127,2414,1524],{"class":1475},[1127,2416,1479],{"class":1137},[1127,2418,1482],{"class":1137},[1127,2420,1339],{"class":1391},[1127,2422,1482],{"class":1137},[1127,2424,1181],{"class":1137},[1127,2426,2427,2429,2432,2434,2436,2438,2440],{"class":1129,"line":1235},[1127,2428,1569],{"class":1475},[1127,2430,2431],{"class":1358}," isReady ",[1127,2433,1479],{"class":1137},[1127,2435,1795],{"class":1354},[1127,2437,1359],{"class":1358},[1127,2439,1333],{"class":1411},[1127,2441,1589],{"class":1358},[1127,2443,2444,2447,2450,2453],{"class":1129,"line":1430},[1127,2445,2446],{"class":1475},"function",[1127,2448,2449],{"class":1354}," myFunction",[1127,2451,2452],{"class":1137},"()",[1127,2454,2455],{"class":1137}," {\n",[1127,2457,2458],{"class":1129,"line":1632},[1127,2459,2461],{"class":2460},"svXlt","  // trigger custom hydration strategy...\n",[1127,2463,2464,2467,2469,2472,2475],{"class":1129,"line":1652},[1127,2465,2466],{"class":1358},"  isReady",[1127,2468,1323],{"class":1137},[1127,2470,2471],{"class":1358},"value",[1127,2473,2474],{"class":1137}," =",[1127,2476,2477],{"class":1411}," true\n",[1127,2479,2480],{"class":1129,"line":1920},[1127,2481,2482],{"class":1137},"}\n",[1127,2484,2486,2488,2490],{"class":1129,"line":2485},12,[1127,2487,1238],{"class":1137},[1127,2489,1518],{"class":1177},[1127,2491,1181],{"class":1137},[1961,2493,2495],{"id":2494},"hydrate-never",[1124,2496,2494],{},[1113,2498,2499],{},"Never hydrates the component.",[1117,2501,2503],{"className":1463,"code":2502,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-never />\n  \u003C/div>\n\u003C/template>\n",[1124,2504,2505,2513,2521,2532,2540],{"__ignoreMap":1122},[1127,2506,2507,2509,2511],{"class":1129,"line":1130},[1127,2508,1174],{"class":1137},[1127,2510,1178],{"class":1177},[1127,2512,1181],{"class":1137},[1127,2514,2515,2517,2519],{"class":1129,"line":1144},[1127,2516,1186],{"class":1137},[1127,2518,1189],{"class":1177},[1127,2520,1181],{"class":1137},[1127,2522,2523,2525,2527,2530],{"class":1129,"line":1155},[1127,2524,1196],{"class":1137},[1127,2526,1996],{"class":1177},[1127,2528,2529],{"class":1475}," hydrate-never",[1127,2531,1202],{"class":1137},[1127,2533,2534,2536,2538],{"class":1129,"line":1205},[1127,2535,1228],{"class":1137},[1127,2537,1189],{"class":1177},[1127,2539,1181],{"class":1137},[1127,2541,2542,2544,2546],{"class":1129,"line":1215},[1127,2543,1238],{"class":1137},[1127,2545,1178],{"class":1177},[1127,2547,1181],{"class":1137},[1941,2549,2551],{"id":2550},"listening-to-hydration-events","Listening to Hydration Events",[1113,2553,2554,2555,2558],{},"All delayed hydration components emit a ",[1124,2556,2557],{},"@hydrated"," event when they are hydrated.",[1117,2560,2562],{"className":1463,"code":2561,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-visible @hydrated=\"onHydrate\" />\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction onHydrate() {\n  console.log(\"Component has been hydrated!\")\n}\n\u003C/script>\n",[1124,2563,2564,2572,2580,2602,2610,2618,2622,2642,2653,2674,2678],{"__ignoreMap":1122},[1127,2565,2566,2568,2570],{"class":1129,"line":1130},[1127,2567,1174],{"class":1137},[1127,2569,1178],{"class":1177},[1127,2571,1181],{"class":1137},[1127,2573,2574,2576,2578],{"class":1129,"line":1144},[1127,2575,1186],{"class":1137},[1127,2577,1189],{"class":1177},[1127,2579,1181],{"class":1137},[1127,2581,2582,2584,2586,2588,2591,2593,2595,2598,2600],{"class":1129,"line":1155},[1127,2583,1196],{"class":1137},[1127,2585,1996],{"class":1177},[1127,2587,1999],{"class":1475},[1127,2589,2590],{"class":1475}," @hydrated",[1127,2592,1479],{"class":1137},[1127,2594,1482],{"class":1137},[1127,2596,2597],{"class":1391},"onHydrate",[1127,2599,1482],{"class":1137},[1127,2601,1202],{"class":1137},[1127,2603,2604,2606,2608],{"class":1129,"line":1205},[1127,2605,1228],{"class":1137},[1127,2607,1189],{"class":1177},[1127,2609,1181],{"class":1137},[1127,2611,2612,2614,2616],{"class":1129,"line":1215},[1127,2613,1238],{"class":1137},[1127,2615,1178],{"class":1177},[1127,2617,1181],{"class":1137},[1127,2619,2620],{"class":1129,"line":1225},[1127,2621,1564],{"emptyLinePlaceholder":1563},[1127,2623,2624,2626,2628,2630,2632,2634,2636,2638,2640],{"class":1129,"line":1235},[1127,2625,1174],{"class":1137},[1127,2627,1518],{"class":1177},[1127,2629,1521],{"class":1475},[1127,2631,1524],{"class":1475},[1127,2633,1479],{"class":1137},[1127,2635,1482],{"class":1137},[1127,2637,1339],{"class":1391},[1127,2639,1482],{"class":1137},[1127,2641,1181],{"class":1137},[1127,2643,2644,2646,2649,2651],{"class":1129,"line":1430},[1127,2645,2446],{"class":1475},[1127,2647,2648],{"class":1354}," onHydrate",[1127,2650,2452],{"class":1137},[1127,2652,2455],{"class":1137},[1127,2654,2655,2658,2660,2663,2665,2667,2670,2672],{"class":1129,"line":1632},[1127,2656,2657],{"class":1358},"  console",[1127,2659,1323],{"class":1137},[1127,2661,2662],{"class":1354},"log",[1127,2664,1359],{"class":1177},[1127,2666,1482],{"class":1137},[1127,2668,2669],{"class":1391},"Component has been hydrated!",[1127,2671,1482],{"class":1137},[1127,2673,1589],{"class":1177},[1127,2675,2676],{"class":1129,"line":1652},[1127,2677,2482],{"class":1137},[1127,2679,2680,2682,2684],{"class":1129,"line":1920},[1127,2681,1238],{"class":1137},[1127,2683,1518],{"class":1177},[1127,2685,1181],{"class":1137},[1941,2687,2689],{"id":2688},"caveats-and-best-practices","Caveats and Best Practices",[1113,2691,2692],{},"Delayed hydration can offer performance benefits, but it's essential to use it correctly:",[2694,2695,2696,2704,2714,2724,2748],"ol",{},[2697,2698,2699,2703],"li",{},[2700,2701,2702],"strong",{},"Prioritize In-Viewport Content:"," Avoid delayed hydration for critical, above-the-fold content. It's best suited for content that isn't immediately needed.",[2697,2705,2706,2709,2710,2713],{},[2700,2707,2708],{},"Conditional Rendering:"," When using ",[1124,2711,2712],{},"v-if=\"false\""," on a lazy component, you might not need delayed hydration. You can just use a normal lazy component.",[2697,2715,2716,2719,2720,2723],{},[2700,2717,2718],{},"Shared State:"," Be mindful of shared state (",[1124,2721,2722],{},"v-model",") across multiple components. Updating the model in one component can trigger hydration in all components bound to that model.",[2697,2725,2726,2729,2730],{},[2700,2727,2728],{},"Use Each Strategy's Intended Use Case:"," Each strategy is optimized for a specific purpose.",[2731,2732,2733,2738,2743],"ul",{},[2697,2734,2735,2737],{},[1124,2736,2342],{}," is best for components that might not always need to be hydrated.",[2697,2739,2740,2742],{},[1124,2741,2277],{}," is for components that can wait a specific amount of time.",[2697,2744,2745,2747],{},[1124,2746,2045],{}," is for components that can be hydrated when the browser is idle.",[2697,2749,2750,2756],{},[2700,2751,2752,2753,2755],{},"Avoid ",[1124,2754,2494],{}," on interactive components:"," If a component requires user interaction, it should not be set to never hydrate.",[1244,2758,2760],{"id":2759},"direct-imports","Direct Imports",[1113,2762,2763,2764,2766],{},"You can also explicitly import components from ",[1124,2765,1498],{}," if you want or need to bypass Nuxt's auto-importing functionality.",[1117,2768,2770],{"className":1463,"code":2769,"filename":1509,"language":1464,"meta":1122,"style":1122},"\u003Cscript setup lang=\"ts\">\nimport { NuxtLink, LazyMountainsList } from '#components'\n\nconst show = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Mountains\u003C/h1>\n    \u003CLazyMountainsList v-if=\"show\" />\n    \u003Cbutton v-if=\"!show\" @click=\"show = true\">Show List\u003C/button>\n    \u003CNuxtLink to=\"/\">Home\u003C/NuxtLink>\n  \u003C/div>\n\u003C/template>\n",[1124,2771,2772,2792,2816,2820,2836,2844,2848,2856,2864,2880,2898,2934,2964,2973],{"__ignoreMap":1122},[1127,2773,2774,2776,2778,2780,2782,2784,2786,2788,2790],{"class":1129,"line":1130},[1127,2775,1174],{"class":1137},[1127,2777,1518],{"class":1177},[1127,2779,1521],{"class":1475},[1127,2781,1524],{"class":1475},[1127,2783,1479],{"class":1137},[1127,2785,1482],{"class":1137},[1127,2787,1339],{"class":1391},[1127,2789,1482],{"class":1137},[1127,2791,1181],{"class":1137},[1127,2793,2794,2796,2798,2801,2803,2806,2808,2810,2812,2814],{"class":1129,"line":1144},[1127,2795,1539],{"class":1347},[1127,2797,1542],{"class":1137},[1127,2799,2800],{"class":1358}," NuxtLink",[1127,2802,1415],{"class":1137},[1127,2804,2805],{"class":1358}," LazyMountainsList",[1127,2807,1548],{"class":1137},[1127,2809,1551],{"class":1347},[1127,2811,1388],{"class":1137},[1127,2813,1498],{"class":1391},[1127,2815,1558],{"class":1137},[1127,2817,2818],{"class":1129,"line":1155},[1127,2819,1564],{"emptyLinePlaceholder":1563},[1127,2821,2822,2824,2826,2828,2830,2832,2834],{"class":1129,"line":1205},[1127,2823,1569],{"class":1475},[1127,2825,1790],{"class":1358},[1127,2827,1479],{"class":1137},[1127,2829,1795],{"class":1354},[1127,2831,1359],{"class":1358},[1127,2833,1333],{"class":1411},[1127,2835,1589],{"class":1358},[1127,2837,2838,2840,2842],{"class":1129,"line":1215},[1127,2839,1238],{"class":1137},[1127,2841,1518],{"class":1177},[1127,2843,1181],{"class":1137},[1127,2845,2846],{"class":1129,"line":1225},[1127,2847,1564],{"emptyLinePlaceholder":1563},[1127,2849,2850,2852,2854],{"class":1129,"line":1235},[1127,2851,1174],{"class":1137},[1127,2853,1178],{"class":1177},[1127,2855,1181],{"class":1137},[1127,2857,2858,2860,2862],{"class":1129,"line":1430},[1127,2859,1186],{"class":1137},[1127,2861,1189],{"class":1177},[1127,2863,1181],{"class":1137},[1127,2865,2866,2868,2870,2872,2874,2876,2878],{"class":1129,"line":1632},[1127,2867,1196],{"class":1137},[1127,2869,1836],{"class":1177},[1127,2871,1490],{"class":1137},[1127,2873,1841],{"class":1358},[1127,2875,1238],{"class":1137},[1127,2877,1836],{"class":1177},[1127,2879,1181],{"class":1137},[1127,2881,2882,2884,2886,2888,2890,2892,2894,2896],{"class":1129,"line":1652},[1127,2883,1196],{"class":1137},[1127,2885,1854],{"class":1177},[1127,2887,1857],{"class":1475},[1127,2889,1479],{"class":1137},[1127,2891,1482],{"class":1137},[1127,2893,1864],{"class":1391},[1127,2895,1482],{"class":1137},[1127,2897,1202],{"class":1137},[1127,2899,2900,2902,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926,2928,2930,2932],{"class":1129,"line":1920},[1127,2901,1196],{"class":1137},[1127,2903,1875],{"class":1177},[1127,2905,1857],{"class":1475},[1127,2907,1479],{"class":1137},[1127,2909,1482],{"class":1137},[1127,2911,1884],{"class":1391},[1127,2913,1482],{"class":1137},[1127,2915,1889],{"class":1475},[1127,2917,1479],{"class":1137},[1127,2919,1482],{"class":1137},[1127,2921,1896],{"class":1391},[1127,2923,1482],{"class":1137},[1127,2925,1490],{"class":1137},[1127,2927,1903],{"class":1358},[1127,2929,1238],{"class":1137},[1127,2931,1875],{"class":1177},[1127,2933,1181],{"class":1137},[1127,2935,2936,2938,2941,2944,2946,2948,2951,2953,2955,2958,2960,2962],{"class":1129,"line":2485},[1127,2937,1196],{"class":1137},[1127,2939,2940],{"class":1177},"NuxtLink",[1127,2942,2943],{"class":1475}," to",[1127,2945,1479],{"class":1137},[1127,2947,1482],{"class":1137},[1127,2949,2950],{"class":1391},"/",[1127,2952,1482],{"class":1137},[1127,2954,1490],{"class":1137},[1127,2956,2957],{"class":1358},"Home",[1127,2959,1238],{"class":1137},[1127,2961,2940],{"class":1177},[1127,2963,1181],{"class":1137},[1127,2965,2967,2969,2971],{"class":1129,"line":2966},13,[1127,2968,1228],{"class":1137},[1127,2970,1189],{"class":1177},[1127,2972,1181],{"class":1137},[1127,2974,2976,2978,2980],{"class":1129,"line":2975},14,[1127,2977,1238],{"class":1137},[1127,2979,1178],{"class":1177},[1127,2981,1181],{"class":1137},[1244,2983,2985],{"id":2984},"custom-directories","Custom Directories",[1113,2987,2988,2989,2991],{},"By default, only the ",[1124,2990,1392],{}," directory is scanned. If you want to add other directories, or change how the components are scanned within a subfolder of this directory, you can add additional directories to the configuration:",[1117,2993,2996],{"className":2994,"code":2995,"filename":260,"language":1339,"meta":1340,"style":1122},"language-ts shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","export default defineNuxtConfig({\n  components: [\n    // ~/calendar-module/components/event/Update.vue => \u003CEventUpdate />\n    { path: '~/calendar-module/components' },\n\n    // ~/user-module/components/account/UserDeleteDialog.vue => \u003CUserDeleteDialog />\n    { path: '~/user-module/components', pathPrefix: false },\n\n    // ~/components/special-components/Btn.vue => \u003CSpecialBtn />\n    { path: '~/components/special-components', prefix: 'Special' },\n\n    // It's important that this comes last if you have overrides you wish to apply\n    // to sub-directories of `~/components`.\n    //\n    // ~/components/Btn.vue => \u003CBtn />\n    // ~/components/base/Btn.vue => \u003CBaseBtn />\n    '~/components'\n  ]\n})\n",[1124,2997,2998,3010,3018,3023,3043,3047,3052,3078,3082,3087,3118,3122,3127,3132,3137,3143,3149,3159,3165],{"__ignoreMap":1122},[1127,2999,3000,3002,3004,3006,3008],{"class":1129,"line":1130},[1127,3001,1348],{"class":1347},[1127,3003,1351],{"class":1347},[1127,3005,1355],{"class":1354},[1127,3007,1359],{"class":1358},[1127,3009,1362],{"class":1137},[1127,3011,3012,3014,3016],{"class":1129,"line":1144},[1127,3013,1367],{"class":1177},[1127,3015,1370],{"class":1137},[1127,3017,1373],{"class":1358},[1127,3019,3020],{"class":1129,"line":1155},[1127,3021,3022],{"class":2460},"    // ~/calendar-module/components/event/Update.vue => \u003CEventUpdate />\n",[1127,3024,3025,3028,3031,3033,3035,3038,3040],{"class":1129,"line":1205},[1127,3026,3027],{"class":1137},"    {",[1127,3029,3030],{"class":1177}," path",[1127,3032,1370],{"class":1137},[1127,3034,1388],{"class":1137},[1127,3036,3037],{"class":1391},"~/calendar-module/components",[1127,3039,1395],{"class":1137},[1127,3041,3042],{"class":1137}," },\n",[1127,3044,3045],{"class":1129,"line":1215},[1127,3046,1564],{"emptyLinePlaceholder":1563},[1127,3048,3049],{"class":1129,"line":1225},[1127,3050,3051],{"class":2460},"    // ~/user-module/components/account/UserDeleteDialog.vue => \u003CUserDeleteDialog />\n",[1127,3053,3054,3056,3058,3060,3062,3065,3067,3069,3072,3074,3076],{"class":1129,"line":1235},[1127,3055,3027],{"class":1137},[1127,3057,3030],{"class":1177},[1127,3059,1370],{"class":1137},[1127,3061,1388],{"class":1137},[1127,3063,3064],{"class":1391},"~/user-module/components",[1127,3066,1395],{"class":1137},[1127,3068,1415],{"class":1137},[1127,3070,3071],{"class":1177}," pathPrefix",[1127,3073,1370],{"class":1137},[1127,3075,1412],{"class":1411},[1127,3077,3042],{"class":1137},[1127,3079,3080],{"class":1129,"line":1430},[1127,3081,1564],{"emptyLinePlaceholder":1563},[1127,3083,3084],{"class":1129,"line":1632},[1127,3085,3086],{"class":2460},"    // ~/components/special-components/Btn.vue => \u003CSpecialBtn />\n",[1127,3088,3089,3091,3093,3095,3097,3100,3102,3104,3107,3109,3111,3114,3116],{"class":1129,"line":1652},[1127,3090,3027],{"class":1137},[1127,3092,3030],{"class":1177},[1127,3094,1370],{"class":1137},[1127,3096,1388],{"class":1137},[1127,3098,3099],{"class":1391},"~/components/special-components",[1127,3101,1395],{"class":1137},[1127,3103,1415],{"class":1137},[1127,3105,3106],{"class":1177}," prefix",[1127,3108,1370],{"class":1137},[1127,3110,1388],{"class":1137},[1127,3112,3113],{"class":1391},"Special",[1127,3115,1395],{"class":1137},[1127,3117,3042],{"class":1137},[1127,3119,3120],{"class":1129,"line":1920},[1127,3121,1564],{"emptyLinePlaceholder":1563},[1127,3123,3124],{"class":1129,"line":2485},[1127,3125,3126],{"class":2460},"    // It's important that this comes last if you have overrides you wish to apply\n",[1127,3128,3129],{"class":1129,"line":2966},[1127,3130,3131],{"class":2460},"    // to sub-directories of `~/components`.\n",[1127,3133,3134],{"class":1129,"line":2975},[1127,3135,3136],{"class":2460},"    //\n",[1127,3138,3140],{"class":1129,"line":3139},15,[1127,3141,3142],{"class":2460},"    // ~/components/Btn.vue => \u003CBtn />\n",[1127,3144,3146],{"class":1129,"line":3145},16,[1127,3147,3148],{"class":2460},"    // ~/components/base/Btn.vue => \u003CBaseBtn />\n",[1127,3150,3152,3155,3157],{"class":1129,"line":3151},17,[1127,3153,3154],{"class":1137},"    '",[1127,3156,1392],{"class":1391},[1127,3158,1558],{"class":1137},[1127,3160,3162],{"class":1129,"line":3161},18,[1127,3163,3164],{"class":1358},"  ]\n",[1127,3166,3168,3170],{"class":1129,"line":3167},19,[1127,3169,1433],{"class":1137},[1127,3171,1589],{"class":1358},[1311,3173,3174],{},[1113,3175,3176],{},"Any nested directories need to be added first as they are scanned in order.",[1244,3178,3180],{"id":3179},"npm-packages","npm Packages",[1113,3182,3183,3184,3190,3191,3194],{},"If you want to auto-import components from an npm package, you can use ",[2034,3185,3187],{"href":3186},"/docs/api/kit/components#addcomponent",[1124,3188,3189],{},"addComponent"," in a ",[2034,3192,3193],{"href":200},"local module"," to register them.",[3196,3197,3198,3334],"code-group",{},[1117,3199,3202],{"className":2994,"code":3200,"filename":3201,"language":1339,"meta":1340,"style":1122},"import { addComponent, defineNuxtModule } from '@nuxt/kit'\n\nexport default defineNuxtModule({\n  setup() {\n    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'\n    addComponent({\n      name: 'MyAutoImportedComponent',\n      export: 'MyComponent',\n      filePath: 'my-npm-package',\n    })\n  },\n})\n","~/modules/register-component.ts",[1124,3203,3204,3229,3233,3245,3254,3259,3268,3284,3300,3316,3323,3328],{"__ignoreMap":1122},[1127,3205,3206,3208,3210,3213,3215,3218,3220,3222,3224,3227],{"class":1129,"line":1130},[1127,3207,1539],{"class":1347},[1127,3209,1542],{"class":1137},[1127,3211,3212],{"class":1358}," addComponent",[1127,3214,1415],{"class":1137},[1127,3216,3217],{"class":1358}," defineNuxtModule",[1127,3219,1548],{"class":1137},[1127,3221,1551],{"class":1347},[1127,3223,1388],{"class":1137},[1127,3225,3226],{"class":1391},"@nuxt/kit",[1127,3228,1558],{"class":1137},[1127,3230,3231],{"class":1129,"line":1144},[1127,3232,1564],{"emptyLinePlaceholder":1563},[1127,3234,3235,3237,3239,3241,3243],{"class":1129,"line":1155},[1127,3236,1348],{"class":1347},[1127,3238,1351],{"class":1347},[1127,3240,3217],{"class":1354},[1127,3242,1359],{"class":1358},[1127,3244,1362],{"class":1137},[1127,3246,3247,3250,3252],{"class":1129,"line":1205},[1127,3248,3249],{"class":1177},"  setup",[1127,3251,2452],{"class":1137},[1127,3253,2455],{"class":1137},[1127,3255,3256],{"class":1129,"line":1215},[1127,3257,3258],{"class":2460},"    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'\n",[1127,3260,3261,3264,3266],{"class":1129,"line":1225},[1127,3262,3263],{"class":1354},"    addComponent",[1127,3265,1359],{"class":1177},[1127,3267,1362],{"class":1137},[1127,3269,3270,3273,3275,3277,3280,3282],{"class":1129,"line":1235},[1127,3271,3272],{"class":1177},"      name",[1127,3274,1370],{"class":1137},[1127,3276,1388],{"class":1137},[1127,3278,3279],{"class":1391},"MyAutoImportedComponent",[1127,3281,1395],{"class":1137},[1127,3283,1398],{"class":1137},[1127,3285,3286,3289,3291,3293,3296,3298],{"class":1129,"line":1430},[1127,3287,3288],{"class":1177},"      export",[1127,3290,1370],{"class":1137},[1127,3292,1388],{"class":1137},[1127,3294,3295],{"class":1391},"MyComponent",[1127,3297,1395],{"class":1137},[1127,3299,1398],{"class":1137},[1127,3301,3302,3305,3307,3309,3312,3314],{"class":1129,"line":1632},[1127,3303,3304],{"class":1177},"      filePath",[1127,3306,1370],{"class":1137},[1127,3308,1388],{"class":1137},[1127,3310,3311],{"class":1391},"my-npm-package",[1127,3313,1395],{"class":1137},[1127,3315,1398],{"class":1137},[1127,3317,3318,3321],{"class":1129,"line":1652},[1127,3319,3320],{"class":1137},"    }",[1127,3322,1589],{"class":1177},[1127,3324,3325],{"class":1129,"line":1920},[1127,3326,3327],{"class":1137},"  },\n",[1127,3329,3330,3332],{"class":1129,"line":2485},[1127,3331,1433],{"class":1137},[1127,3333,1589],{"class":1358},[1117,3335,3337],{"className":1463,"code":3336,"filename":248,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!--  the component uses the name we specified and is auto-imported  -->\n    \u003CMyAutoImportedComponent />\n  \u003C/div>\n\u003C/template>\n",[1124,3338,3339,3347,3355,3360,3368,3376],{"__ignoreMap":1122},[1127,3340,3341,3343,3345],{"class":1129,"line":1130},[1127,3342,1174],{"class":1137},[1127,3344,1178],{"class":1177},[1127,3346,1181],{"class":1137},[1127,3348,3349,3351,3353],{"class":1129,"line":1144},[1127,3350,1186],{"class":1137},[1127,3352,1189],{"class":1177},[1127,3354,1181],{"class":1137},[1127,3356,3357],{"class":1129,"line":1155},[1127,3358,3359],{"class":2460},"    \u003C!--  the component uses the name we specified and is auto-imported  -->\n",[1127,3361,3362,3364,3366],{"class":1129,"line":1205},[1127,3363,1196],{"class":1137},[1127,3365,3279],{"class":1177},[1127,3367,1202],{"class":1137},[1127,3369,3370,3372,3374],{"class":1129,"line":1215},[1127,3371,1228],{"class":1137},[1127,3373,1189],{"class":1177},[1127,3375,1181],{"class":1137},[1127,3377,3378,3380,3382],{"class":1129,"line":1225},[1127,3379,1238],{"class":1137},[1127,3381,1178],{"class":1177},[1127,3383,1181],{"class":1137},[1244,3385,3387],{"id":3386},"component-extensions","Component Extensions",[1113,3389,3390,3391,3397,3398,3401],{},"By default, any file with an extension specified in the ",[2034,3392,3394,3395],{"href":3393},"/docs/api/nuxt-config#extensions","extensions key of ",[1124,3396,260],{}," is treated as a component.\nIf you need to restrict the file extensions that should be registered as components, you can use the extended form of the components directory declaration and its ",[1124,3399,3400],{},"extensions"," key:",[1117,3403,3405],{"className":1337,"code":3404,"filename":260,"language":1339,"meta":1340,"style":1122},"export default defineNuxtConfig({\n  components: [\n    {\n      path: '~/components',\n      extensions: ['.vue'], // [!code ++]\n    }\n  ]\n})\n",[1124,3406,3407,3419,3427,3431,3445,3468,3473,3477],{"__ignoreMap":1122},[1127,3408,3409,3411,3413,3415,3417],{"class":1129,"line":1130},[1127,3410,1348],{"class":1347},[1127,3412,1351],{"class":1347},[1127,3414,1355],{"class":1354},[1127,3416,1359],{"class":1358},[1127,3418,1362],{"class":1137},[1127,3420,3421,3423,3425],{"class":1129,"line":1144},[1127,3422,1367],{"class":1177},[1127,3424,1370],{"class":1137},[1127,3426,1373],{"class":1358},[1127,3428,3429],{"class":1129,"line":1155},[1127,3430,1378],{"class":1137},[1127,3432,3433,3435,3437,3439,3441,3443],{"class":1129,"line":1205},[1127,3434,1383],{"class":1177},[1127,3436,1370],{"class":1137},[1127,3438,1388],{"class":1137},[1127,3440,1392],{"class":1391},[1127,3442,1395],{"class":1137},[1127,3444,1398],{"class":1137},[1127,3446,3448,3451,3453,3456,3458,3461,3463,3466],{"class":3447,"line":1215},[1129,1402,1403],[1127,3449,3450],{"class":1177},"      extensions",[1127,3452,1370],{"class":1137},[1127,3454,3455],{"class":1358}," [",[1127,3457,1395],{"class":1137},[1127,3459,3460],{"class":1391},".vue",[1127,3462,1395],{"class":1137},[1127,3464,3465],{"class":1358},"]",[1127,3467,1415],{"class":1137},[1127,3469,3470],{"class":1129,"line":1225},[1127,3471,3472],{"class":1137},"    }\n",[1127,3474,3475],{"class":1129,"line":1235},[1127,3476,3164],{"class":1358},[1127,3478,3479,3481],{"class":1129,"line":1430},[1127,3480,1433],{"class":1137},[1127,3482,1589],{"class":1358},[1244,3484,3486],{"id":3485},"client-components","Client Components",[1113,3488,3489,3490,3493],{},"If a component is meant to be rendered only client-side, you can add the ",[1124,3491,3492],{},".client"," suffix to your component.",[1117,3495,3497],{"className":1119,"code":3496,"filename":159,"language":1121,"meta":1122,"style":1122},"| components/\n--| Comments.client.vue\n",[1124,3498,3499,3505],{"__ignoreMap":1122},[1127,3500,3501,3503],{"class":1129,"line":1130},[1127,3502,1138],{"class":1137},[1127,3504,1141],{"class":1133},[1127,3506,3507,3510,3512],{"class":1129,"line":1144},[1127,3508,3509],{"class":1133},"--",[1127,3511,1138],{"class":1137},[1127,3513,3514],{"class":1133}," Comments.client.vue\n",[1117,3516,3519],{"className":1463,"code":3517,"filename":3518,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- this component will only be rendered on client side -->\n    \u003CComments />\n  \u003C/div>\n\u003C/template>\n","pages/example.vue",[1124,3520,3521,3529,3537,3542,3551,3559],{"__ignoreMap":1122},[1127,3522,3523,3525,3527],{"class":1129,"line":1130},[1127,3524,1174],{"class":1137},[1127,3526,1178],{"class":1177},[1127,3528,1181],{"class":1137},[1127,3530,3531,3533,3535],{"class":1129,"line":1144},[1127,3532,1186],{"class":1137},[1127,3534,1189],{"class":1177},[1127,3536,1181],{"class":1137},[1127,3538,3539],{"class":1129,"line":1155},[1127,3540,3541],{"class":2460},"    \u003C!-- this component will only be rendered on client side -->\n",[1127,3543,3544,3546,3549],{"class":1129,"line":1205},[1127,3545,1196],{"class":1137},[1127,3547,3548],{"class":1177},"Comments",[1127,3550,1202],{"class":1137},[1127,3552,3553,3555,3557],{"class":1129,"line":1215},[1127,3554,1228],{"class":1137},[1127,3556,1189],{"class":1177},[1127,3558,1181],{"class":1137},[1127,3560,3561,3563,3565],{"class":1129,"line":1225},[1127,3562,1238],{"class":1137},[1127,3564,1178],{"class":1177},[1127,3566,1181],{"class":1137},[1311,3568,3569],{},[1113,3570,3571,3572,3574],{},"This feature only works with Nuxt auto-imports and ",[1124,3573,1498],{}," imports. Explicitly importing these components from their real paths does not convert them into client-only components.",[1660,3576,3577],{},[1113,3578,3579,3581,3582,3585,3586,3589,3590,3592],{},[1124,3580,3492],{}," components are rendered only after being mounted. To access the rendered template using ",[1124,3583,3584],{},"onMounted()",", add ",[1124,3587,3588],{},"await nextTick()"," in the callback of the ",[1124,3591,3584],{}," hook.",[2019,3594,3595],{"to":361},[1113,3596,3597,3598,3600],{},"You can also achieve a similar result with the ",[1124,3599,360],{}," component.",[1244,3602,3604],{"id":3603},"server-components","Server Components",[1113,3606,3607],{},"Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.",[1113,3609,3610,3611,1323],{},"Server components can either be used on their own or paired with a ",[2034,3612,3614],{"href":3613},"#paired-with-a-client-component","client component",[1669,3616,3619],{"icon":1671,"target":3617,"to":3618},"_blank","https://www.youtube.com/watch?v=u1yyXe86xJM",[1113,3620,3621],{},"Watch Learn Vue video about Nuxt Server Components.",[1669,3623,3626],{"icon":3624,"target":3617,"to":3625},"i-lucide-newspaper","https://roe.dev/blog/nuxt-server-components",[1113,3627,3628],{},"Read Daniel Roe's guide to Nuxt Server Components.",[1941,3630,3632],{"id":3631},"standalone-server-components","Standalone server components",[1113,3634,3635],{},"Standalone server components will always be rendered on the server, also known as Islands components.",[1113,3637,3638],{},"When their props update, this will result in a network request that will update the rendered HTML in-place.",[1113,3640,3641],{},"Server components are currently experimental and in order to use them, you need to enable the 'component islands' feature in your nuxt.config:",[1117,3643,3645],{"className":2994,"code":3644,"filename":260,"language":1339,"meta":1340,"style":1122},"export default defineNuxtConfig({\n  experimental: {\n    componentIslands: true\n  }\n})\n",[1124,3646,3647,3659,3668,3677,3682],{"__ignoreMap":1122},[1127,3648,3649,3651,3653,3655,3657],{"class":1129,"line":1130},[1127,3650,1348],{"class":1347},[1127,3652,1351],{"class":1347},[1127,3654,1355],{"class":1354},[1127,3656,1359],{"class":1358},[1127,3658,1362],{"class":1137},[1127,3660,3661,3664,3666],{"class":1129,"line":1144},[1127,3662,3663],{"class":1177},"  experimental",[1127,3665,1370],{"class":1137},[1127,3667,2455],{"class":1137},[1127,3669,3670,3673,3675],{"class":1129,"line":1155},[1127,3671,3672],{"class":1177},"    componentIslands",[1127,3674,1370],{"class":1137},[1127,3676,2477],{"class":1411},[1127,3678,3679],{"class":1129,"line":1205},[1127,3680,3681],{"class":1137},"  }\n",[1127,3683,3684,3686],{"class":1129,"line":1215},[1127,3685,1433],{"class":1137},[1127,3687,1589],{"class":1358},[1113,3689,3690,3691,3694],{},"Now you can register server-only components with the ",[1124,3692,3693],{},".server"," suffix and use them anywhere in your application automatically.",[1117,3696,3698],{"className":1119,"code":3697,"filename":159,"language":1121,"meta":1122,"style":1122},"-| components/\n---| HighlightedMarkdown.server.vue\n",[1124,3699,3700,3708],{"__ignoreMap":1122},[1127,3701,3702,3704,3706],{"class":1129,"line":1130},[1127,3703,1134],{"class":1133},[1127,3705,1138],{"class":1137},[1127,3707,1141],{"class":1133},[1127,3709,3710,3712,3714],{"class":1129,"line":1144},[1127,3711,1147],{"class":1133},[1127,3713,1138],{"class":1137},[1127,3715,3716],{"class":1133}," HighlightedMarkdown.server.vue\n",[1117,3718,3720],{"className":1463,"code":3719,"filename":3518,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!--\n      this will automatically be rendered on the server, meaning your markdown parsing + highlighting\n      libraries are not included in your client bundle.\n     -->\n    \u003CHighlightedMarkdown markdown=\"# Headline\" />\n  \u003C/div>\n\u003C/template>\n",[1124,3721,3722,3730,3738,3743,3748,3753,3758,3779,3787],{"__ignoreMap":1122},[1127,3723,3724,3726,3728],{"class":1129,"line":1130},[1127,3725,1174],{"class":1137},[1127,3727,1178],{"class":1177},[1127,3729,1181],{"class":1137},[1127,3731,3732,3734,3736],{"class":1129,"line":1144},[1127,3733,1186],{"class":1137},[1127,3735,1189],{"class":1177},[1127,3737,1181],{"class":1137},[1127,3739,3740],{"class":1129,"line":1155},[1127,3741,3742],{"class":2460},"    \u003C!--\n",[1127,3744,3745],{"class":1129,"line":1205},[1127,3746,3747],{"class":2460},"      this will automatically be rendered on the server, meaning your markdown parsing + highlighting\n",[1127,3749,3750],{"class":1129,"line":1215},[1127,3751,3752],{"class":2460},"      libraries are not included in your client bundle.\n",[1127,3754,3755],{"class":1129,"line":1225},[1127,3756,3757],{"class":2460},"     -->\n",[1127,3759,3760,3762,3765,3768,3770,3772,3775,3777],{"class":1129,"line":1235},[1127,3761,1196],{"class":1137},[1127,3763,3764],{"class":1177},"HighlightedMarkdown",[1127,3766,3767],{"class":1475}," markdown",[1127,3769,1479],{"class":1137},[1127,3771,1482],{"class":1137},[1127,3773,3774],{"class":1391},"# Headline",[1127,3776,1482],{"class":1137},[1127,3778,1202],{"class":1137},[1127,3780,3781,3783,3785],{"class":1129,"line":1430},[1127,3782,1228],{"class":1137},[1127,3784,1189],{"class":1177},[1127,3786,1181],{"class":1137},[1127,3788,3789,3791,3793],{"class":1129,"line":1632},[1127,3790,1238],{"class":1137},[1127,3792,1178],{"class":1177},[1127,3794,1181],{"class":1137},[1113,3796,3797,3798,3802,3803,3806,3807,3810],{},"Server-only components use ",[2034,3799,3800],{"href":410},[1124,3801,409],{}," under the hood, meaning that ",[1124,3804,3805],{},"lazy"," prop and ",[1124,3808,3809],{},"#fallback"," slot are both passed down to it.",[1949,3812,3813],{},[1113,3814,3815],{},"Server components (and islands) must have a single root element. (HTML comments are considered elements as well.)",[1949,3817,3818],{},[1113,3819,3820],{},"Be careful when nesting islands within other islands as each island adds some extra overhead.",[1949,3822,3823],{},[1113,3824,3825],{},"Most features for server-only components and island components, such as slots and client components, are only available for single file components.",[1961,3827,3829],{"id":3828},"client-components-within-server-components","Client components within server components",[1311,3831,3832],{},[1113,3833,3834,3835,3838],{},"This feature needs ",[1124,3836,3837],{},"experimental.componentIslands.selectiveClient"," within your configuration to be true.",[1113,3840,3841,3842,3845],{},"You can partially hydrate a component by setting a ",[1124,3843,3844],{},"nuxt-client"," attribute on the component you wish to be loaded client-side.",[1117,3847,3850],{"className":1463,"code":3848,"filename":3849,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CHighlightedMarkdown markdown=\"# Headline\" />\n    \u003C!-- Counter will be loaded and hydrated client-side -->\n    \u003CCounter nuxt-client :count=\"5\" />\n  \u003C/div>\n\u003C/template>\n","components/ServerWithClient.vue",[1124,3851,3852,3860,3868,3886,3891,3915,3923],{"__ignoreMap":1122},[1127,3853,3854,3856,3858],{"class":1129,"line":1130},[1127,3855,1174],{"class":1137},[1127,3857,1178],{"class":1177},[1127,3859,1181],{"class":1137},[1127,3861,3862,3864,3866],{"class":1129,"line":1144},[1127,3863,1186],{"class":1137},[1127,3865,1189],{"class":1177},[1127,3867,1181],{"class":1137},[1127,3869,3870,3872,3874,3876,3878,3880,3882,3884],{"class":1129,"line":1155},[1127,3871,1196],{"class":1137},[1127,3873,3764],{"class":1177},[1127,3875,3767],{"class":1475},[1127,3877,1479],{"class":1137},[1127,3879,1482],{"class":1137},[1127,3881,3774],{"class":1391},[1127,3883,1482],{"class":1137},[1127,3885,1202],{"class":1137},[1127,3887,3888],{"class":1129,"line":1205},[1127,3889,3890],{"class":2460},"    \u003C!-- Counter will be loaded and hydrated client-side -->\n",[1127,3892,3893,3895,3898,3901,3904,3906,3908,3911,3913],{"class":1129,"line":1215},[1127,3894,1196],{"class":1137},[1127,3896,3897],{"class":1177},"Counter",[1127,3899,3900],{"class":1475}," nuxt-client",[1127,3902,3903],{"class":1475}," :count",[1127,3905,1479],{"class":1137},[1127,3907,1482],{"class":1137},[1127,3909,3910],{"class":1391},"5",[1127,3912,1482],{"class":1137},[1127,3914,1202],{"class":1137},[1127,3916,3917,3919,3921],{"class":1129,"line":1225},[1127,3918,1228],{"class":1137},[1127,3920,1189],{"class":1177},[1127,3922,1181],{"class":1137},[1127,3924,3925,3927,3929],{"class":1129,"line":1235},[1127,3926,1238],{"class":1137},[1127,3928,1178],{"class":1177},[1127,3930,1181],{"class":1137},[1311,3932,3933],{},[1113,3934,3935,3936,3939,3940,3943],{},"This only works within a server component. Slots for client components are working only with ",[1124,3937,3938],{},"experimental.componentIsland.selectiveClient"," set to ",[1124,3941,3942],{},"'deep'"," and since they are rendered server-side, they are not interactive once client-side.",[1961,3945,3947],{"id":3946},"server-component-context","Server Component Context",[1113,3949,3950,3951,3953,3954,3957],{},"When rendering a server-only or island component, ",[1124,3952,409],{}," makes a fetch request which comes back with a ",[1124,3955,3956],{},"NuxtIslandResponse",". (This is an internal request if rendered on the server, or a request that you can see in the network tab if it's rendering on client-side navigation.)",[1113,3959,3960],{},"This means:",[2731,3962,3963,3968,3971,3979],{},[2697,3964,3965,3966,1323],{},"A new Vue app will be created server-side to create the ",[1124,3967,3956],{},[2697,3969,3970],{},"A new 'island context' will be created while rendering the component.",[2697,3972,3973,3974,3978],{},"You can't access the 'island context' from the rest of your app and you can't access the context of the rest of your app from the island component. In other words, the server component or island is ",[3975,3976,3977],"em",{},"isolated"," from the rest of your app.",[2697,3980,3981,3982,3985],{},"Your plugins will run again when rendering the island, unless they have ",[1124,3983,3984],{},"env: { islands: false }"," set (which you can do in an object-syntax plugin).",[1113,3987,3988,3989,3992],{},"Within an island component, you can access its island context through ",[1124,3990,3991],{},"nuxtApp.ssrContext.islandContext",". Note that while island components are still marked as experimental, the format of this context may change.",[1311,3994,3995],{},[1113,3996,3997,3998,4001,4002],{},"Slots can be interactive and are wrapped within a ",[1124,3999,4000],{},"\u003Cdiv>"," with ",[1124,4003,4004],{},"display: contents;",[1941,4006,4008],{"id":4007},"paired-with-a-client-component","Paired with a Client component",[1113,4010,4011,4012,4014,4015,4017],{},"In this case, the ",[1124,4013,3693],{}," + ",[1124,4016,3492],{}," components are two 'halves' of a component and can be used in advanced use cases for separate implementations of a component on server and client side.",[1117,4019,4021],{"className":1119,"code":4020,"filename":159,"language":1121,"meta":1122,"style":1122},"-| components/\n---| Comments.client.vue\n---| Comments.server.vue\n",[1124,4022,4023,4031,4039],{"__ignoreMap":1122},[1127,4024,4025,4027,4029],{"class":1129,"line":1130},[1127,4026,1134],{"class":1133},[1127,4028,1138],{"class":1137},[1127,4030,1141],{"class":1133},[1127,4032,4033,4035,4037],{"class":1129,"line":1144},[1127,4034,1147],{"class":1133},[1127,4036,1138],{"class":1137},[1127,4038,3514],{"class":1133},[1127,4040,4041,4043,4045],{"class":1129,"line":1155},[1127,4042,1147],{"class":1133},[1127,4044,1138],{"class":1137},[1127,4046,4047],{"class":1133}," Comments.server.vue\n",[1117,4049,4051],{"className":1463,"code":4050,"filename":3518,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- this component will render Comments.server on the server then Comments.client once mounted in the browser -->\n    \u003CComments />\n  \u003C/div>\n\u003C/template>\n",[1124,4052,4053,4061,4069,4074,4082,4090],{"__ignoreMap":1122},[1127,4054,4055,4057,4059],{"class":1129,"line":1130},[1127,4056,1174],{"class":1137},[1127,4058,1178],{"class":1177},[1127,4060,1181],{"class":1137},[1127,4062,4063,4065,4067],{"class":1129,"line":1144},[1127,4064,1186],{"class":1137},[1127,4066,1189],{"class":1177},[1127,4068,1181],{"class":1137},[1127,4070,4071],{"class":1129,"line":1155},[1127,4072,4073],{"class":2460},"    \u003C!-- this component will render Comments.server on the server then Comments.client once mounted in the browser -->\n",[1127,4075,4076,4078,4080],{"class":1129,"line":1205},[1127,4077,1196],{"class":1137},[1127,4079,3548],{"class":1177},[1127,4081,1202],{"class":1137},[1127,4083,4084,4086,4088],{"class":1129,"line":1215},[1127,4085,1228],{"class":1137},[1127,4087,1189],{"class":1177},[1127,4089,1181],{"class":1137},[1127,4091,4092,4094,4096],{"class":1129,"line":1225},[1127,4093,1238],{"class":1137},[1127,4095,1178],{"class":1177},[1127,4097,1181],{"class":1137},[1244,4099,4101],{"id":4100},"built-in-nuxt-components","Built-In Nuxt Components",[1113,4103,4104,4105,2184,4107,4109],{},"There are a number of components that Nuxt provides, including ",[1124,4106,360],{},[1124,4108,364],{},". You can read more about them in the API documentation.",[2019,4111],{"to":349},[1244,4113,4115],{"id":4114},"library-authors","Library Authors",[1113,4117,4118],{},"Making Vue component libraries with automatic tree-shaking and component registration is super easy. ✨",[1113,4120,4121,4122,4125],{},"You can use the ",[1124,4123,4124],{},"components:dirs"," hook to extend the directory list without requiring user configuration in your Nuxt module.",[1113,4127,4128],{},"Imagine a directory structure like this:",[1117,4130,4132],{"className":1119,"code":4131,"filename":159,"language":1121,"meta":1122,"style":1122},"-| node_modules/\n---| awesome-ui/\n-----| components/\n-------| Alert.vue\n-------| Button.vue\n-----| nuxt.js\n-| pages/\n---| index.vue\n-| nuxt.config.js\n",[1124,4133,4134,4143,4152,4160,4169,4177,4186,4195,4204],{"__ignoreMap":1122},[1127,4135,4136,4138,4140],{"class":1129,"line":1130},[1127,4137,1134],{"class":1133},[1127,4139,1138],{"class":1137},[1127,4141,4142],{"class":1133}," node_modules/\n",[1127,4144,4145,4147,4149],{"class":1129,"line":1144},[1127,4146,1147],{"class":1133},[1127,4148,1138],{"class":1137},[1127,4150,4151],{"class":1133}," awesome-ui/\n",[1127,4153,4154,4156,4158],{"class":1129,"line":1155},[1127,4155,1277],{"class":1133},[1127,4157,1138],{"class":1137},[1127,4159,1141],{"class":1133},[1127,4161,4162,4164,4166],{"class":1129,"line":1205},[1127,4163,1287],{"class":1133},[1127,4165,1138],{"class":1137},[1127,4167,4168],{"class":1133}," Alert.vue\n",[1127,4170,4171,4173,4175],{"class":1129,"line":1215},[1127,4172,1287],{"class":1133},[1127,4174,1138],{"class":1137},[1127,4176,1292],{"class":1133},[1127,4178,4179,4181,4183],{"class":1129,"line":1225},[1127,4180,1277],{"class":1133},[1127,4182,1138],{"class":1137},[1127,4184,4185],{"class":1133}," nuxt.js\n",[1127,4187,4188,4190,4192],{"class":1129,"line":1235},[1127,4189,1134],{"class":1133},[1127,4191,1138],{"class":1137},[1127,4193,4194],{"class":1133}," pages/\n",[1127,4196,4197,4199,4201],{"class":1129,"line":1430},[1127,4198,1147],{"class":1133},[1127,4200,1138],{"class":1137},[1127,4202,4203],{"class":1133}," index.vue\n",[1127,4205,4206,4208,4210],{"class":1129,"line":1632},[1127,4207,1134],{"class":1133},[1127,4209,1138],{"class":1137},[1127,4211,4212],{"class":1133}," nuxt.config.js\n",[1113,4214,4215,4216,4219,4220,4222],{},"Then in ",[1124,4217,4218],{},"awesome-ui/nuxt.js"," you can use the ",[1124,4221,4124],{}," hook:",[1117,4224,4226],{"className":2994,"code":4225,"language":1339,"meta":1340,"style":1122},"import { defineNuxtModule, createResolver } from '@nuxt/kit'\n\nexport default defineNuxtModule({\n  hooks: {\n    'components:dirs': (dirs) => {\n      const { resolve } = createResolver(import.meta.url)\n      // Add ./components dir to the list\n      dirs.push({\n        path: resolve('./components'),\n        prefix: 'awesome'\n      })\n    }\n  }\n})\n",[1124,4227,4228,4251,4255,4267,4276,4300,4332,4337,4351,4373,4387,4394,4398,4402],{"__ignoreMap":1122},[1127,4229,4230,4232,4234,4236,4238,4241,4243,4245,4247,4249],{"class":1129,"line":1130},[1127,4231,1539],{"class":1347},[1127,4233,1542],{"class":1137},[1127,4235,3217],{"class":1358},[1127,4237,1415],{"class":1137},[1127,4239,4240],{"class":1358}," createResolver",[1127,4242,1548],{"class":1137},[1127,4244,1551],{"class":1347},[1127,4246,1388],{"class":1137},[1127,4248,3226],{"class":1391},[1127,4250,1558],{"class":1137},[1127,4252,4253],{"class":1129,"line":1144},[1127,4254,1564],{"emptyLinePlaceholder":1563},[1127,4256,4257,4259,4261,4263,4265],{"class":1129,"line":1155},[1127,4258,1348],{"class":1347},[1127,4260,1351],{"class":1347},[1127,4262,3217],{"class":1354},[1127,4264,1359],{"class":1358},[1127,4266,1362],{"class":1137},[1127,4268,4269,4272,4274],{"class":1129,"line":1205},[1127,4270,4271],{"class":1177},"  hooks",[1127,4273,1370],{"class":1137},[1127,4275,2455],{"class":1137},[1127,4277,4278,4280,4282,4284,4286,4289,4293,4295,4298],{"class":1129,"line":1215},[1127,4279,3154],{"class":1137},[1127,4281,4124],{"class":1177},[1127,4283,1395],{"class":1137},[1127,4285,1370],{"class":1137},[1127,4287,4288],{"class":1137}," (",[1127,4290,4292],{"class":4291},"ssYd4","dirs",[1127,4294,1436],{"class":1137},[1127,4296,4297],{"class":1475}," =>",[1127,4299,2455],{"class":1137},[1127,4301,4302,4305,4307,4310,4312,4314,4316,4318,4320,4322,4325,4327,4330],{"class":1129,"line":1225},[1127,4303,4304],{"class":1475},"      const",[1127,4306,1542],{"class":1137},[1127,4308,4309],{"class":1358}," resolve",[1127,4311,1548],{"class":1137},[1127,4313,2474],{"class":1137},[1127,4315,4240],{"class":1354},[1127,4317,1359],{"class":1177},[1127,4319,1539],{"class":1347},[1127,4321,1323],{"class":1137},[1127,4323,4324],{"class":1358},"meta",[1127,4326,1323],{"class":1137},[1127,4328,4329],{"class":1358},"url",[1127,4331,1589],{"class":1177},[1127,4333,4334],{"class":1129,"line":1235},[1127,4335,4336],{"class":2460},"      // Add ./components dir to the list\n",[1127,4338,4339,4342,4344,4347,4349],{"class":1129,"line":1430},[1127,4340,4341],{"class":1358},"      dirs",[1127,4343,1323],{"class":1137},[1127,4345,4346],{"class":1354},"push",[1127,4348,1359],{"class":1177},[1127,4350,1362],{"class":1137},[1127,4352,4353,4356,4358,4360,4362,4364,4367,4369,4371],{"class":1129,"line":1632},[1127,4354,4355],{"class":1177},"        path",[1127,4357,1370],{"class":1137},[1127,4359,4309],{"class":1354},[1127,4361,1359],{"class":1177},[1127,4363,1395],{"class":1137},[1127,4365,4366],{"class":1391},"./components",[1127,4368,1395],{"class":1137},[1127,4370,1436],{"class":1177},[1127,4372,1398],{"class":1137},[1127,4374,4375,4378,4380,4382,4385],{"class":1129,"line":1652},[1127,4376,4377],{"class":1177},"        prefix",[1127,4379,1370],{"class":1137},[1127,4381,1388],{"class":1137},[1127,4383,4384],{"class":1391},"awesome",[1127,4386,1558],{"class":1137},[1127,4388,4389,4392],{"class":1129,"line":1920},[1127,4390,4391],{"class":1137},"      }",[1127,4393,1589],{"class":1177},[1127,4395,4396],{"class":1129,"line":2485},[1127,4397,3472],{"class":1137},[1127,4399,4400],{"class":1129,"line":2966},[1127,4401,3681],{"class":1137},[1127,4403,4404,4406],{"class":1129,"line":2975},[1127,4405,1433],{"class":1137},[1127,4407,1589],{"class":1358},[1113,4409,4410,4411,4414],{},"That's it! Now in your project, you can import your UI library as a Nuxt module in your ",[1124,4412,4413],{},"nuxt.config"," file:",[1117,4416,4418],{"className":2994,"code":4417,"filename":260,"language":1339,"meta":1340,"style":1122},"export default defineNuxtConfig({\n  modules: ['awesome-ui/nuxt']\n})\n",[1124,4419,4420,4432,4451],{"__ignoreMap":1122},[1127,4421,4422,4424,4426,4428,4430],{"class":1129,"line":1130},[1127,4423,1348],{"class":1347},[1127,4425,1351],{"class":1347},[1127,4427,1355],{"class":1354},[1127,4429,1359],{"class":1358},[1127,4431,1362],{"class":1137},[1127,4433,4434,4437,4439,4441,4443,4446,4448],{"class":1129,"line":1144},[1127,4435,4436],{"class":1177},"  modules",[1127,4438,1370],{"class":1137},[1127,4440,3455],{"class":1358},[1127,4442,1395],{"class":1137},[1127,4444,4445],{"class":1391},"awesome-ui/nuxt",[1127,4447,1395],{"class":1137},[1127,4449,4450],{"class":1358},"]\n",[1127,4452,4453,4455],{"class":1129,"line":1155},[1127,4454,1433],{"class":1137},[1127,4456,1589],{"class":1358},[1113,4458,4459,4460,4463,4464,1370],{},"... and directly use the module components (prefixed with ",[1124,4461,4462],{},"awesome-",") in our ",[1124,4465,1509],{},[1117,4467,4469],{"className":1463,"code":4468,"language":1464,"meta":1122,"style":1122},"\u003Ctemplate>\n  \u003Cdiv>\n    My \u003CAwesomeButton>UI button\u003C/AwesomeButton>!\n    \u003Cawesome-alert>Here's an alert!\u003C/awesome-alert>\n  \u003C/div>\n\u003C/template>\n",[1124,4470,4471,4479,4487,4511,4529,4537],{"__ignoreMap":1122},[1127,4472,4473,4475,4477],{"class":1129,"line":1130},[1127,4474,1174],{"class":1137},[1127,4476,1178],{"class":1177},[1127,4478,1181],{"class":1137},[1127,4480,4481,4483,4485],{"class":1129,"line":1144},[1127,4482,1186],{"class":1137},[1127,4484,1189],{"class":1177},[1127,4486,1181],{"class":1137},[1127,4488,4489,4492,4494,4497,4499,4502,4504,4506,4508],{"class":1129,"line":1155},[1127,4490,4491],{"class":1358},"    My ",[1127,4493,1174],{"class":1137},[1127,4495,4496],{"class":1177},"AwesomeButton",[1127,4498,1490],{"class":1137},[1127,4500,4501],{"class":1358},"UI button",[1127,4503,1238],{"class":1137},[1127,4505,4496],{"class":1177},[1127,4507,1490],{"class":1137},[1127,4509,4510],{"class":1358},"!\n",[1127,4512,4513,4515,4518,4520,4523,4525,4527],{"class":1129,"line":1205},[1127,4514,1196],{"class":1137},[1127,4516,4517],{"class":1177},"awesome-alert",[1127,4519,1490],{"class":1137},[1127,4521,4522],{"class":1358},"Here's an alert!",[1127,4524,1238],{"class":1137},[1127,4526,4517],{"class":1177},[1127,4528,1181],{"class":1137},[1127,4530,4531,4533,4535],{"class":1129,"line":1215},[1127,4532,1228],{"class":1137},[1127,4534,1189],{"class":1177},[1127,4536,1181],{"class":1137},[1127,4538,4539,4541,4543],{"class":1129,"line":1225},[1127,4540,1238],{"class":1137},[1127,4542,1178],{"class":1177},[1127,4544,1181],{"class":1137},[1113,4546,4547,4548,1323],{},"It will automatically import the components only if used and also support HMR when updating your components in ",[1124,4549,4550],{},"node_modules/awesome-ui/components/",[4552,4553],"link-example",{"to":821},[4555,4556,4557],"style",{},"html pre.shiki code .sT2Ow, html code.shiki .sT2Ow{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sYp4K, html code.shiki .sYp4K{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}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 .sQ5dg, html code.shiki .sQ5dg{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sRBFq, html code.shiki .sRBFq{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .spdxX, html code.shiki .spdxX{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s5UST, html code.shiki .s5UST{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sFVN2, html code.shiki .sFVN2{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .szd4z, html code.shiki .szd4z{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}html pre.shiki code .sagxc, html code.shiki .sagxc{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .svXlt, html code.shiki .svXlt{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .ssYd4, html code.shiki .ssYd4{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":1122,"searchDepth":1144,"depth":1144,"links":4559},[4560,4561,4562,4563,4568,4569,4570,4571,4572,4573,4577,4578],{"id":1246,"depth":1144,"text":1247},{"id":1456,"depth":1144,"text":1457},{"id":1744,"depth":1144,"text":1745},{"id":1929,"depth":1144,"text":1930,"children":4564},[4565,4566,4567],{"id":1943,"depth":1155,"text":1944},{"id":2550,"depth":1155,"text":2551},{"id":2688,"depth":1155,"text":2689},{"id":2759,"depth":1144,"text":2760},{"id":2984,"depth":1144,"text":2985},{"id":3179,"depth":1144,"text":3180},{"id":3386,"depth":1144,"text":3387},{"id":3485,"depth":1144,"text":3486},{"id":3603,"depth":1144,"text":3604,"children":4574},[4575,4576],{"id":3631,"depth":1155,"text":3632},{"id":4007,"depth":1155,"text":4008},{"id":4100,"depth":1144,"text":4101},{"id":4114,"depth":1144,"text":4115},"The components/ directory is where you put all your Vue components.","md",{"head":4582},{"title":4583},"components/",{"icon":169},{"title":179,"description":4579},"H1WFxsHta8",[4588,4590],{"title":175,"path":176,"stem":177,"description":4589,"icon":169,"children":-1},"The assets/ directory is used to add all the website's assets that the build tool will process.",{"title":183,"path":184,"stem":185,"description":4591,"icon":169,"children":-1},"Use the composables/ directory to auto-import your Vue composables into your application.",1742651358962]