[{"data":1,"prerenderedAt":4798},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-styling":1107,"-docs-getting-started-styling-surround":4793},[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":44,"body":1109,"description":4787,"extension":4788,"links":6,"meta":4789,"navigation":4790,"path":45,"seo":4791,"stem":46,"titleTemplate":6,"__hash__":4792},"docs/docs/1.getting-started/06.styling.md",{"type":1110,"value":1111,"toc":4754},"minimal",[1112,1116,1121,1133,1138,1150,1288,1294,1298,1310,1361,1366,1370,1384,1492,1495,1548,1552,1559,1623,1626,1693,1696,1735,1739,1742,1752,1847,1851,1854,1857,1913,1925,1929,1932,1939,2047,2055,2059,2062,2116,2125,2165,2171,2211,2216,2230,2236,2292,2299,2482,2490,2494,2503,2508,2573,2584,2588,2596,2605,2609,2612,3448,3456,3463,3466,3616,3620,3623,3718,3722,3734,3833,3837,3840,3990,4009,4013,4019,4097,4100,4137,4140,4182,4186,4189,4308,4310,4314,4328,4336,4381,4396,4400,4408,4422,4425,4428,4439,4441,4445,4458,4463,4467,4470,4484,4491,4494,4751],[1113,1114,1115],"p",{},"Nuxt is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets.\nYou can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to style your application.",[1117,1118,1120],"h2",{"id":1119},"local-stylesheets","Local Stylesheets",[1113,1122,1123,1124,1132],{},"If you're writing local stylesheets, the natural place to put them is the ",[1125,1126,1127,1131],"a",{"href":176},[1128,1129,1130],"code",{},"assets/"," directory",".",[1134,1135,1137],"h3",{"id":1136},"importing-within-components","Importing Within Components",[1113,1139,1140,1141,1132],{},"You can import stylesheets in your pages, layouts and components directly.\nYou can use a javascript import, or a css ",[1125,1142,1146,1149],{"href":1143,"rel":1144},"https://developer.mozilla.org/en-US/docs/Web/CSS/@import",[1145],"nofollow",[1128,1147,1148],{},"@import"," statement",[1151,1152,1158],"pre",{"className":1153,"code":1154,"filename":1155,"language":1156,"meta":1157,"style":1157},"language-vue shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003Cscript>\n// Use a static import for server-side compatibility\nimport '~/assets/css/first.css'\n\n// Caution: Dynamic imports are not server-side compatible\nimport('~/assets/css/first.css')\n\u003C/script>\n\n\u003Cstyle>\n@import url(\"~/assets/css/second.css\");\n\u003C/style>\n","pages/index.vue","vue","",[1128,1159,1160,1176,1183,1200,1207,1213,1232,1242,1247,1257,1279],{"__ignoreMap":1157},[1161,1162,1165,1169,1173],"span",{"class":1163,"line":1164},"line",1,[1161,1166,1168],{"class":1167},"sYp4K","\u003C",[1161,1170,1172],{"class":1171},"sQ5dg","script",[1161,1174,1175],{"class":1167},">\n",[1161,1177,1179],{"class":1163,"line":1178},2,[1161,1180,1182],{"class":1181},"svXlt","// Use a static import for server-side compatibility\n",[1161,1184,1186,1190,1193,1197],{"class":1163,"line":1185},3,[1161,1187,1189],{"class":1188},"sFVN2","import",[1161,1191,1192],{"class":1167}," '",[1161,1194,1196],{"class":1195},"s5UST","~/assets/css/first.css",[1161,1198,1199],{"class":1167},"'\n",[1161,1201,1203],{"class":1163,"line":1202},4,[1161,1204,1206],{"emptyLinePlaceholder":1205},true,"\n",[1161,1208,1210],{"class":1163,"line":1209},5,[1161,1211,1212],{"class":1181},"// Caution: Dynamic imports are not server-side compatible\n",[1161,1214,1216,1218,1222,1225,1227,1229],{"class":1163,"line":1215},6,[1161,1217,1189],{"class":1167},[1161,1219,1221],{"class":1220},"spdxX","(",[1161,1223,1224],{"class":1167},"'",[1161,1226,1196],{"class":1195},[1161,1228,1224],{"class":1167},[1161,1230,1231],{"class":1220},")\n",[1161,1233,1235,1238,1240],{"class":1163,"line":1234},7,[1161,1236,1237],{"class":1167},"\u003C/",[1161,1239,1172],{"class":1171},[1161,1241,1175],{"class":1167},[1161,1243,1245],{"class":1163,"line":1244},8,[1161,1246,1206],{"emptyLinePlaceholder":1205},[1161,1248,1250,1252,1255],{"class":1163,"line":1249},9,[1161,1251,1168],{"class":1167},[1161,1253,1254],{"class":1171},"style",[1161,1256,1175],{"class":1167},[1161,1258,1260,1262,1266,1268,1271,1274,1276],{"class":1163,"line":1259},10,[1161,1261,1148],{"class":1188},[1161,1263,1265],{"class":1264},"szd4z"," url",[1161,1267,1221],{"class":1167},[1161,1269,1270],{"class":1167},"\"",[1161,1272,1273],{"class":1195},"~/assets/css/second.css",[1161,1275,1270],{"class":1167},[1161,1277,1278],{"class":1167},");\n",[1161,1280,1282,1284,1286],{"class":1163,"line":1281},11,[1161,1283,1237],{"class":1167},[1161,1285,1254],{"class":1171},[1161,1287,1175],{"class":1167},[1289,1290,1291],"tip",{},[1113,1292,1293],{},"The stylesheets will be inlined in the HTML rendered by Nuxt.",[1134,1295,1297],{"id":1296},"the-css-property","The CSS Property",[1113,1299,1300,1301,1304,1305,1309],{},"You can also use the ",[1128,1302,1303],{},"css"," property in the Nuxt configuration.\nThe natural place for your stylesheets is the ",[1125,1306,1307,1131],{"href":176},[1128,1308,1130],{},". You can then reference its path and Nuxt will include it to all the pages of your application.",[1151,1311,1315],{"className":1312,"code":1313,"filename":260,"language":1314,"meta":1157,"style":1157},"language-ts shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","export default defineNuxtConfig({\n  css: ['~/assets/css/main.css']\n})\n","ts",[1128,1316,1317,1333,1354],{"__ignoreMap":1157},[1161,1318,1319,1322,1325,1328,1330],{"class":1163,"line":1164},[1161,1320,1321],{"class":1188},"export",[1161,1323,1324],{"class":1188}," default",[1161,1326,1327],{"class":1264}," defineNuxtConfig",[1161,1329,1221],{"class":1220},[1161,1331,1332],{"class":1167},"{\n",[1161,1334,1335,1338,1341,1344,1346,1349,1351],{"class":1163,"line":1178},[1161,1336,1337],{"class":1171},"  css",[1161,1339,1340],{"class":1167},":",[1161,1342,1343],{"class":1220}," [",[1161,1345,1224],{"class":1167},[1161,1347,1348],{"class":1195},"~/assets/css/main.css",[1161,1350,1224],{"class":1167},[1161,1352,1353],{"class":1220},"]\n",[1161,1355,1356,1359],{"class":1163,"line":1185},[1161,1357,1358],{"class":1167},"}",[1161,1360,1231],{"class":1220},[1289,1362,1363],{},[1113,1364,1365],{},"The stylesheets will be inlined in the HTML rendered by Nuxt, injected globally and present in all pages.",[1134,1367,1369],{"id":1368},"working-with-fonts","Working With Fonts",[1113,1371,1372,1373,1376,1377,1380,1381,1132],{},"Place your local fonts files in your ",[1128,1374,1375],{},"~/public/"," directory, for example in ",[1128,1378,1379],{},"~/public/fonts",". You can then reference them in your stylesheets using ",[1128,1382,1383],{},"url()",[1151,1385,1389],{"className":1386,"code":1387,"filename":1388,"language":1303,"meta":1157,"style":1157},"language-css shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","@font-face {\n  font-family: 'FarAwayGalaxy';\n  src: url('/fonts/FarAwayGalaxy.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}\n","assets/css/main.css",[1128,1390,1391,1399,1417,1452,1464,1475,1487],{"__ignoreMap":1157},[1161,1392,1393,1396],{"class":1163,"line":1164},[1161,1394,1395],{"class":1188},"@font-face",[1161,1397,1398],{"class":1167}," {\n",[1161,1400,1401,1405,1407,1409,1412,1414],{"class":1163,"line":1178},[1161,1402,1404],{"class":1403},"sACJC","  font-family",[1161,1406,1340],{"class":1167},[1161,1408,1192],{"class":1167},[1161,1410,1411],{"class":1195},"FarAwayGalaxy",[1161,1413,1224],{"class":1167},[1161,1415,1416],{"class":1167},";\n",[1161,1418,1419,1422,1424,1426,1428,1430,1433,1435,1438,1441,1443,1445,1448,1450],{"class":1163,"line":1185},[1161,1420,1421],{"class":1403},"  src",[1161,1423,1340],{"class":1167},[1161,1425,1265],{"class":1264},[1161,1427,1221],{"class":1167},[1161,1429,1224],{"class":1167},[1161,1431,1432],{"class":1195},"/fonts/FarAwayGalaxy.woff",[1161,1434,1224],{"class":1167},[1161,1436,1437],{"class":1167},")",[1161,1439,1440],{"class":1264}," format",[1161,1442,1221],{"class":1167},[1161,1444,1224],{"class":1167},[1161,1446,1447],{"class":1195},"woff",[1161,1449,1224],{"class":1167},[1161,1451,1278],{"class":1167},[1161,1453,1454,1457,1459,1462],{"class":1163,"line":1202},[1161,1455,1456],{"class":1403},"  font-weight",[1161,1458,1340],{"class":1167},[1161,1460,1461],{"class":1220}," normal",[1161,1463,1416],{"class":1167},[1161,1465,1466,1469,1471,1473],{"class":1163,"line":1209},[1161,1467,1468],{"class":1403},"  font-style",[1161,1470,1340],{"class":1167},[1161,1472,1461],{"class":1220},[1161,1474,1416],{"class":1167},[1161,1476,1477,1480,1482,1485],{"class":1163,"line":1215},[1161,1478,1479],{"class":1403},"  font-display",[1161,1481,1340],{"class":1167},[1161,1483,1484],{"class":1220}," swap",[1161,1486,1416],{"class":1167},[1161,1488,1489],{"class":1163,"line":1234},[1161,1490,1491],{"class":1167},"}\n",[1113,1493,1494],{},"Then reference your fonts by name in your stylesheets, pages or components:",[1151,1496,1498],{"className":1153,"code":1497,"language":1156,"meta":1157,"style":1157},"\u003Cstyle>\nh1 {\n  font-family: 'FarAwayGalaxy', sans-serif;\n}\n\u003C/style>\n",[1128,1499,1500,1508,1516,1536,1540],{"__ignoreMap":1157},[1161,1501,1502,1504,1506],{"class":1163,"line":1164},[1161,1503,1168],{"class":1167},[1161,1505,1254],{"class":1171},[1161,1507,1175],{"class":1167},[1161,1509,1510,1514],{"class":1163,"line":1178},[1161,1511,1513],{"class":1512},"sT2Ow","h1",[1161,1515,1398],{"class":1167},[1161,1517,1518,1520,1522,1524,1526,1528,1531,1534],{"class":1163,"line":1185},[1161,1519,1404],{"class":1403},[1161,1521,1340],{"class":1167},[1161,1523,1192],{"class":1167},[1161,1525,1411],{"class":1195},[1161,1527,1224],{"class":1167},[1161,1529,1530],{"class":1167},",",[1161,1532,1533],{"class":1220}," sans-serif",[1161,1535,1416],{"class":1167},[1161,1537,1538],{"class":1163,"line":1202},[1161,1539,1491],{"class":1167},[1161,1541,1542,1544,1546],{"class":1163,"line":1209},[1161,1543,1237],{"class":1167},[1161,1545,1254],{"class":1171},[1161,1547,1175],{"class":1167},[1134,1549,1551],{"id":1550},"stylesheets-distributed-through-npm","Stylesheets Distributed Through NPM",[1113,1553,1554,1555,1558],{},"You can also reference stylesheets that are distributed through npm. Let's use the popular ",[1128,1556,1557],{},"animate.css"," library as an example.",[1560,1561,1562,1580,1595,1609],"code-group",{},[1151,1563,1568],{"className":1564,"code":1565,"filename":1566,"language":1567,"meta":1157,"style":1157},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","npm install animate.css\n","npm","bash",[1128,1569,1570],{"__ignoreMap":1157},[1161,1571,1572,1574,1577],{"class":1163,"line":1164},[1161,1573,1566],{"class":1512},[1161,1575,1576],{"class":1195}," install",[1161,1578,1579],{"class":1195}," animate.css\n",[1151,1581,1584],{"className":1564,"code":1582,"filename":1583,"language":1567,"meta":1157,"style":1157},"yarn add animate.css\n","yarn",[1128,1585,1586],{"__ignoreMap":1157},[1161,1587,1588,1590,1593],{"class":1163,"line":1164},[1161,1589,1583],{"class":1512},[1161,1591,1592],{"class":1195}," add",[1161,1594,1579],{"class":1195},[1151,1596,1599],{"className":1564,"code":1597,"filename":1598,"language":1567,"meta":1157,"style":1157},"pnpm install animate.css\n","pnpm",[1128,1600,1601],{"__ignoreMap":1157},[1161,1602,1603,1605,1607],{"class":1163,"line":1164},[1161,1604,1598],{"class":1512},[1161,1606,1576],{"class":1195},[1161,1608,1579],{"class":1195},[1151,1610,1613],{"className":1564,"code":1611,"filename":1612,"language":1567,"meta":1157,"style":1157},"bun install animate.css\n","bun",[1128,1614,1615],{"__ignoreMap":1157},[1161,1616,1617,1619,1621],{"class":1163,"line":1164},[1161,1618,1612],{"class":1512},[1161,1620,1576],{"class":1195},[1161,1622,1579],{"class":1195},[1113,1624,1625],{},"Then you can reference it directly in your pages, layouts and components:",[1151,1627,1629],{"className":1153,"code":1628,"filename":248,"language":1156,"meta":1157,"style":1157},"\u003Cscript>\nimport 'animate.css'\n\u003C/script>\n\n\u003Cstyle>\n@import url(\"animate.css\");\n\u003C/style>\n",[1128,1630,1631,1639,1649,1657,1661,1669,1685],{"__ignoreMap":1157},[1161,1632,1633,1635,1637],{"class":1163,"line":1164},[1161,1634,1168],{"class":1167},[1161,1636,1172],{"class":1171},[1161,1638,1175],{"class":1167},[1161,1640,1641,1643,1645,1647],{"class":1163,"line":1178},[1161,1642,1189],{"class":1188},[1161,1644,1192],{"class":1167},[1161,1646,1557],{"class":1195},[1161,1648,1199],{"class":1167},[1161,1650,1651,1653,1655],{"class":1163,"line":1185},[1161,1652,1237],{"class":1167},[1161,1654,1172],{"class":1171},[1161,1656,1175],{"class":1167},[1161,1658,1659],{"class":1163,"line":1202},[1161,1660,1206],{"emptyLinePlaceholder":1205},[1161,1662,1663,1665,1667],{"class":1163,"line":1209},[1161,1664,1168],{"class":1167},[1161,1666,1254],{"class":1171},[1161,1668,1175],{"class":1167},[1161,1670,1671,1673,1675,1677,1679,1681,1683],{"class":1163,"line":1215},[1161,1672,1148],{"class":1188},[1161,1674,1265],{"class":1264},[1161,1676,1221],{"class":1167},[1161,1678,1270],{"class":1167},[1161,1680,1557],{"class":1195},[1161,1682,1270],{"class":1167},[1161,1684,1278],{"class":1167},[1161,1686,1687,1689,1691],{"class":1163,"line":1234},[1161,1688,1237],{"class":1167},[1161,1690,1254],{"class":1171},[1161,1692,1175],{"class":1167},[1113,1694,1695],{},"The package can also be referenced as a string in the css property of your Nuxt configuration.",[1151,1697,1699],{"className":1312,"code":1698,"filename":260,"language":1314,"meta":1157,"style":1157},"export default defineNuxtConfig({\n  css: ['animate.css']\n})\n",[1128,1700,1701,1713,1729],{"__ignoreMap":1157},[1161,1702,1703,1705,1707,1709,1711],{"class":1163,"line":1164},[1161,1704,1321],{"class":1188},[1161,1706,1324],{"class":1188},[1161,1708,1327],{"class":1264},[1161,1710,1221],{"class":1220},[1161,1712,1332],{"class":1167},[1161,1714,1715,1717,1719,1721,1723,1725,1727],{"class":1163,"line":1178},[1161,1716,1337],{"class":1171},[1161,1718,1340],{"class":1167},[1161,1720,1343],{"class":1220},[1161,1722,1224],{"class":1167},[1161,1724,1557],{"class":1195},[1161,1726,1224],{"class":1167},[1161,1728,1353],{"class":1220},[1161,1730,1731,1733],{"class":1163,"line":1185},[1161,1732,1358],{"class":1167},[1161,1734,1231],{"class":1220},[1117,1736,1738],{"id":1737},"external-stylesheets","External Stylesheets",[1113,1740,1741],{},"You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included like this.",[1113,1743,1744,1745,1751],{},"You can manipulate the head with the ",[1125,1746,1748],{"href":1747},"/docs/api/nuxt-config#head",[1128,1749,1750],{},"app.head"," property of your Nuxt configuration:",[1151,1753,1756],{"className":1312,"code":1754,"filename":260,"language":1314,"meta":1755,"style":1157},"export default defineNuxtConfig({\n  app: {\n    head: {\n      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]\n    }\n  }\n})\n","twoslash",[1128,1757,1758,1770,1779,1788,1831,1836,1841],{"__ignoreMap":1157},[1161,1759,1760,1762,1764,1766,1768],{"class":1163,"line":1164},[1161,1761,1321],{"class":1188},[1161,1763,1324],{"class":1188},[1161,1765,1327],{"class":1264},[1161,1767,1221],{"class":1220},[1161,1769,1332],{"class":1167},[1161,1771,1772,1775,1777],{"class":1163,"line":1178},[1161,1773,1774],{"class":1171},"  app",[1161,1776,1340],{"class":1167},[1161,1778,1398],{"class":1167},[1161,1780,1781,1784,1786],{"class":1163,"line":1185},[1161,1782,1783],{"class":1171},"    head",[1161,1785,1340],{"class":1167},[1161,1787,1398],{"class":1167},[1161,1789,1790,1793,1795,1797,1800,1803,1805,1807,1810,1812,1814,1817,1819,1821,1824,1826,1829],{"class":1163,"line":1202},[1161,1791,1792],{"class":1171},"      link",[1161,1794,1340],{"class":1167},[1161,1796,1343],{"class":1220},[1161,1798,1799],{"class":1167},"{",[1161,1801,1802],{"class":1171}," rel",[1161,1804,1340],{"class":1167},[1161,1806,1192],{"class":1167},[1161,1808,1809],{"class":1195},"stylesheet",[1161,1811,1224],{"class":1167},[1161,1813,1530],{"class":1167},[1161,1815,1816],{"class":1171}," href",[1161,1818,1340],{"class":1167},[1161,1820,1192],{"class":1167},[1161,1822,1823],{"class":1195},"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",[1161,1825,1224],{"class":1167},[1161,1827,1828],{"class":1167}," }",[1161,1830,1353],{"class":1220},[1161,1832,1833],{"class":1163,"line":1209},[1161,1834,1835],{"class":1167},"    }\n",[1161,1837,1838],{"class":1163,"line":1215},[1161,1839,1840],{"class":1167},"  }\n",[1161,1842,1843,1845],{"class":1163,"line":1234},[1161,1844,1358],{"class":1167},[1161,1846,1231],{"class":1220},[1134,1848,1850],{"id":1849},"dynamically-adding-stylesheets","Dynamically Adding Stylesheets",[1113,1852,1853],{},"You can use the useHead composable to dynamically set a value in your head in your code.",[1855,1856],"read-more",{"to":449},[1151,1858,1860],{"className":1312,"code":1859,"language":1314,"meta":1755,"style":1157},"useHead({\n  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]\n})\n",[1128,1861,1862,1870,1907],{"__ignoreMap":1157},[1161,1863,1864,1866,1868],{"class":1163,"line":1164},[1161,1865,448],{"class":1264},[1161,1867,1221],{"class":1220},[1161,1869,1332],{"class":1167},[1161,1871,1872,1875,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905],{"class":1163,"line":1178},[1161,1873,1874],{"class":1171},"  link",[1161,1876,1340],{"class":1167},[1161,1878,1343],{"class":1220},[1161,1880,1799],{"class":1167},[1161,1882,1802],{"class":1171},[1161,1884,1340],{"class":1167},[1161,1886,1192],{"class":1167},[1161,1888,1809],{"class":1195},[1161,1890,1224],{"class":1167},[1161,1892,1530],{"class":1167},[1161,1894,1816],{"class":1171},[1161,1896,1340],{"class":1167},[1161,1898,1192],{"class":1167},[1161,1900,1823],{"class":1195},[1161,1902,1224],{"class":1167},[1161,1904,1828],{"class":1167},[1161,1906,1353],{"class":1220},[1161,1908,1909,1911],{"class":1163,"line":1185},[1161,1910,1358],{"class":1167},[1161,1912,1231],{"class":1220},[1113,1914,1915,1916,1919,1920,1132],{},"Nuxt uses ",[1128,1917,1918],{},"unhead"," under the hood, and you can refer to its full documentation ",[1125,1921,1924],{"href":1922,"rel":1923},"https://unhead.unjs.io",[1145],"here",[1134,1926,1928],{"id":1927},"modifying-the-rendered-head-with-a-nitro-plugin","Modifying The Rendered Head With A Nitro Plugin",[1113,1930,1931],{},"If you need more advanced control, you can intercept the rendered html with a hook and modify the head programmatically.",[1113,1933,1934,1935,1938],{},"Create a plugin in ",[1128,1936,1937],{},"~/server/plugins/my-plugin.ts"," like this:",[1151,1940,1943],{"className":1312,"code":1941,"filename":1942,"language":1314,"meta":1755,"style":1157},"export default defineNitroPlugin((nitro) => {\n  nitro.hooks.hook('render:html', (html) => {\n    html.head.push('\u003Clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">')\n  })\n})\n","server/plugins/my-plugin.ts",[1128,1944,1945,1970,2008,2034,2041],{"__ignoreMap":1157},[1161,1946,1947,1949,1951,1954,1956,1958,1962,1964,1968],{"class":1163,"line":1164},[1161,1948,1321],{"class":1188},[1161,1950,1324],{"class":1188},[1161,1952,1953],{"class":1264}," defineNitroPlugin",[1161,1955,1221],{"class":1220},[1161,1957,1221],{"class":1167},[1161,1959,1961],{"class":1960},"ssYd4","nitro",[1161,1963,1437],{"class":1167},[1161,1965,1967],{"class":1966},"sRBFq"," =>",[1161,1969,1398],{"class":1167},[1161,1971,1972,1975,1977,1980,1982,1985,1987,1989,1992,1994,1996,1999,2002,2004,2006],{"class":1163,"line":1178},[1161,1973,1974],{"class":1220},"  nitro",[1161,1976,1132],{"class":1167},[1161,1978,1979],{"class":1220},"hooks",[1161,1981,1132],{"class":1167},[1161,1983,1984],{"class":1264},"hook",[1161,1986,1221],{"class":1171},[1161,1988,1224],{"class":1167},[1161,1990,1991],{"class":1195},"render:html",[1161,1993,1224],{"class":1167},[1161,1995,1530],{"class":1167},[1161,1997,1998],{"class":1167}," (",[1161,2000,2001],{"class":1960},"html",[1161,2003,1437],{"class":1167},[1161,2005,1967],{"class":1966},[1161,2007,1398],{"class":1167},[1161,2009,2010,2013,2015,2018,2020,2023,2025,2027,2030,2032],{"class":1163,"line":1185},[1161,2011,2012],{"class":1220},"    html",[1161,2014,1132],{"class":1167},[1161,2016,2017],{"class":1220},"head",[1161,2019,1132],{"class":1167},[1161,2021,2022],{"class":1264},"push",[1161,2024,1221],{"class":1171},[1161,2026,1224],{"class":1167},[1161,2028,2029],{"class":1195},"\u003Clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">",[1161,2031,1224],{"class":1167},[1161,2033,1231],{"class":1171},[1161,2035,2036,2039],{"class":1163,"line":1202},[1161,2037,2038],{"class":1167},"  }",[1161,2040,1231],{"class":1171},[1161,2042,2043,2045],{"class":1163,"line":1209},[1161,2044,1358],{"class":1167},[1161,2046,1231],{"class":1220},[1113,2048,2049,2050,1132],{},"External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on ",[1125,2051,2054],{"href":2052,"rel":2053},"https://web.dev/defer-non-critical-css",[1145],"web.dev",[1117,2056,2058],{"id":2057},"using-preprocessors","Using Preprocessors",[1113,2060,2061],{},"To use a preprocessor like SCSS, Sass, Less or Stylus, install it first.",[1560,2063,2064,2082,2099],{},[1151,2065,2068],{"className":1564,"code":2066,"filename":2067,"language":1567,"meta":1157,"style":1157},"npm install -D sass\n","Sass & SCSS",[1128,2069,2070],{"__ignoreMap":1157},[1161,2071,2072,2074,2076,2079],{"class":1163,"line":1164},[1161,2073,1566],{"class":1512},[1161,2075,1576],{"class":1195},[1161,2077,2078],{"class":1195}," -D",[1161,2080,2081],{"class":1195}," sass\n",[1151,2083,2086],{"className":1564,"code":2084,"filename":2085,"language":1567,"meta":1157,"style":1157},"npm install -D less\n","Less",[1128,2087,2088],{"__ignoreMap":1157},[1161,2089,2090,2092,2094,2096],{"class":1163,"line":1164},[1161,2091,1566],{"class":1512},[1161,2093,1576],{"class":1195},[1161,2095,2078],{"class":1195},[1161,2097,2098],{"class":1195}," less\n",[1151,2100,2103],{"className":1564,"code":2101,"filename":2102,"language":1567,"meta":1157,"style":1157},"npm install -D stylus\n","Stylus",[1128,2104,2105],{"__ignoreMap":1157},[1161,2106,2107,2109,2111,2113],{"class":1163,"line":1164},[1161,2108,1566],{"class":1512},[1161,2110,1576],{"class":1195},[1161,2112,2078],{"class":1195},[1161,2114,2115],{"class":1195}," stylus\n",[1113,2117,2118,2119,2121,2122,2124],{},"The natural place to write your stylesheets is the ",[1128,2120,175],{}," directory.\nYou can then import your source files in your ",[1128,2123,248],{}," (or layouts files) using your preprocessor's syntax.",[1151,2126,2129],{"className":1153,"code":2127,"filename":2128,"language":1156,"meta":1157,"style":1157},"\u003Cstyle lang=\"scss\">\n@use \"~/assets/scss/main.scss\";\n\u003C/style>\n","pages/app.vue",[1128,2130,2131,2152,2157],{"__ignoreMap":1157},[1161,2132,2133,2135,2137,2140,2143,2145,2148,2150],{"class":1163,"line":1164},[1161,2134,1168],{"class":1167},[1161,2136,1254],{"class":1171},[1161,2138,2139],{"class":1966}," lang",[1161,2141,2142],{"class":1167},"=",[1161,2144,1270],{"class":1167},[1161,2146,2147],{"class":1195},"scss",[1161,2149,1270],{"class":1167},[1161,2151,1175],{"class":1167},[1161,2153,2154],{"class":1163,"line":1178},[1161,2155,2156],{"class":1220},"@use \"~/assets/scss/main.scss\";\n",[1161,2158,2159,2161,2163],{"class":1163,"line":1185},[1161,2160,1237],{"class":1167},[1161,2162,1254],{"class":1171},[1161,2164,1175],{"class":1167},[1113,2166,2167,2168,2170],{},"Alternatively, you can use the ",[1128,2169,1303],{}," property of your Nuxt configuration.",[1151,2172,2174],{"className":1312,"code":2173,"filename":260,"language":1314,"meta":1755,"style":1157},"export default defineNuxtConfig({\n  css: ['~/assets/scss/main.scss']\n})\n",[1128,2175,2176,2188,2205],{"__ignoreMap":1157},[1161,2177,2178,2180,2182,2184,2186],{"class":1163,"line":1164},[1161,2179,1321],{"class":1188},[1161,2181,1324],{"class":1188},[1161,2183,1327],{"class":1264},[1161,2185,1221],{"class":1220},[1161,2187,1332],{"class":1167},[1161,2189,2190,2192,2194,2196,2198,2201,2203],{"class":1163,"line":1178},[1161,2191,1337],{"class":1171},[1161,2193,1340],{"class":1167},[1161,2195,1343],{"class":1220},[1161,2197,1224],{"class":1167},[1161,2199,2200],{"class":1195},"~/assets/scss/main.scss",[1161,2202,1224],{"class":1167},[1161,2204,1353],{"class":1220},[1161,2206,2207,2209],{"class":1163,"line":1185},[1161,2208,1358],{"class":1167},[1161,2210,1231],{"class":1220},[1289,2212,2213],{},[1113,2214,2215],{},"In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.",[1113,2217,2218,2219,2224,2225,1132],{},"If you need to inject code in pre-processed files, like a ",[1125,2220,2223],{"href":2221,"rel":2222},"https://sass-lang.com/documentation/at-rules/use#partials",[1145],"sass partial"," with color variables, you can do so with the vite ",[1125,2226,2229],{"href":2227,"rel":2228},"https://vite.dev/config/shared-options.html#css-preprocessoroptions",[1145],"preprocessors options",[1113,2231,2232,2233,2235],{},"Create some partials in your ",[1128,2234,175],{}," directory:",[1560,2237,2238,2274],{},[1151,2239,2243],{"className":2240,"code":2241,"filename":2242,"language":2147,"meta":1157,"style":1157},"language-scss shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","$primary: #49240F;\n$secondary: #E4A79D;\n","assets/_colors.scss",[1128,2244,2245,2260],{"__ignoreMap":1157},[1161,2246,2247,2250,2252,2255,2258],{"class":1163,"line":1164},[1161,2248,2249],{"class":1220},"$primary",[1161,2251,1340],{"class":1167},[1161,2253,2254],{"class":1167}," #",[1161,2256,2257],{"class":1220},"49240F",[1161,2259,1416],{"class":1167},[1161,2261,2262,2265,2267,2269,2272],{"class":1163,"line":1178},[1161,2263,2264],{"class":1220},"$secondary",[1161,2266,1340],{"class":1167},[1161,2268,2254],{"class":1167},[1161,2270,2271],{"class":1220},"E4A79D",[1161,2273,1416],{"class":1167},[1151,2275,2280],{"className":2276,"code":2277,"filename":2278,"language":2279,"meta":1157,"style":1157},"language-sass shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","$primary: #49240F\n$secondary: #E4A79D\n","assets/_colors.sass","sass",[1128,2281,2282,2287],{"__ignoreMap":1157},[1161,2283,2284],{"class":1163,"line":1164},[1161,2285,2286],{},"$primary: #49240F\n",[1161,2288,2289],{"class":1163,"line":1178},[1161,2290,2291],{},"$secondary: #E4A79D\n",[1113,2293,2294,2295,2298],{},"Then in your ",[1128,2296,2297],{},"nuxt.config"," :",[1560,2300,2301,2393],{},[1151,2302,2305],{"className":1312,"code":2303,"filename":2304,"language":1314,"meta":1755,"style":1157},"export default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorOptions: {\n        scss: {\n          additionalData: '@use \"~/assets/_colors.scss\" as *;'\n        }\n      }\n    }\n  }\n})\n","SCSS",[1128,2306,2307,2319,2328,2337,2346,2355,2369,2374,2379,2383,2387],{"__ignoreMap":1157},[1161,2308,2309,2311,2313,2315,2317],{"class":1163,"line":1164},[1161,2310,1321],{"class":1188},[1161,2312,1324],{"class":1188},[1161,2314,1327],{"class":1264},[1161,2316,1221],{"class":1220},[1161,2318,1332],{"class":1167},[1161,2320,2321,2324,2326],{"class":1163,"line":1178},[1161,2322,2323],{"class":1171},"  vite",[1161,2325,1340],{"class":1167},[1161,2327,1398],{"class":1167},[1161,2329,2330,2333,2335],{"class":1163,"line":1185},[1161,2331,2332],{"class":1171},"    css",[1161,2334,1340],{"class":1167},[1161,2336,1398],{"class":1167},[1161,2338,2339,2342,2344],{"class":1163,"line":1202},[1161,2340,2341],{"class":1171},"      preprocessorOptions",[1161,2343,1340],{"class":1167},[1161,2345,1398],{"class":1167},[1161,2347,2348,2351,2353],{"class":1163,"line":1209},[1161,2349,2350],{"class":1171},"        scss",[1161,2352,1340],{"class":1167},[1161,2354,1398],{"class":1167},[1161,2356,2357,2360,2362,2364,2367],{"class":1163,"line":1215},[1161,2358,2359],{"class":1171},"          additionalData",[1161,2361,1340],{"class":1167},[1161,2363,1192],{"class":1167},[1161,2365,2366],{"class":1195},"@use \"~/assets/_colors.scss\" as *;",[1161,2368,1199],{"class":1167},[1161,2370,2371],{"class":1163,"line":1234},[1161,2372,2373],{"class":1167},"        }\n",[1161,2375,2376],{"class":1163,"line":1244},[1161,2377,2378],{"class":1167},"      }\n",[1161,2380,2381],{"class":1163,"line":1249},[1161,2382,1835],{"class":1167},[1161,2384,2385],{"class":1163,"line":1259},[1161,2386,1840],{"class":1167},[1161,2388,2389,2391],{"class":1163,"line":1281},[1161,2390,1358],{"class":1167},[1161,2392,1231],{"class":1220},[1151,2394,2397],{"className":1312,"code":2395,"filename":2396,"language":1314,"meta":1755,"style":1157},"export default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorOptions: {\n        sass: {\n          additionalData: '@use \"~/assets/_colors.sass\" as *\\n'\n        }\n      }\n    }\n  }\n})\n","SASS",[1128,2398,2399,2411,2419,2427,2435,2444,2460,2464,2468,2472,2476],{"__ignoreMap":1157},[1161,2400,2401,2403,2405,2407,2409],{"class":1163,"line":1164},[1161,2402,1321],{"class":1188},[1161,2404,1324],{"class":1188},[1161,2406,1327],{"class":1264},[1161,2408,1221],{"class":1220},[1161,2410,1332],{"class":1167},[1161,2412,2413,2415,2417],{"class":1163,"line":1178},[1161,2414,2323],{"class":1171},[1161,2416,1340],{"class":1167},[1161,2418,1398],{"class":1167},[1161,2420,2421,2423,2425],{"class":1163,"line":1185},[1161,2422,2332],{"class":1171},[1161,2424,1340],{"class":1167},[1161,2426,1398],{"class":1167},[1161,2428,2429,2431,2433],{"class":1163,"line":1202},[1161,2430,2341],{"class":1171},[1161,2432,1340],{"class":1167},[1161,2434,1398],{"class":1167},[1161,2436,2437,2440,2442],{"class":1163,"line":1209},[1161,2438,2439],{"class":1171},"        sass",[1161,2441,1340],{"class":1167},[1161,2443,1398],{"class":1167},[1161,2445,2446,2448,2450,2452,2455,2458],{"class":1163,"line":1215},[1161,2447,2359],{"class":1171},[1161,2449,1340],{"class":1167},[1161,2451,1192],{"class":1167},[1161,2453,2454],{"class":1195},"@use \"~/assets/_colors.sass\" as *",[1161,2456,2457],{"class":1220},"\\n",[1161,2459,1199],{"class":1167},[1161,2461,2462],{"class":1163,"line":1234},[1161,2463,2373],{"class":1167},[1161,2465,2466],{"class":1163,"line":1244},[1161,2467,2378],{"class":1167},[1161,2469,2470],{"class":1163,"line":1249},[1161,2471,1835],{"class":1167},[1161,2473,2474],{"class":1163,"line":1259},[1161,2475,1840],{"class":1167},[1161,2477,2478,2480],{"class":1163,"line":1281},[1161,2479,1358],{"class":1167},[1161,2481,1231],{"class":1220},[1113,2483,2484,2485,1132],{},"Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader ",[1125,2486,2489],{"href":2487,"rel":2488},"https://webpack.js.org/loaders/sass-loader",[1145],"documentation",[1134,2491,2493],{"id":2492},"preprocessor-workers-experimental","Preprocessor Workers (Experimental)",[1113,2495,2496,2497,2502],{},"Vite has made available an ",[1125,2498,2501],{"href":2499,"rel":2500},"https://vite.dev/config/shared-options.html#css-preprocessormaxworkers",[1145],"experimental option"," which can speed up using preprocessors.",[1113,2504,2505,2506,1340],{},"You can enable this in your ",[1128,2507,2297],{},[1151,2509,2511],{"className":1312,"code":2510,"language":1314,"meta":1157,"style":1157},"\nexport default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorMaxWorkers: true // number of CPUs minus 1\n    }\n  }\n})\n",[1128,2512,2513,2517,2529,2537,2545,2559,2563,2567],{"__ignoreMap":1157},[1161,2514,2515],{"class":1163,"line":1164},[1161,2516,1206],{"emptyLinePlaceholder":1205},[1161,2518,2519,2521,2523,2525,2527],{"class":1163,"line":1178},[1161,2520,1321],{"class":1188},[1161,2522,1324],{"class":1188},[1161,2524,1327],{"class":1264},[1161,2526,1221],{"class":1220},[1161,2528,1332],{"class":1167},[1161,2530,2531,2533,2535],{"class":1163,"line":1185},[1161,2532,2323],{"class":1171},[1161,2534,1340],{"class":1167},[1161,2536,1398],{"class":1167},[1161,2538,2539,2541,2543],{"class":1163,"line":1202},[1161,2540,2332],{"class":1171},[1161,2542,1340],{"class":1167},[1161,2544,1398],{"class":1167},[1161,2546,2547,2550,2552,2556],{"class":1163,"line":1209},[1161,2548,2549],{"class":1171},"      preprocessorMaxWorkers",[1161,2551,1340],{"class":1167},[1161,2553,2555],{"class":2554},"sagxc"," true",[1161,2557,2558],{"class":1181}," // number of CPUs minus 1\n",[1161,2560,2561],{"class":1163,"line":1215},[1161,2562,1835],{"class":1167},[1161,2564,2565],{"class":1163,"line":1234},[1161,2566,1840],{"class":1167},[1161,2568,2569,2571],{"class":1163,"line":1244},[1161,2570,1358],{"class":1167},[1161,2572,1231],{"class":1220},[2574,2575,2576],"note",{},[1113,2577,2578,2579,1132],{},"This is an experimental option and you should refer to the Vite documentation and ",[1125,2580,2583],{"href":2581,"rel":2582},"https://github.com/vitejs/vite/discussions/15835",[1145],"provide feedback",[1117,2585,2587],{"id":2586},"single-file-components-sfc-styling","Single File Components (SFC) Styling",[1113,2589,2590,2591,1132],{},"One of the best things about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as ",[1125,2592,2595],{"href":2593,"rel":2594},"https://github.com/Tahul/pinceau",[1145],"pinceau",[1113,2597,2598,2599,2604],{},"You can refer to the ",[1125,2600,2603],{"href":2601,"rel":2602},"https://vuejs.org/api/sfc-css-features.html",[1145],"Vue docs"," for a comprehensive reference about styling components in SFC.",[1134,2606,2608],{"id":2607},"class-and-style-bindings","Class And Style Bindings",[1113,2610,2611],{},"You can leverage Vue SFC features to style your components with class and style attributes.",[1560,2613,2614,2850,3065,3196],{},[1151,2615,2618],{"className":1153,"code":2616,"filename":2617,"language":1156,"meta":1157,"style":1157},"\u003Cscript setup lang=\"ts\">\nconst isActive = ref(true)\nconst hasError = ref(false)\nconst classObject = reactive({\n  active: true,\n  'text-danger': false\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"static\" :class=\"{ active: isActive, 'text-danger': hasError }\">\u003C/div>\n  \u003Cdiv :class=\"classObject\">\u003C/div>\n\u003C/template>\n","Ref and Reactive",[1128,2619,2620,2641,2661,2679,2695,2707,2722,2728,2736,2740,2749,2815,2841],{"__ignoreMap":1157},[1161,2621,2622,2624,2626,2629,2631,2633,2635,2637,2639],{"class":1163,"line":1164},[1161,2623,1168],{"class":1167},[1161,2625,1172],{"class":1171},[1161,2627,2628],{"class":1966}," setup",[1161,2630,2139],{"class":1966},[1161,2632,2142],{"class":1167},[1161,2634,1270],{"class":1167},[1161,2636,1314],{"class":1195},[1161,2638,1270],{"class":1167},[1161,2640,1175],{"class":1167},[1161,2642,2643,2646,2649,2651,2654,2656,2659],{"class":1163,"line":1178},[1161,2644,2645],{"class":1966},"const",[1161,2647,2648],{"class":1220}," isActive ",[1161,2650,2142],{"class":1167},[1161,2652,2653],{"class":1264}," ref",[1161,2655,1221],{"class":1220},[1161,2657,2658],{"class":2554},"true",[1161,2660,1231],{"class":1220},[1161,2662,2663,2665,2668,2670,2672,2674,2677],{"class":1163,"line":1185},[1161,2664,2645],{"class":1966},[1161,2666,2667],{"class":1220}," hasError ",[1161,2669,2142],{"class":1167},[1161,2671,2653],{"class":1264},[1161,2673,1221],{"class":1220},[1161,2675,2676],{"class":2554},"false",[1161,2678,1231],{"class":1220},[1161,2680,2681,2683,2686,2688,2691,2693],{"class":1163,"line":1202},[1161,2682,2645],{"class":1966},[1161,2684,2685],{"class":1220}," classObject ",[1161,2687,2142],{"class":1167},[1161,2689,2690],{"class":1264}," reactive",[1161,2692,1221],{"class":1220},[1161,2694,1332],{"class":1167},[1161,2696,2697,2700,2702,2704],{"class":1163,"line":1209},[1161,2698,2699],{"class":1171},"  active",[1161,2701,1340],{"class":1167},[1161,2703,2555],{"class":2554},[1161,2705,2706],{"class":1167},",\n",[1161,2708,2709,2712,2715,2717,2719],{"class":1163,"line":1215},[1161,2710,2711],{"class":1167},"  '",[1161,2713,2714],{"class":1171},"text-danger",[1161,2716,1224],{"class":1167},[1161,2718,1340],{"class":1167},[1161,2720,2721],{"class":2554}," false\n",[1161,2723,2724,2726],{"class":1163,"line":1234},[1161,2725,1358],{"class":1167},[1161,2727,1231],{"class":1220},[1161,2729,2730,2732,2734],{"class":1163,"line":1244},[1161,2731,1237],{"class":1167},[1161,2733,1172],{"class":1171},[1161,2735,1175],{"class":1167},[1161,2737,2738],{"class":1163,"line":1249},[1161,2739,1206],{"emptyLinePlaceholder":1205},[1161,2741,2742,2744,2747],{"class":1163,"line":1259},[1161,2743,1168],{"class":1167},[1161,2745,2746],{"class":1171},"template",[1161,2748,1175],{"class":1167},[1161,2750,2751,2754,2757,2760,2762,2764,2767,2769,2771,2774,2776,2778,2781,2784,2787,2790,2793,2795,2797,2799,2801,2804,2806,2808,2811,2813],{"class":1163,"line":1281},[1161,2752,2753],{"class":1167},"  \u003C",[1161,2755,2756],{"class":1171},"div",[1161,2758,2759],{"class":1966}," class",[1161,2761,2142],{"class":1167},[1161,2763,1270],{"class":1167},[1161,2765,2766],{"class":1195},"static",[1161,2768,1270],{"class":1167},[1161,2770,2298],{"class":1167},[1161,2772,2773],{"class":1966},"class",[1161,2775,2142],{"class":1167},[1161,2777,1270],{"class":1167},[1161,2779,2780],{"class":1167},"{ ",[1161,2782,2783],{"class":1171},"active",[1161,2785,2786],{"class":1167},": ",[1161,2788,2789],{"class":1220},"isActive",[1161,2791,2792],{"class":1167},", ",[1161,2794,1224],{"class":1167},[1161,2796,2714],{"class":1171},[1161,2798,1224],{"class":1167},[1161,2800,2786],{"class":1167},[1161,2802,2803],{"class":1220},"hasError",[1161,2805,1828],{"class":1167},[1161,2807,1270],{"class":1167},[1161,2809,2810],{"class":1167},">\u003C/",[1161,2812,2756],{"class":1171},[1161,2814,1175],{"class":1167},[1161,2816,2818,2820,2822,2824,2826,2828,2830,2833,2835,2837,2839],{"class":1163,"line":2817},12,[1161,2819,2753],{"class":1167},[1161,2821,2756],{"class":1171},[1161,2823,2298],{"class":1167},[1161,2825,2773],{"class":1966},[1161,2827,2142],{"class":1167},[1161,2829,1270],{"class":1167},[1161,2831,2832],{"class":1220},"classObject",[1161,2834,1270],{"class":1167},[1161,2836,2810],{"class":1167},[1161,2838,2756],{"class":1171},[1161,2840,1175],{"class":1167},[1161,2842,2844,2846,2848],{"class":1163,"line":2843},13,[1161,2845,1237],{"class":1167},[1161,2847,2746],{"class":1171},[1161,2849,1175],{"class":1167},[1151,2851,2854],{"className":1153,"code":2852,"filename":2853,"language":1156,"meta":1157,"style":1157},"\u003Cscript setup lang=\"ts\">\nconst isActive = ref(true)\nconst error = ref(null)\n\nconst classObject = computed(() => ({\n  active: isActive.value && !error.value,\n  'text-danger': error.value && error.value.type === 'fatal'\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"classObject\">\u003C/div>\n\u003C/template>\n","Computed",[1128,2855,2856,2876,2892,2910,2914,2936,2966,3006,3013,3021,3025,3033,3057],{"__ignoreMap":1157},[1161,2857,2858,2860,2862,2864,2866,2868,2870,2872,2874],{"class":1163,"line":1164},[1161,2859,1168],{"class":1167},[1161,2861,1172],{"class":1171},[1161,2863,2628],{"class":1966},[1161,2865,2139],{"class":1966},[1161,2867,2142],{"class":1167},[1161,2869,1270],{"class":1167},[1161,2871,1314],{"class":1195},[1161,2873,1270],{"class":1167},[1161,2875,1175],{"class":1167},[1161,2877,2878,2880,2882,2884,2886,2888,2890],{"class":1163,"line":1178},[1161,2879,2645],{"class":1966},[1161,2881,2648],{"class":1220},[1161,2883,2142],{"class":1167},[1161,2885,2653],{"class":1264},[1161,2887,1221],{"class":1220},[1161,2889,2658],{"class":2554},[1161,2891,1231],{"class":1220},[1161,2893,2894,2896,2899,2901,2903,2905,2908],{"class":1163,"line":1185},[1161,2895,2645],{"class":1966},[1161,2897,2898],{"class":1220}," error ",[1161,2900,2142],{"class":1167},[1161,2902,2653],{"class":1264},[1161,2904,1221],{"class":1220},[1161,2906,2907],{"class":1167},"null",[1161,2909,1231],{"class":1220},[1161,2911,2912],{"class":1163,"line":1202},[1161,2913,1206],{"emptyLinePlaceholder":1205},[1161,2915,2916,2918,2920,2922,2925,2927,2930,2932,2934],{"class":1163,"line":1209},[1161,2917,2645],{"class":1966},[1161,2919,2685],{"class":1220},[1161,2921,2142],{"class":1167},[1161,2923,2924],{"class":1264}," computed",[1161,2926,1221],{"class":1220},[1161,2928,2929],{"class":1167},"()",[1161,2931,1967],{"class":1966},[1161,2933,1998],{"class":1220},[1161,2935,1332],{"class":1167},[1161,2937,2938,2940,2942,2945,2947,2950,2953,2956,2959,2961,2964],{"class":1163,"line":1215},[1161,2939,2699],{"class":1171},[1161,2941,1340],{"class":1167},[1161,2943,2944],{"class":1220}," isActive",[1161,2946,1132],{"class":1167},[1161,2948,2949],{"class":1220},"value ",[1161,2951,2952],{"class":1167},"&&",[1161,2954,2955],{"class":1167}," !",[1161,2957,2958],{"class":1220},"error",[1161,2960,1132],{"class":1167},[1161,2962,2963],{"class":1220},"value",[1161,2965,2706],{"class":1167},[1161,2967,2968,2970,2972,2974,2976,2979,2981,2983,2985,2987,2989,2991,2993,2996,2999,3001,3004],{"class":1163,"line":1234},[1161,2969,2711],{"class":1167},[1161,2971,2714],{"class":1171},[1161,2973,1224],{"class":1167},[1161,2975,1340],{"class":1167},[1161,2977,2978],{"class":1220}," error",[1161,2980,1132],{"class":1167},[1161,2982,2949],{"class":1220},[1161,2984,2952],{"class":1167},[1161,2986,2978],{"class":1220},[1161,2988,1132],{"class":1167},[1161,2990,2963],{"class":1220},[1161,2992,1132],{"class":1167},[1161,2994,2995],{"class":1220},"type ",[1161,2997,2998],{"class":1167},"===",[1161,3000,1192],{"class":1167},[1161,3002,3003],{"class":1195},"fatal",[1161,3005,1199],{"class":1167},[1161,3007,3008,3010],{"class":1163,"line":1244},[1161,3009,1358],{"class":1167},[1161,3011,3012],{"class":1220},"))\n",[1161,3014,3015,3017,3019],{"class":1163,"line":1249},[1161,3016,1237],{"class":1167},[1161,3018,1172],{"class":1171},[1161,3020,1175],{"class":1167},[1161,3022,3023],{"class":1163,"line":1259},[1161,3024,1206],{"emptyLinePlaceholder":1205},[1161,3026,3027,3029,3031],{"class":1163,"line":1281},[1161,3028,1168],{"class":1167},[1161,3030,2746],{"class":1171},[1161,3032,1175],{"class":1167},[1161,3034,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055],{"class":1163,"line":2817},[1161,3036,2753],{"class":1167},[1161,3038,2756],{"class":1171},[1161,3040,2298],{"class":1167},[1161,3042,2773],{"class":1966},[1161,3044,2142],{"class":1167},[1161,3046,1270],{"class":1167},[1161,3048,2832],{"class":1220},[1161,3050,1270],{"class":1167},[1161,3052,2810],{"class":1167},[1161,3054,2756],{"class":1171},[1161,3056,1175],{"class":1167},[1161,3058,3059,3061,3063],{"class":1163,"line":2843},[1161,3060,1237],{"class":1167},[1161,3062,2746],{"class":1171},[1161,3064,1175],{"class":1167},[1151,3066,3069],{"className":1153,"code":3067,"filename":3068,"language":1156,"meta":1157,"style":1157},"\u003Cscript setup lang=\"ts\">\nconst isActive = ref(true)\nconst errorClass = ref('text-danger')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"[{ active: isActive }, errorClass]\">\u003C/div>\n\u003C/template>\n","Array",[1128,3070,3071,3091,3107,3128,3136,3140,3148,3188],{"__ignoreMap":1157},[1161,3072,3073,3075,3077,3079,3081,3083,3085,3087,3089],{"class":1163,"line":1164},[1161,3074,1168],{"class":1167},[1161,3076,1172],{"class":1171},[1161,3078,2628],{"class":1966},[1161,3080,2139],{"class":1966},[1161,3082,2142],{"class":1167},[1161,3084,1270],{"class":1167},[1161,3086,1314],{"class":1195},[1161,3088,1270],{"class":1167},[1161,3090,1175],{"class":1167},[1161,3092,3093,3095,3097,3099,3101,3103,3105],{"class":1163,"line":1178},[1161,3094,2645],{"class":1966},[1161,3096,2648],{"class":1220},[1161,3098,2142],{"class":1167},[1161,3100,2653],{"class":1264},[1161,3102,1221],{"class":1220},[1161,3104,2658],{"class":2554},[1161,3106,1231],{"class":1220},[1161,3108,3109,3111,3114,3116,3118,3120,3122,3124,3126],{"class":1163,"line":1185},[1161,3110,2645],{"class":1966},[1161,3112,3113],{"class":1220}," errorClass ",[1161,3115,2142],{"class":1167},[1161,3117,2653],{"class":1264},[1161,3119,1221],{"class":1220},[1161,3121,1224],{"class":1167},[1161,3123,2714],{"class":1195},[1161,3125,1224],{"class":1167},[1161,3127,1231],{"class":1220},[1161,3129,3130,3132,3134],{"class":1163,"line":1202},[1161,3131,1237],{"class":1167},[1161,3133,1172],{"class":1171},[1161,3135,1175],{"class":1167},[1161,3137,3138],{"class":1163,"line":1209},[1161,3139,1206],{"emptyLinePlaceholder":1205},[1161,3141,3142,3144,3146],{"class":1163,"line":1215},[1161,3143,1168],{"class":1167},[1161,3145,2746],{"class":1171},[1161,3147,1175],{"class":1167},[1161,3149,3150,3152,3154,3156,3158,3160,3162,3165,3167,3169,3171,3174,3177,3180,3182,3184,3186],{"class":1163,"line":1234},[1161,3151,2753],{"class":1167},[1161,3153,2756],{"class":1171},[1161,3155,2298],{"class":1167},[1161,3157,2773],{"class":1966},[1161,3159,2142],{"class":1167},[1161,3161,1270],{"class":1167},[1161,3163,3164],{"class":1167},"[{ ",[1161,3166,2783],{"class":1171},[1161,3168,2786],{"class":1167},[1161,3170,2789],{"class":1220},[1161,3172,3173],{"class":1167}," }, ",[1161,3175,3176],{"class":1220},"errorClass",[1161,3178,3179],{"class":1167},"]",[1161,3181,1270],{"class":1167},[1161,3183,2810],{"class":1167},[1161,3185,2756],{"class":1171},[1161,3187,1175],{"class":1167},[1161,3189,3190,3192,3194],{"class":1163,"line":1244},[1161,3191,1237],{"class":1167},[1161,3193,2746],{"class":1171},[1161,3195,1175],{"class":1167},[1151,3197,3200],{"className":1153,"code":3198,"filename":3199,"language":1156,"meta":1157,"style":1157},"\u003Cscript setup lang=\"ts\">\nconst activeColor = ref('red')\nconst fontSize = ref(30)\nconst styleObject = reactive({ color: 'red', fontSize: '13px' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv :style=\"{ color: activeColor, fontSize: fontSize + 'px' }\">\u003C/div>\n  \u003Cdiv :style=\"[baseStyles, overridingStyles]\">\u003C/div>\n  \u003Cdiv :style=\"styleObject\">\u003C/div>\n\u003C/template>\n","Style",[1128,3201,3202,3222,3244,3263,3307,3315,3319,3327,3380,3415,3440],{"__ignoreMap":1157},[1161,3203,3204,3206,3208,3210,3212,3214,3216,3218,3220],{"class":1163,"line":1164},[1161,3205,1168],{"class":1167},[1161,3207,1172],{"class":1171},[1161,3209,2628],{"class":1966},[1161,3211,2139],{"class":1966},[1161,3213,2142],{"class":1167},[1161,3215,1270],{"class":1167},[1161,3217,1314],{"class":1195},[1161,3219,1270],{"class":1167},[1161,3221,1175],{"class":1167},[1161,3223,3224,3226,3229,3231,3233,3235,3237,3240,3242],{"class":1163,"line":1178},[1161,3225,2645],{"class":1966},[1161,3227,3228],{"class":1220}," activeColor ",[1161,3230,2142],{"class":1167},[1161,3232,2653],{"class":1264},[1161,3234,1221],{"class":1220},[1161,3236,1224],{"class":1167},[1161,3238,3239],{"class":1195},"red",[1161,3241,1224],{"class":1167},[1161,3243,1231],{"class":1220},[1161,3245,3246,3248,3251,3253,3255,3257,3261],{"class":1163,"line":1185},[1161,3247,2645],{"class":1966},[1161,3249,3250],{"class":1220}," fontSize ",[1161,3252,2142],{"class":1167},[1161,3254,2653],{"class":1264},[1161,3256,1221],{"class":1220},[1161,3258,3260],{"class":3259},"sV9sa","30",[1161,3262,1231],{"class":1220},[1161,3264,3265,3267,3270,3272,3274,3276,3278,3281,3283,3285,3287,3289,3291,3294,3296,3298,3301,3303,3305],{"class":1163,"line":1202},[1161,3266,2645],{"class":1966},[1161,3268,3269],{"class":1220}," styleObject ",[1161,3271,2142],{"class":1167},[1161,3273,2690],{"class":1264},[1161,3275,1221],{"class":1220},[1161,3277,1799],{"class":1167},[1161,3279,3280],{"class":1171}," color",[1161,3282,1340],{"class":1167},[1161,3284,1192],{"class":1167},[1161,3286,3239],{"class":1195},[1161,3288,1224],{"class":1167},[1161,3290,1530],{"class":1167},[1161,3292,3293],{"class":1171}," fontSize",[1161,3295,1340],{"class":1167},[1161,3297,1192],{"class":1167},[1161,3299,3300],{"class":1195},"13px",[1161,3302,1224],{"class":1167},[1161,3304,1828],{"class":1167},[1161,3306,1231],{"class":1220},[1161,3308,3309,3311,3313],{"class":1163,"line":1209},[1161,3310,1237],{"class":1167},[1161,3312,1172],{"class":1171},[1161,3314,1175],{"class":1167},[1161,3316,3317],{"class":1163,"line":1215},[1161,3318,1206],{"emptyLinePlaceholder":1205},[1161,3320,3321,3323,3325],{"class":1163,"line":1234},[1161,3322,1168],{"class":1167},[1161,3324,2746],{"class":1171},[1161,3326,1175],{"class":1167},[1161,3328,3329,3331,3333,3335,3337,3339,3341,3343,3346,3348,3351,3353,3356,3358,3360,3363,3365,3368,3370,3372,3374,3376,3378],{"class":1163,"line":1244},[1161,3330,2753],{"class":1167},[1161,3332,2756],{"class":1171},[1161,3334,2298],{"class":1167},[1161,3336,1254],{"class":1966},[1161,3338,2142],{"class":1167},[1161,3340,1270],{"class":1167},[1161,3342,2780],{"class":1167},[1161,3344,3345],{"class":1171},"color",[1161,3347,2786],{"class":1167},[1161,3349,3350],{"class":1220},"activeColor",[1161,3352,2792],{"class":1167},[1161,3354,3355],{"class":1171},"fontSize",[1161,3357,2786],{"class":1167},[1161,3359,3355],{"class":1220},[1161,3361,3362],{"class":1167}," + ",[1161,3364,1224],{"class":1167},[1161,3366,3367],{"class":1195},"px",[1161,3369,1224],{"class":1167},[1161,3371,1828],{"class":1167},[1161,3373,1270],{"class":1167},[1161,3375,2810],{"class":1167},[1161,3377,2756],{"class":1171},[1161,3379,1175],{"class":1167},[1161,3381,3382,3384,3386,3388,3390,3392,3394,3397,3400,3402,3405,3407,3409,3411,3413],{"class":1163,"line":1249},[1161,3383,2753],{"class":1167},[1161,3385,2756],{"class":1171},[1161,3387,2298],{"class":1167},[1161,3389,1254],{"class":1966},[1161,3391,2142],{"class":1167},[1161,3393,1270],{"class":1167},[1161,3395,3396],{"class":1167},"[",[1161,3398,3399],{"class":1220},"baseStyles",[1161,3401,2792],{"class":1167},[1161,3403,3404],{"class":1220},"overridingStyles",[1161,3406,3179],{"class":1167},[1161,3408,1270],{"class":1167},[1161,3410,2810],{"class":1167},[1161,3412,2756],{"class":1171},[1161,3414,1175],{"class":1167},[1161,3416,3417,3419,3421,3423,3425,3427,3429,3432,3434,3436,3438],{"class":1163,"line":1259},[1161,3418,2753],{"class":1167},[1161,3420,2756],{"class":1171},[1161,3422,2298],{"class":1167},[1161,3424,1254],{"class":1966},[1161,3426,2142],{"class":1167},[1161,3428,1270],{"class":1167},[1161,3430,3431],{"class":1220},"styleObject",[1161,3433,1270],{"class":1167},[1161,3435,2810],{"class":1167},[1161,3437,2756],{"class":1171},[1161,3439,1175],{"class":1167},[1161,3441,3442,3444,3446],{"class":1163,"line":1281},[1161,3443,1237],{"class":1167},[1161,3445,2746],{"class":1171},[1161,3447,1175],{"class":1167},[1113,3449,3450,3451,3455],{},"Refer to the ",[1125,3452,2603],{"href":3453,"rel":3454},"https://vuejs.org/guide/essentials/class-and-style.html",[1145]," for more information.",[1134,3457,3459,3460],{"id":3458},"dynamic-styles-with-v-bind","Dynamic Styles With ",[1128,3461,3462],{},"v-bind",[1113,3464,3465],{},"You can reference JavaScript variable and expression within your style blocks with the v-bind function.\nThe binding will be dynamic, meaning that if the variable value changes, the style will be updated.",[1151,3467,3469],{"className":1153,"code":3468,"language":1156,"meta":1157,"style":1157},"\u003Cscript setup lang=\"ts\">\nconst color = ref(\"red\")\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"text\">hello\u003C/div>\n\u003C/template>\n\n\u003Cstyle>\n.text {\n  color: v-bind(color);\n}\n\u003C/style>\n",[1128,3470,3471,3491,3512,3520,3524,3532,3561,3569,3573,3581,3589,3604,3608],{"__ignoreMap":1157},[1161,3472,3473,3475,3477,3479,3481,3483,3485,3487,3489],{"class":1163,"line":1164},[1161,3474,1168],{"class":1167},[1161,3476,1172],{"class":1171},[1161,3478,2628],{"class":1966},[1161,3480,2139],{"class":1966},[1161,3482,2142],{"class":1167},[1161,3484,1270],{"class":1167},[1161,3486,1314],{"class":1195},[1161,3488,1270],{"class":1167},[1161,3490,1175],{"class":1167},[1161,3492,3493,3495,3498,3500,3502,3504,3506,3508,3510],{"class":1163,"line":1178},[1161,3494,2645],{"class":1966},[1161,3496,3497],{"class":1220}," color ",[1161,3499,2142],{"class":1167},[1161,3501,2653],{"class":1264},[1161,3503,1221],{"class":1220},[1161,3505,1270],{"class":1167},[1161,3507,3239],{"class":1195},[1161,3509,1270],{"class":1167},[1161,3511,1231],{"class":1220},[1161,3513,3514,3516,3518],{"class":1163,"line":1185},[1161,3515,1237],{"class":1167},[1161,3517,1172],{"class":1171},[1161,3519,1175],{"class":1167},[1161,3521,3522],{"class":1163,"line":1202},[1161,3523,1206],{"emptyLinePlaceholder":1205},[1161,3525,3526,3528,3530],{"class":1163,"line":1209},[1161,3527,1168],{"class":1167},[1161,3529,2746],{"class":1171},[1161,3531,1175],{"class":1167},[1161,3533,3534,3536,3538,3540,3542,3544,3547,3549,3552,3555,3557,3559],{"class":1163,"line":1215},[1161,3535,2753],{"class":1167},[1161,3537,2756],{"class":1171},[1161,3539,2759],{"class":1966},[1161,3541,2142],{"class":1167},[1161,3543,1270],{"class":1167},[1161,3545,3546],{"class":1195},"text",[1161,3548,1270],{"class":1167},[1161,3550,3551],{"class":1167},">",[1161,3553,3554],{"class":1220},"hello",[1161,3556,1237],{"class":1167},[1161,3558,2756],{"class":1171},[1161,3560,1175],{"class":1167},[1161,3562,3563,3565,3567],{"class":1163,"line":1234},[1161,3564,1237],{"class":1167},[1161,3566,2746],{"class":1171},[1161,3568,1175],{"class":1167},[1161,3570,3571],{"class":1163,"line":1244},[1161,3572,1206],{"emptyLinePlaceholder":1205},[1161,3574,3575,3577,3579],{"class":1163,"line":1249},[1161,3576,1168],{"class":1167},[1161,3578,1254],{"class":1171},[1161,3580,1175],{"class":1167},[1161,3582,3583,3585,3587],{"class":1163,"line":1259},[1161,3584,1132],{"class":1167},[1161,3586,3546],{"class":1512},[1161,3588,1398],{"class":1167},[1161,3590,3591,3594,3596,3599,3602],{"class":1163,"line":1281},[1161,3592,3593],{"class":1403},"  color",[1161,3595,1340],{"class":1167},[1161,3597,3598],{"class":1264}," v-bind",[1161,3600,3601],{"class":1220},"(color)",[1161,3603,1416],{"class":1167},[1161,3605,3606],{"class":1163,"line":2817},[1161,3607,1491],{"class":1167},[1161,3609,3610,3612,3614],{"class":1163,"line":2843},[1161,3611,1237],{"class":1167},[1161,3613,1254],{"class":1171},[1161,3615,1175],{"class":1167},[1134,3617,3619],{"id":3618},"scoped-styles","Scoped Styles",[1113,3621,3622],{},"The scoped attribute allows you to style components in isolation. The styles declared with this attribute will only apply to this component.",[1151,3624,3626],{"className":1153,"code":3625,"language":1156,"meta":1157,"style":1157},"\u003Ctemplate>\n  \u003Cdiv class=\"example\">hi\u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.example {\n  color: red;\n}\n\u003C/style>\n",[1128,3627,3628,3636,3664,3672,3676,3687,3695,3706,3710],{"__ignoreMap":1157},[1161,3629,3630,3632,3634],{"class":1163,"line":1164},[1161,3631,1168],{"class":1167},[1161,3633,2746],{"class":1171},[1161,3635,1175],{"class":1167},[1161,3637,3638,3640,3642,3644,3646,3648,3651,3653,3655,3658,3660,3662],{"class":1163,"line":1178},[1161,3639,2753],{"class":1167},[1161,3641,2756],{"class":1171},[1161,3643,2759],{"class":1966},[1161,3645,2142],{"class":1167},[1161,3647,1270],{"class":1167},[1161,3649,3650],{"class":1195},"example",[1161,3652,1270],{"class":1167},[1161,3654,3551],{"class":1167},[1161,3656,3657],{"class":1220},"hi",[1161,3659,1237],{"class":1167},[1161,3661,2756],{"class":1171},[1161,3663,1175],{"class":1167},[1161,3665,3666,3668,3670],{"class":1163,"line":1185},[1161,3667,1237],{"class":1167},[1161,3669,2746],{"class":1171},[1161,3671,1175],{"class":1167},[1161,3673,3674],{"class":1163,"line":1202},[1161,3675,1206],{"emptyLinePlaceholder":1205},[1161,3677,3678,3680,3682,3685],{"class":1163,"line":1209},[1161,3679,1168],{"class":1167},[1161,3681,1254],{"class":1171},[1161,3683,3684],{"class":1966}," scoped",[1161,3686,1175],{"class":1167},[1161,3688,3689,3691,3693],{"class":1163,"line":1215},[1161,3690,1132],{"class":1167},[1161,3692,3650],{"class":1512},[1161,3694,1398],{"class":1167},[1161,3696,3697,3699,3701,3704],{"class":1163,"line":1234},[1161,3698,3593],{"class":1403},[1161,3700,1340],{"class":1167},[1161,3702,3703],{"class":1220}," red",[1161,3705,1416],{"class":1167},[1161,3707,3708],{"class":1163,"line":1244},[1161,3709,1491],{"class":1167},[1161,3711,3712,3714,3716],{"class":1163,"line":1249},[1161,3713,1237],{"class":1167},[1161,3715,1254],{"class":1171},[1161,3717,1175],{"class":1167},[1134,3719,3721],{"id":3720},"css-modules","CSS Modules",[1113,3723,3724,3725,3729,3730,3733],{},"You can use ",[1125,3726,3721],{"href":3727,"rel":3728},"https://github.com/css-modules/css-modules",[1145]," with the module attribute. Access it with the injected ",[1128,3731,3732],{},"$style"," variable.",[1151,3735,3737],{"className":1153,"code":3736,"language":1156,"meta":1157,"style":1157},"\u003Ctemplate>\n  \u003Cp :class=\"$style.red\">This should be red\u003C/p>\n\u003C/template>\n\n\u003Cstyle module>\n.red {\n  color: red;\n}\n\u003C/style>\n",[1128,3738,3739,3747,3780,3788,3792,3803,3811,3821,3825],{"__ignoreMap":1157},[1161,3740,3741,3743,3745],{"class":1163,"line":1164},[1161,3742,1168],{"class":1167},[1161,3744,2746],{"class":1171},[1161,3746,1175],{"class":1167},[1161,3748,3749,3751,3753,3755,3757,3759,3761,3763,3765,3767,3769,3771,3774,3776,3778],{"class":1163,"line":1178},[1161,3750,2753],{"class":1167},[1161,3752,1113],{"class":1171},[1161,3754,2298],{"class":1167},[1161,3756,2773],{"class":1966},[1161,3758,2142],{"class":1167},[1161,3760,1270],{"class":1167},[1161,3762,3732],{"class":1220},[1161,3764,1132],{"class":1167},[1161,3766,3239],{"class":1220},[1161,3768,1270],{"class":1167},[1161,3770,3551],{"class":1167},[1161,3772,3773],{"class":1220},"This should be red",[1161,3775,1237],{"class":1167},[1161,3777,1113],{"class":1171},[1161,3779,1175],{"class":1167},[1161,3781,3782,3784,3786],{"class":1163,"line":1185},[1161,3783,1237],{"class":1167},[1161,3785,2746],{"class":1171},[1161,3787,1175],{"class":1167},[1161,3789,3790],{"class":1163,"line":1202},[1161,3791,1206],{"emptyLinePlaceholder":1205},[1161,3793,3794,3796,3798,3801],{"class":1163,"line":1209},[1161,3795,1168],{"class":1167},[1161,3797,1254],{"class":1171},[1161,3799,3800],{"class":1966}," module",[1161,3802,1175],{"class":1167},[1161,3804,3805,3807,3809],{"class":1163,"line":1215},[1161,3806,1132],{"class":1167},[1161,3808,3239],{"class":1512},[1161,3810,1398],{"class":1167},[1161,3812,3813,3815,3817,3819],{"class":1163,"line":1234},[1161,3814,3593],{"class":1403},[1161,3816,1340],{"class":1167},[1161,3818,3703],{"class":1220},[1161,3820,1416],{"class":1167},[1161,3822,3823],{"class":1163,"line":1244},[1161,3824,1491],{"class":1167},[1161,3826,3827,3829,3831],{"class":1163,"line":1249},[1161,3828,1237],{"class":1167},[1161,3830,1254],{"class":1171},[1161,3832,1175],{"class":1167},[1134,3834,3836],{"id":3835},"preprocessors-support","Preprocessors Support",[1113,3838,3839],{},"SFC style blocks support preprocessors syntax. Vite come with built-in support for .scss, .sass, .less, .styl and .stylus files without configuration. You just need to install them first, and they will be available directly in SFC with the lang attribute.",[1560,3841,3842,3878,3915,3953],{},[1151,3843,3845],{"className":1153,"code":3844,"filename":2304,"language":1156,"meta":1157,"style":1157},"\u003Cstyle lang=\"scss\">\n  /* Write scss here */\n\u003C/style>\n",[1128,3846,3847,3865,3870],{"__ignoreMap":1157},[1161,3848,3849,3851,3853,3855,3857,3859,3861,3863],{"class":1163,"line":1164},[1161,3850,1168],{"class":1167},[1161,3852,1254],{"class":1171},[1161,3854,2139],{"class":1966},[1161,3856,2142],{"class":1167},[1161,3858,1270],{"class":1167},[1161,3860,2147],{"class":1195},[1161,3862,1270],{"class":1167},[1161,3864,1175],{"class":1167},[1161,3866,3867],{"class":1163,"line":1178},[1161,3868,3869],{"class":1220},"  /* Write scss here */\n",[1161,3871,3872,3874,3876],{"class":1163,"line":1185},[1161,3873,1237],{"class":1167},[1161,3875,1254],{"class":1171},[1161,3877,1175],{"class":1167},[1151,3879,3882],{"className":1153,"code":3880,"filename":3881,"language":1156,"meta":1157,"style":1157},"\u003Cstyle lang=\"sass\">\n  /* Write sass here */\n\u003C/style>\n","Sass",[1128,3883,3884,3902,3907],{"__ignoreMap":1157},[1161,3885,3886,3888,3890,3892,3894,3896,3898,3900],{"class":1163,"line":1164},[1161,3887,1168],{"class":1167},[1161,3889,1254],{"class":1171},[1161,3891,2139],{"class":1966},[1161,3893,2142],{"class":1167},[1161,3895,1270],{"class":1167},[1161,3897,2279],{"class":1195},[1161,3899,1270],{"class":1167},[1161,3901,1175],{"class":1167},[1161,3903,3904],{"class":1163,"line":1178},[1161,3905,3906],{"class":1220},"  /* Write sass here */\n",[1161,3908,3909,3911,3913],{"class":1163,"line":1185},[1161,3910,1237],{"class":1167},[1161,3912,1254],{"class":1171},[1161,3914,1175],{"class":1167},[1151,3916,3919],{"className":1153,"code":3917,"filename":3918,"language":1156,"meta":1157,"style":1157},"\u003Cstyle lang=\"less\">\n  /* Write less here */\n\u003C/style>\n","LESS",[1128,3920,3921,3940,3945],{"__ignoreMap":1157},[1161,3922,3923,3925,3927,3929,3931,3933,3936,3938],{"class":1163,"line":1164},[1161,3924,1168],{"class":1167},[1161,3926,1254],{"class":1171},[1161,3928,2139],{"class":1966},[1161,3930,2142],{"class":1167},[1161,3932,1270],{"class":1167},[1161,3934,3935],{"class":1195},"less",[1161,3937,1270],{"class":1167},[1161,3939,1175],{"class":1167},[1161,3941,3942],{"class":1163,"line":1178},[1161,3943,3944],{"class":1220},"  /* Write less here */\n",[1161,3946,3947,3949,3951],{"class":1163,"line":1185},[1161,3948,1237],{"class":1167},[1161,3950,1254],{"class":1171},[1161,3952,1175],{"class":1167},[1151,3954,3956],{"className":1153,"code":3955,"filename":2102,"language":1156,"meta":1157,"style":1157},"\u003Cstyle lang=\"stylus\">\n  /* Write stylus here */\n\u003C/style>\n",[1128,3957,3958,3977,3982],{"__ignoreMap":1157},[1161,3959,3960,3962,3964,3966,3968,3970,3973,3975],{"class":1163,"line":1164},[1161,3961,1168],{"class":1167},[1161,3963,1254],{"class":1171},[1161,3965,2139],{"class":1966},[1161,3967,2142],{"class":1167},[1161,3969,1270],{"class":1167},[1161,3971,3972],{"class":1195},"stylus",[1161,3974,1270],{"class":1167},[1161,3976,1175],{"class":1167},[1161,3978,3979],{"class":1163,"line":1178},[1161,3980,3981],{"class":1220},"  /* Write stylus here */\n",[1161,3983,3984,3986,3988],{"class":1163,"line":1185},[1161,3985,1237],{"class":1167},[1161,3987,1254],{"class":1171},[1161,3989,1175],{"class":1167},[1113,3991,2598,3992,3997,3998,4003,4004,1132],{},[1125,3993,3996],{"href":3994,"rel":3995},"https://vite.dev/guide/features.html#css",[1145],"Vite CSS docs"," and the ",[1125,3999,4002],{"href":4000,"rel":4001},"https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue",[1145],"@vitejs/plugin-vue docs",".\nFor webpack users, refer to the ",[1125,4005,4008],{"href":4006,"rel":4007},"https://vue-loader.vuejs.org",[1145],"vue loader docs",[1117,4010,4012],{"id":4011},"using-postcss","Using PostCSS",[1113,4014,4015,4016,4018],{},"Nuxt comes with postcss built-in. You can configure it in your ",[1128,4017,2297],{}," file.",[1151,4020,4022],{"className":1312,"code":4021,"filename":260,"language":1314,"meta":1157,"style":1157},"export default defineNuxtConfig({\n  postcss: {\n    plugins: {\n      'postcss-nested': {},\n      'postcss-custom-media': {}\n    }\n  }\n})\n",[1128,4023,4024,4036,4045,4054,4069,4083,4087,4091],{"__ignoreMap":1157},[1161,4025,4026,4028,4030,4032,4034],{"class":1163,"line":1164},[1161,4027,1321],{"class":1188},[1161,4029,1324],{"class":1188},[1161,4031,1327],{"class":1264},[1161,4033,1221],{"class":1220},[1161,4035,1332],{"class":1167},[1161,4037,4038,4041,4043],{"class":1163,"line":1178},[1161,4039,4040],{"class":1171},"  postcss",[1161,4042,1340],{"class":1167},[1161,4044,1398],{"class":1167},[1161,4046,4047,4050,4052],{"class":1163,"line":1185},[1161,4048,4049],{"class":1171},"    plugins",[1161,4051,1340],{"class":1167},[1161,4053,1398],{"class":1167},[1161,4055,4056,4059,4062,4064,4066],{"class":1163,"line":1202},[1161,4057,4058],{"class":1167},"      '",[1161,4060,4061],{"class":1171},"postcss-nested",[1161,4063,1224],{"class":1167},[1161,4065,1340],{"class":1167},[1161,4067,4068],{"class":1167}," {},\n",[1161,4070,4071,4073,4076,4078,4080],{"class":1163,"line":1209},[1161,4072,4058],{"class":1167},[1161,4074,4075],{"class":1171},"postcss-custom-media",[1161,4077,1224],{"class":1167},[1161,4079,1340],{"class":1167},[1161,4081,4082],{"class":1167}," {}\n",[1161,4084,4085],{"class":1163,"line":1215},[1161,4086,1835],{"class":1167},[1161,4088,4089],{"class":1163,"line":1234},[1161,4090,1840],{"class":1167},[1161,4092,4093,4095],{"class":1163,"line":1244},[1161,4094,1358],{"class":1167},[1161,4096,1231],{"class":1220},[1113,4098,4099],{},"For proper syntax highlighting in SFC, you can use the postcss lang attribute.",[1151,4101,4103],{"className":1153,"code":4102,"language":1156,"meta":1157,"style":1157},"\u003Cstyle lang=\"postcss\">\n  /* Write postcss here */\n\u003C/style>\n",[1128,4104,4105,4124,4129],{"__ignoreMap":1157},[1161,4106,4107,4109,4111,4113,4115,4117,4120,4122],{"class":1163,"line":1164},[1161,4108,1168],{"class":1167},[1161,4110,1254],{"class":1171},[1161,4112,2139],{"class":1966},[1161,4114,2142],{"class":1167},[1161,4116,1270],{"class":1167},[1161,4118,4119],{"class":1195},"postcss",[1161,4121,1270],{"class":1167},[1161,4123,1175],{"class":1167},[1161,4125,4126],{"class":1163,"line":1178},[1161,4127,4128],{"class":1220},"  /* Write postcss here */\n",[1161,4130,4131,4133,4135],{"class":1163,"line":1185},[1161,4132,1237],{"class":1167},[1161,4134,1254],{"class":1171},[1161,4136,1175],{"class":1167},[1113,4138,4139],{},"By default, Nuxt comes with the following plugins already pre-configured:",[4141,4142,4143,4155,4166,4174],"ul",{},[4144,4145,4146,4151,4152,4154],"li",{},[1125,4147,4150],{"href":4148,"rel":4149},"https://github.com/postcss/postcss-import",[1145],"postcss-import",": Improves the ",[1128,4153,1148],{}," rule",[4144,4156,4157,4162,4163,4165],{},[1125,4158,4161],{"href":4159,"rel":4160},"https://github.com/postcss/postcss-url",[1145],"postcss-url",": Transforms ",[1128,4164,1383],{}," statements",[4144,4167,4168,4173],{},[1125,4169,4172],{"href":4170,"rel":4171},"https://github.com/postcss/autoprefixer",[1145],"autoprefixer",": Automatically adds vendor prefixes",[4144,4175,4176,4181],{},[1125,4177,4180],{"href":4178,"rel":4179},"https://cssnano.github.io/cssnano",[1145],"cssnano",": Minification and purge",[1117,4183,4185],{"id":4184},"leveraging-layouts-for-multiple-styles","Leveraging Layouts For Multiple Styles",[1113,4187,4188],{},"If you need to style different parts of your application completely differently, you can use layouts.\nUse different styles for different layouts.",[1151,4190,4192],{"className":1153,"code":4191,"language":1156,"meta":1157,"style":1157},"\u003Ctemplate>\n  \u003Cdiv class=\"default-layout\">\n    \u003Ch1>Default Layout\u003C/h1>\n    \u003Cslot />\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\n.default-layout {\n  color: red;\n}\n\u003C/style>\n",[1128,4193,4194,4202,4221,4239,4249,4258,4266,4270,4278,4286,4296,4300],{"__ignoreMap":1157},[1161,4195,4196,4198,4200],{"class":1163,"line":1164},[1161,4197,1168],{"class":1167},[1161,4199,2746],{"class":1171},[1161,4201,1175],{"class":1167},[1161,4203,4204,4206,4208,4210,4212,4214,4217,4219],{"class":1163,"line":1178},[1161,4205,2753],{"class":1167},[1161,4207,2756],{"class":1171},[1161,4209,2759],{"class":1966},[1161,4211,2142],{"class":1167},[1161,4213,1270],{"class":1167},[1161,4215,4216],{"class":1195},"default-layout",[1161,4218,1270],{"class":1167},[1161,4220,1175],{"class":1167},[1161,4222,4223,4226,4228,4230,4233,4235,4237],{"class":1163,"line":1185},[1161,4224,4225],{"class":1167},"    \u003C",[1161,4227,1513],{"class":1171},[1161,4229,3551],{"class":1167},[1161,4231,4232],{"class":1220},"Default Layout",[1161,4234,1237],{"class":1167},[1161,4236,1513],{"class":1171},[1161,4238,1175],{"class":1167},[1161,4240,4241,4243,4246],{"class":1163,"line":1202},[1161,4242,4225],{"class":1167},[1161,4244,4245],{"class":1171},"slot",[1161,4247,4248],{"class":1167}," />\n",[1161,4250,4251,4254,4256],{"class":1163,"line":1209},[1161,4252,4253],{"class":1167},"  \u003C/",[1161,4255,2756],{"class":1171},[1161,4257,1175],{"class":1167},[1161,4259,4260,4262,4264],{"class":1163,"line":1215},[1161,4261,1237],{"class":1167},[1161,4263,2746],{"class":1171},[1161,4265,1175],{"class":1167},[1161,4267,4268],{"class":1163,"line":1234},[1161,4269,1206],{"emptyLinePlaceholder":1205},[1161,4271,4272,4274,4276],{"class":1163,"line":1244},[1161,4273,1168],{"class":1167},[1161,4275,1254],{"class":1171},[1161,4277,1175],{"class":1167},[1161,4279,4280,4282,4284],{"class":1163,"line":1249},[1161,4281,1132],{"class":1167},[1161,4283,4216],{"class":1512},[1161,4285,1398],{"class":1167},[1161,4287,4288,4290,4292,4294],{"class":1163,"line":1259},[1161,4289,3593],{"class":1403},[1161,4291,1340],{"class":1167},[1161,4293,3703],{"class":1220},[1161,4295,1416],{"class":1167},[1161,4297,4298],{"class":1163,"line":1281},[1161,4299,1491],{"class":1167},[1161,4301,4302,4304,4306],{"class":1163,"line":2817},[1161,4303,1237],{"class":1167},[1161,4305,1254],{"class":1171},[1161,4307,1175],{"class":1167},[1855,4309],{"to":192},[1117,4311,4313],{"id":4312},"third-party-libraries-and-modules","Third Party Libraries And Modules",[1113,4315,4316,4317,4322,4323,1132],{},"Nuxt isn't opinionated when it comes to styling and provides you with a wide variety of options. You can use any styling tool that you want, such as popular libraries like ",[1125,4318,4321],{"href":4319,"rel":4320},"https://unocss.dev",[1145],"UnoCSS"," or ",[1125,4324,4327],{"href":4325,"rel":4326},"https://tailwindcss.com",[1145],"Tailwind CSS",[1113,4329,4330,4331,4335],{},"The community and the Nuxt team have developed plenty of Nuxt modules to make the integration easier.\nYou can discover them on the ",[1125,4332,4334],{"href":4333},"/modules","modules section"," of the website.\nHere are a few modules to help you get started:",[4141,4337,4338,4344,4350,4358,4365,4373],{},[4144,4339,4340,4343],{},[1125,4341,4321],{"href":4342},"/modules/unocss",": Instant on-demand atomic CSS engine",[4144,4345,4346,4349],{},[1125,4347,4327],{"href":4348},"/modules/tailwindcss",": Utility-first CSS framework",[4144,4351,4352,4357],{},[1125,4353,4356],{"href":4354,"rel":4355},"https://github.com/nuxt-modules/fontaine",[1145],"Fontaine",": Font metric fallback",[4144,4359,4360,4364],{},[1125,4361,4363],{"href":2593,"rel":4362},[1145],"Pinceau",": Adaptable styling framework",[4144,4366,4367,4372],{},[1125,4368,4371],{"href":4369,"rel":4370},"https://ui.nuxt.com",[1145],"Nuxt UI",": A UI Library for Modern Web Apps",[4144,4374,4375,4380],{},[1125,4376,4379],{"href":4377,"rel":4378},"https://panda-css.com/docs/installation/nuxt",[1145],"Panda CSS",": CSS-in-JS engine that generates atomic CSS at build time",[1113,4382,4383,4384,4387,4388,4391,4392,4395],{},"Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a ",[1125,4385,4386],{"href":212},"Nuxt plugin"," and/or ",[1125,4389,4390],{"href":304},"make your own module",". Share them with the ",[1125,4393,4394],{"href":4333},"community"," if you do!",[1134,4397,4399],{"id":4398},"easily-load-webfonts","Easily Load Webfonts",[1113,4401,3724,4402,4407],{},[1125,4403,4406],{"href":4404,"rel":4405},"https://github.com/nuxt-modules/google-fonts",[1145],"the Nuxt Google Fonts module"," to load Google Fonts.",[1113,4409,4410,4411,4415,4416,4421],{},"If you are using ",[1125,4412,4321],{"href":4413,"rel":4414},"https://unocss.dev/integrations/nuxt",[1145],", note that it comes with a ",[1125,4417,4420],{"href":4418,"rel":4419},"https://unocss.dev/presets/web-fonts",[1145],"web fonts presets"," to conveniently load fonts from common providers, including Google Fonts and more.",[1117,4423,788],{"id":4424},"advanced",[1134,4426,59],{"id":4427},"transitions",[1113,4429,4430,4431,4434,4435,1132],{},"Nuxt comes with the same ",[1128,4432,4433],{},"\u003CTransition>"," element that Vue has, and also has support for the experimental ",[1125,4436,4438],{"href":4437},"/docs/getting-started/transitions#view-transitions-api-experimental","View Transitions API",[1855,4440],{"to":60},[1134,4442,4444],{"id":4443},"font-advanced-optimization","Font Advanced Optimization",[1113,4446,4447,4448,4451,4452,4457],{},"We would recommend using ",[1125,4449,4356],{"href":4354,"rel":4450},[1145]," to reduce your ",[1125,4453,4456],{"href":4454,"rel":4455},"https://web.dev/cls",[1145],"CLS",". If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.",[1289,4459,4460],{},[1113,4461,4462],{},"Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling!",[1134,4464,4466],{"id":4465},"lcp-advanced-optimizations","LCP Advanced optimizations",[1113,4468,4469],{},"You can do the following to speed-up the download of your global CSS files:",[4141,4471,4472,4475,4478,4481],{},[4144,4473,4474],{},"Use a CDN so the files are physically closer to your users",[4144,4476,4477],{},"Compress your assets, ideally using Brotli",[4144,4479,4480],{},"Use HTTP2/HTTP3 for delivery",[4144,4482,4483],{},"Host your assets on the same domain (do not use a different subdomain)",[1113,4485,4486,4487,1132],{},"Most of these things should be done for you automatically if you're using modern platforms like Cloudflare, Netlify or Vercel.\nYou can find an LCP optimization guide on ",[1125,4488,2054],{"href":4489,"rel":4490},"https://web.dev/optimize-lcp",[1145],[1113,4492,4493],{},"If all of your CSS is inlined by Nuxt, you can (experimentally) completely stop external CSS files from being referenced in your rendered HTML.\nYou can achieve that with a hook, that you can place in a module, or in your Nuxt configuration file.",[1151,4495,4497],{"className":1312,"code":4496,"filename":260,"language":1314,"meta":1157,"style":1157},"export default defineNuxtConfig({\n  hooks: {\n    'build:manifest': (manifest) => {\n      // find the app entry, css list\n      const css = Object.values(manifest).find(options => options.isEntry)?.css\n      if (css) {\n        // start from the end of the array and go to the beginning\n        for (let i = css.length - 1; i >= 0; i--) {\n          // if it starts with 'entry', remove it from the list\n          if (css[i].startsWith('entry')) css.splice(i, 1)\n        }\n      }\n    },\n  },\n})\n",[1128,4498,4499,4511,4520,4543,4548,4601,4615,4620,4670,4675,4725,4729,4733,4738,4744],{"__ignoreMap":1157},[1161,4500,4501,4503,4505,4507,4509],{"class":1163,"line":1164},[1161,4502,1321],{"class":1188},[1161,4504,1324],{"class":1188},[1161,4506,1327],{"class":1264},[1161,4508,1221],{"class":1220},[1161,4510,1332],{"class":1167},[1161,4512,4513,4516,4518],{"class":1163,"line":1178},[1161,4514,4515],{"class":1171},"  hooks",[1161,4517,1340],{"class":1167},[1161,4519,1398],{"class":1167},[1161,4521,4522,4525,4528,4530,4532,4534,4537,4539,4541],{"class":1163,"line":1185},[1161,4523,4524],{"class":1167},"    '",[1161,4526,4527],{"class":1171},"build:manifest",[1161,4529,1224],{"class":1167},[1161,4531,1340],{"class":1167},[1161,4533,1998],{"class":1167},[1161,4535,4536],{"class":1960},"manifest",[1161,4538,1437],{"class":1167},[1161,4540,1967],{"class":1966},[1161,4542,1398],{"class":1167},[1161,4544,4545],{"class":1163,"line":1202},[1161,4546,4547],{"class":1181},"      // find the app entry, css list\n",[1161,4549,4550,4553,4556,4559,4562,4564,4567,4569,4571,4573,4575,4578,4580,4583,4585,4588,4590,4593,4595,4598],{"class":1163,"line":1209},[1161,4551,4552],{"class":1966},"      const",[1161,4554,4555],{"class":1220}," css",[1161,4557,4558],{"class":1167}," =",[1161,4560,4561],{"class":1220}," Object",[1161,4563,1132],{"class":1167},[1161,4565,4566],{"class":1264},"values",[1161,4568,1221],{"class":1171},[1161,4570,4536],{"class":1220},[1161,4572,1437],{"class":1171},[1161,4574,1132],{"class":1167},[1161,4576,4577],{"class":1264},"find",[1161,4579,1221],{"class":1171},[1161,4581,4582],{"class":1960},"options",[1161,4584,1967],{"class":1966},[1161,4586,4587],{"class":1220}," options",[1161,4589,1132],{"class":1167},[1161,4591,4592],{"class":1220},"isEntry",[1161,4594,1437],{"class":1171},[1161,4596,4597],{"class":1167},"?.",[1161,4599,4600],{"class":1220},"css\n",[1161,4602,4603,4606,4608,4610,4613],{"class":1163,"line":1215},[1161,4604,4605],{"class":1188},"      if",[1161,4607,1998],{"class":1171},[1161,4609,1303],{"class":1220},[1161,4611,4612],{"class":1171},") ",[1161,4614,1332],{"class":1167},[1161,4616,4617],{"class":1163,"line":1234},[1161,4618,4619],{"class":1181},"        // start from the end of the array and go to the beginning\n",[1161,4621,4622,4625,4627,4630,4633,4635,4637,4639,4642,4645,4648,4651,4653,4656,4659,4661,4663,4666,4668],{"class":1163,"line":1244},[1161,4623,4624],{"class":1188},"        for",[1161,4626,1998],{"class":1171},[1161,4628,4629],{"class":1966},"let",[1161,4631,4632],{"class":1220}," i",[1161,4634,4558],{"class":1167},[1161,4636,4555],{"class":1220},[1161,4638,1132],{"class":1167},[1161,4640,4641],{"class":1220},"length",[1161,4643,4644],{"class":1167}," -",[1161,4646,4647],{"class":3259}," 1",[1161,4649,4650],{"class":1167},";",[1161,4652,4632],{"class":1220},[1161,4654,4655],{"class":1167}," >=",[1161,4657,4658],{"class":3259}," 0",[1161,4660,4650],{"class":1167},[1161,4662,4632],{"class":1220},[1161,4664,4665],{"class":1167},"--",[1161,4667,4612],{"class":1171},[1161,4669,1332],{"class":1167},[1161,4671,4672],{"class":1163,"line":1249},[1161,4673,4674],{"class":1181},"          // if it starts with 'entry', remove it from the list\n",[1161,4676,4677,4680,4682,4684,4686,4689,4691,4693,4696,4698,4700,4703,4705,4708,4710,4712,4715,4717,4719,4721,4723],{"class":1163,"line":1259},[1161,4678,4679],{"class":1188},"          if",[1161,4681,1998],{"class":1171},[1161,4683,1303],{"class":1220},[1161,4685,3396],{"class":1171},[1161,4687,4688],{"class":1220},"i",[1161,4690,3179],{"class":1171},[1161,4692,1132],{"class":1167},[1161,4694,4695],{"class":1264},"startsWith",[1161,4697,1221],{"class":1171},[1161,4699,1224],{"class":1167},[1161,4701,4702],{"class":1195},"entry",[1161,4704,1224],{"class":1167},[1161,4706,4707],{"class":1171},")) ",[1161,4709,1303],{"class":1220},[1161,4711,1132],{"class":1167},[1161,4713,4714],{"class":1264},"splice",[1161,4716,1221],{"class":1171},[1161,4718,4688],{"class":1220},[1161,4720,1530],{"class":1167},[1161,4722,4647],{"class":3259},[1161,4724,1231],{"class":1171},[1161,4726,4727],{"class":1163,"line":1281},[1161,4728,2373],{"class":1167},[1161,4730,4731],{"class":1163,"line":2817},[1161,4732,2378],{"class":1167},[1161,4734,4735],{"class":1163,"line":2843},[1161,4736,4737],{"class":1167},"    },\n",[1161,4739,4741],{"class":1163,"line":4740},14,[1161,4742,4743],{"class":1167},"  },\n",[1161,4745,4747,4749],{"class":1163,"line":4746},15,[1161,4748,1358],{"class":1167},[1161,4750,1231],{"class":1220},[1254,4752,4753],{},"html pre.shiki code .sYp4K, html code.shiki .sYp4K{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sQ5dg, html code.shiki .sQ5dg{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}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 .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 .s5UST, html code.shiki .s5UST{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .spdxX, html code.shiki .spdxX{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .szd4z, html code.shiki .szd4z{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}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 .sACJC, html code.shiki .sACJC{--shiki-light:#8796B0;--shiki-default:#8796B0;--shiki-dark:#B2CCD6}html pre.shiki code .sT2Ow, html code.shiki .sT2Ow{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .sRBFq, html code.shiki .sRBFq{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sagxc, html code.shiki .sagxc{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .sV9sa, html code.shiki .sV9sa{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}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":1157,"searchDepth":1178,"depth":1178,"links":4755},[4756,4762,4766,4769,4777,4778,4779,4782],{"id":1119,"depth":1178,"text":1120,"children":4757},[4758,4759,4760,4761],{"id":1136,"depth":1185,"text":1137},{"id":1296,"depth":1185,"text":1297},{"id":1368,"depth":1185,"text":1369},{"id":1550,"depth":1185,"text":1551},{"id":1737,"depth":1178,"text":1738,"children":4763},[4764,4765],{"id":1849,"depth":1185,"text":1850},{"id":1927,"depth":1185,"text":1928},{"id":2057,"depth":1178,"text":2058,"children":4767},[4768],{"id":2492,"depth":1185,"text":2493},{"id":2586,"depth":1178,"text":2587,"children":4770},[4771,4772,4774,4775,4776],{"id":2607,"depth":1185,"text":2608},{"id":3458,"depth":1185,"text":4773},"Dynamic Styles With v-bind",{"id":3618,"depth":1185,"text":3619},{"id":3720,"depth":1185,"text":3721},{"id":3835,"depth":1185,"text":3836},{"id":4011,"depth":1178,"text":4012},{"id":4184,"depth":1178,"text":4185},{"id":4312,"depth":1178,"text":4313,"children":4780},[4781],{"id":4398,"depth":1185,"text":4399},{"id":4424,"depth":1178,"text":788,"children":4783},[4784,4785,4786],{"id":4427,"depth":1185,"text":59},{"id":4443,"depth":1185,"text":4444},{"id":4465,"depth":1185,"text":4466},"Learn how to style your Nuxt application.","md",{},{"icon":47},{"title":44,"description":4787},"BCzz91RMPG",[4794,4796],{"title":39,"path":40,"stem":41,"description":4795,"icon":42,"children":-1},"Nuxt offers two options for your assets.",{"title":49,"path":50,"stem":51,"description":4797,"icon":52,"children":-1},"Nuxt file-system routing creates a route for every file in the pages/ directory.",1742651351666]