[{"data":1,"prerenderedAt":4812},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-styling":1119,"-docs-getting-started-styling-surround":4807},[4,1030],{"title":5,"titleTemplate":6,"icon":7,"path":8,"stem":9,"children":10,"page":108},"Docs",null,"i-lucide-book-marked","/docs","docs",[11,109,349,813,905,942,984,1026],{"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,326],{"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,322],{"title":279,"path":280,"stem":281,"titleTemplate":6},"Events","/docs/guide/going-further/events","docs/2.guide/3.going-further/1.events",{"title":283,"path":284,"stem":285,"titleTemplate":6},"Experimental Features","/docs/guide/going-further/experimental-features","docs/2.guide/3.going-further/1.experimental-features",{"title":287,"path":288,"stem":289,"titleTemplate":6},"Features","/docs/guide/going-further/features","docs/2.guide/3.going-further/1.features",{"title":291,"path":292,"stem":293,"titleTemplate":6},"How Nuxt Works?","/docs/guide/going-further/internals","docs/2.guide/3.going-further/1.internals",{"title":295,"path":296,"stem":297,"titleTemplate":6},"Runtime Config","/docs/guide/going-further/runtime-config","docs/2.guide/3.going-further/10.runtime-config",{"title":299,"path":300,"stem":301,"titleTemplate":6},"Nightly Release Channel","/docs/guide/going-further/nightly-release-channel","docs/2.guide/3.going-further/11.nightly-release-channel",{"title":303,"path":304,"stem":305,"titleTemplate":6},"Lifecycle Hooks","/docs/guide/going-further/hooks","docs/2.guide/3.going-further/2.hooks",{"title":307,"path":308,"stem":309,"titleTemplate":6},"Module Author Guide","/docs/guide/going-further/modules","docs/2.guide/3.going-further/3.modules",{"title":311,"path":312,"stem":313,"titleTemplate":6},"Nuxt Kit","/docs/guide/going-further/kit","docs/2.guide/3.going-further/4.kit",{"title":315,"path":316,"stem":317,"titleTemplate":6},"NuxtApp","/docs/guide/going-further/nuxt-app","docs/2.guide/3.going-further/6.nuxt-app",{"title":319,"path":320,"stem":321,"titleTemplate":6},"Authoring Nuxt Layers","/docs/guide/going-further/layers","docs/2.guide/3.going-further/7.layers",{"title":323,"path":324,"stem":325,"titleTemplate":6},"Debugging","/docs/guide/going-further/debugging","docs/2.guide/3.going-further/9.debugging",{"title":327,"titleTemplate":328,"icon":329,"path":330,"stem":331,"children":332,"page":108},"Recipes","%s · Recipes","i-lucide-cooking-pot","/docs/guide/recipes","docs/2.guide/4.recipes",[333,337,341,345],{"title":334,"path":335,"stem":336,"titleTemplate":6},"Custom Routing","/docs/guide/recipes/custom-routing","docs/2.guide/4.recipes/1.custom-routing",{"title":338,"path":339,"stem":340,"titleTemplate":6},"Vite Plugins","/docs/guide/recipes/vite-plugin","docs/2.guide/4.recipes/2.vite-plugin",{"title":342,"path":343,"stem":344,"titleTemplate":6},"Custom useFetch","/docs/guide/recipes/custom-usefetch","docs/2.guide/4.recipes/3.custom-usefetch",{"title":346,"path":347,"stem":348,"titleTemplate":6},"Sessions and Authentication","/docs/guide/recipes/sessions-and-authentication","docs/2.guide/4.recipes/4.sessions-and-authentication",{"title":350,"titleTemplate":351,"icon":352,"path":353,"stem":354,"children":355,"page":108},"API","%s · Nuxt API","i-lucide-code-xml","/docs/api","docs/3.api",[356,424,547,662,729,795,808],{"title":357,"titleTemplate":358,"icon":359,"path":360,"stem":361,"children":362,"page":108},"Components","%s · Nuxt Components","i-lucide-box","/docs/api/components","docs/3.api/1.components",[363,367,371,375,379,383,388,392,396,400,404,408,412,416,420],{"title":364,"path":365,"stem":366,"titleTemplate":6},"\u003CClientOnly>","/docs/api/components/client-only","docs/3.api/1.components/1.client-only",{"title":368,"path":369,"stem":370,"titleTemplate":6},"\u003CDevOnly>","/docs/api/components/dev-only","docs/3.api/1.components/1.dev-only",{"title":372,"path":373,"stem":374,"titleTemplate":6},"\u003CNuxtClientFallback>","/docs/api/components/nuxt-client-fallback","docs/3.api/1.components/1.nuxt-client-fallback",{"title":376,"path":377,"stem":378,"titleTemplate":6},"\u003CNuxtPicture>","/docs/api/components/nuxt-picture","docs/3.api/1.components/10.nuxt-picture",{"title":380,"path":381,"stem":382,"titleTemplate":6},"\u003CTeleport>","/docs/api/components/teleports","docs/3.api/1.components/11.teleports",{"title":384,"path":385,"stem":386,"titleTemplate":6,"badge":387},"\u003CNuxtRouteAnnouncer>","/docs/api/components/nuxt-route-announcer","docs/3.api/1.components/12.nuxt-route-announcer","New",{"title":389,"path":390,"stem":391,"titleTemplate":6,"badge":387},"\u003CNuxtTime>","/docs/api/components/nuxt-time","docs/3.api/1.components/13.nuxt-time",{"title":393,"path":394,"stem":395,"titleTemplate":6},"\u003CNuxtPage>","/docs/api/components/nuxt-page","docs/3.api/1.components/2.nuxt-page",{"title":397,"path":398,"stem":399,"titleTemplate":6},"\u003CNuxtLayout>","/docs/api/components/nuxt-layout","docs/3.api/1.components/3.nuxt-layout",{"title":401,"path":402,"stem":403,"titleTemplate":6},"\u003CNuxtLink>","/docs/api/components/nuxt-link","docs/3.api/1.components/4.nuxt-link",{"title":405,"path":406,"stem":407,"titleTemplate":6},"\u003CNuxtLoadingIndicator>","/docs/api/components/nuxt-loading-indicator","docs/3.api/1.components/5.nuxt-loading-indicator",{"title":409,"path":410,"stem":411,"titleTemplate":6},"\u003CNuxtErrorBoundary>","/docs/api/components/nuxt-error-boundary","docs/3.api/1.components/6.nuxt-error-boundary",{"title":413,"path":414,"stem":415,"titleTemplate":6},"\u003CNuxtWelcome>","/docs/api/components/nuxt-welcome","docs/3.api/1.components/7.nuxt-welcome",{"title":417,"path":418,"stem":419,"titleTemplate":6},"\u003CNuxtIsland>","/docs/api/components/nuxt-island","docs/3.api/1.components/8.nuxt-island",{"title":421,"path":422,"stem":423,"titleTemplate":6},"\u003CNuxtImg>","/docs/api/components/nuxt-img","docs/3.api/1.components/9.nuxt-img",{"title":425,"titleTemplate":426,"icon":427,"path":428,"stem":429,"children":430,"page":108},"Composables","%s · Nuxt Composables","i-lucide-arrow-left-right","/docs/api/composables","docs/3.api/2.composables",[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,539,543],{"title":432,"path":433,"stem":434,"titleTemplate":6},"onPrehydrate","/docs/api/composables/on-prehydrate","docs/3.api/2.composables/on-prehydrate",{"title":436,"path":437,"stem":438,"titleTemplate":6},"useAppConfig","/docs/api/composables/use-app-config","docs/3.api/2.composables/use-app-config",{"title":440,"path":441,"stem":442,"titleTemplate":6},"useAsyncData","/docs/api/composables/use-async-data","docs/3.api/2.composables/use-async-data",{"title":444,"path":445,"stem":446,"titleTemplate":6},"useCookie","/docs/api/composables/use-cookie","docs/3.api/2.composables/use-cookie",{"title":448,"path":449,"stem":450,"titleTemplate":6},"useError","/docs/api/composables/use-error","docs/3.api/2.composables/use-error",{"title":452,"path":453,"stem":454,"titleTemplate":6},"useFetch","/docs/api/composables/use-fetch","docs/3.api/2.composables/use-fetch",{"title":456,"path":457,"stem":458,"titleTemplate":6},"useHead","/docs/api/composables/use-head","docs/3.api/2.composables/use-head",{"title":460,"path":461,"stem":462,"titleTemplate":6},"useHeadSafe","/docs/api/composables/use-head-safe","docs/3.api/2.composables/use-head-safe",{"title":464,"path":465,"stem":466,"titleTemplate":6},"useHydration","/docs/api/composables/use-hydration","docs/3.api/2.composables/use-hydration",{"title":468,"path":469,"stem":470,"titleTemplate":6},"useLazyAsyncData","/docs/api/composables/use-lazy-async-data","docs/3.api/2.composables/use-lazy-async-data",{"title":472,"path":473,"stem":474,"titleTemplate":6},"useLazyFetch","/docs/api/composables/use-lazy-fetch","docs/3.api/2.composables/use-lazy-fetch",{"title":476,"path":477,"stem":478,"titleTemplate":6},"useLoadingIndicator","/docs/api/composables/use-loading-indicator","docs/3.api/2.composables/use-loading-indicator",{"title":480,"path":481,"stem":482,"titleTemplate":6},"useNuxtApp","/docs/api/composables/use-nuxt-app","docs/3.api/2.composables/use-nuxt-app",{"title":484,"path":485,"stem":486,"titleTemplate":6},"useNuxtData","/docs/api/composables/use-nuxt-data","docs/3.api/2.composables/use-nuxt-data",{"title":488,"path":489,"stem":490,"titleTemplate":6},"usePreviewMode","/docs/api/composables/use-preview-mode","docs/3.api/2.composables/use-preview-mode",{"title":492,"path":493,"stem":494,"titleTemplate":6},"useRequestEvent","/docs/api/composables/use-request-event","docs/3.api/2.composables/use-request-event",{"title":496,"path":497,"stem":498,"titleTemplate":6},"useRequestFetch","/docs/api/composables/use-request-fetch","docs/3.api/2.composables/use-request-fetch",{"title":500,"path":501,"stem":502,"titleTemplate":6},"useRequestHeader","/docs/api/composables/use-request-header","docs/3.api/2.composables/use-request-header",{"title":504,"path":505,"stem":506,"titleTemplate":6},"useRequestHeaders","/docs/api/composables/use-request-headers","docs/3.api/2.composables/use-request-headers",{"title":508,"path":509,"stem":510,"titleTemplate":6},"useRequestURL","/docs/api/composables/use-request-url","docs/3.api/2.composables/use-request-url",{"title":512,"path":513,"stem":514,"titleTemplate":6},"useResponseHeader","/docs/api/composables/use-response-header","docs/3.api/2.composables/use-response-header",{"title":516,"path":517,"stem":518,"titleTemplate":6},"useRoute","/docs/api/composables/use-route","docs/3.api/2.composables/use-route",{"title":520,"path":521,"stem":522,"titleTemplate":6,"badge":387},"useRouteAnnouncer","/docs/api/composables/use-route-announcer","docs/3.api/2.composables/use-route-announcer",{"title":524,"path":525,"stem":526,"titleTemplate":6},"useRouter","/docs/api/composables/use-router","docs/3.api/2.composables/use-router",{"title":528,"path":529,"stem":530,"titleTemplate":6},"useRuntimeConfig","/docs/api/composables/use-runtime-config","docs/3.api/2.composables/use-runtime-config",{"title":532,"path":533,"stem":534,"titleTemplate":6},"useRuntimeHook","/docs/api/composables/use-runtime-hook","docs/3.api/2.composables/use-runtime-hook",{"title":536,"path":537,"stem":538,"titleTemplate":6},"useSeoMeta","/docs/api/composables/use-seo-meta","docs/3.api/2.composables/use-seo-meta",{"title":540,"path":541,"stem":542,"titleTemplate":6},"useServerSeoMeta","/docs/api/composables/use-server-seo-meta","docs/3.api/2.composables/use-server-seo-meta",{"title":544,"path":545,"stem":546,"titleTemplate":6},"useState","/docs/api/composables/use-state","docs/3.api/2.composables/use-state",{"title":548,"titleTemplate":549,"icon":550,"path":551,"stem":552,"children":553,"page":108},"Utils","%s · Nuxt Utils","i-lucide-square-function","/docs/api/utils","docs/3.api/3.utils",[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,654,658],{"title":555,"path":556,"stem":557,"titleTemplate":6},"$fetch","/docs/api/utils/dollarfetch","docs/3.api/3.utils/$fetch",{"title":559,"path":560,"stem":561,"titleTemplate":6},"abortNavigation","/docs/api/utils/abort-navigation","docs/3.api/3.utils/abort-navigation",{"title":563,"path":564,"stem":565,"titleTemplate":6},"addRouteMiddleware","/docs/api/utils/add-route-middleware","docs/3.api/3.utils/add-route-middleware",{"title":567,"path":568,"stem":569,"titleTemplate":6,"badge":387},"callOnce","/docs/api/utils/call-once","docs/3.api/3.utils/call-once",{"title":571,"path":572,"stem":573,"titleTemplate":6},"clearError","/docs/api/utils/clear-error","docs/3.api/3.utils/clear-error",{"title":575,"path":576,"stem":577,"titleTemplate":6},"clearNuxtData","/docs/api/utils/clear-nuxt-data","docs/3.api/3.utils/clear-nuxt-data",{"title":579,"path":580,"stem":581,"titleTemplate":6},"clearNuxtState","/docs/api/utils/clear-nuxt-state","docs/3.api/3.utils/clear-nuxt-state",{"title":583,"path":584,"stem":585,"titleTemplate":6},"createError","/docs/api/utils/create-error","docs/3.api/3.utils/create-error",{"title":587,"path":588,"stem":589,"titleTemplate":6},"defineNuxtComponent","/docs/api/utils/define-nuxt-component","docs/3.api/3.utils/define-nuxt-component",{"title":591,"path":592,"stem":593,"titleTemplate":6},"defineNuxtRouteMiddleware","/docs/api/utils/define-nuxt-route-middleware","docs/3.api/3.utils/define-nuxt-route-middleware",{"title":595,"path":596,"stem":597,"titleTemplate":6},"definePageMeta","/docs/api/utils/define-page-meta","docs/3.api/3.utils/define-page-meta",{"title":599,"path":600,"stem":601,"titleTemplate":6},"defineRouteRules","/docs/api/utils/define-route-rules","docs/3.api/3.utils/define-route-rules",{"title":603,"path":604,"stem":605,"titleTemplate":6},"navigateTo","/docs/api/utils/navigate-to","docs/3.api/3.utils/navigate-to",{"title":607,"path":608,"stem":609,"titleTemplate":6},"onBeforeRouteLeave","/docs/api/utils/on-before-route-leave","docs/3.api/3.utils/on-before-route-leave",{"title":611,"path":612,"stem":613,"titleTemplate":6},"onBeforeRouteUpdate","/docs/api/utils/on-before-route-update","docs/3.api/3.utils/on-before-route-update",{"title":615,"path":616,"stem":617,"titleTemplate":6},"onNuxtReady","/docs/api/utils/on-nuxt-ready","docs/3.api/3.utils/on-nuxt-ready",{"title":619,"path":620,"stem":621,"titleTemplate":6},"prefetchComponents","/docs/api/utils/prefetch-components","docs/3.api/3.utils/prefetch-components",{"title":623,"path":624,"stem":625,"titleTemplate":6},"preloadComponents","/docs/api/utils/preload-components","docs/3.api/3.utils/preload-components",{"title":627,"path":628,"stem":629,"titleTemplate":6},"preloadRouteComponents","/docs/api/utils/preload-route-components","docs/3.api/3.utils/preload-route-components",{"title":631,"path":632,"stem":633,"titleTemplate":6},"prerenderRoutes","/docs/api/utils/prerender-routes","docs/3.api/3.utils/prerender-routes",{"title":635,"path":636,"stem":637,"titleTemplate":6,"badge":387},"refreshCookie","/docs/api/utils/refresh-cookie","docs/3.api/3.utils/refresh-cookie",{"title":639,"path":640,"stem":641,"titleTemplate":6},"refreshNuxtData","/docs/api/utils/refresh-nuxt-data","docs/3.api/3.utils/refresh-nuxt-data",{"title":643,"path":644,"stem":645,"titleTemplate":6},"reloadNuxtApp","/docs/api/utils/reload-nuxt-app","docs/3.api/3.utils/reload-nuxt-app",{"title":647,"path":648,"stem":649,"titleTemplate":6},"setPageLayout","/docs/api/utils/set-page-layout","docs/3.api/3.utils/set-page-layout",{"title":651,"path":652,"stem":653,"titleTemplate":6},"setResponseStatus","/docs/api/utils/set-response-status","docs/3.api/3.utils/set-response-status",{"title":655,"path":656,"stem":657,"titleTemplate":6},"showError","/docs/api/utils/show-error","docs/3.api/3.utils/show-error",{"title":659,"path":660,"stem":661,"titleTemplate":6},"updateAppConfig","/docs/api/utils/update-app-config","docs/3.api/3.utils/update-app-config",{"title":663,"titleTemplate":664,"icon":665,"path":666,"stem":667,"children":668,"page":108},"Commands","%s · Nuxt Commands","i-lucide-square-terminal","/docs/api/commands","docs/3.api/4.commands",[669,673,677,681,685,689,693,697,701,705,709,713,717,721,725],{"title":670,"path":671,"stem":672,"titleTemplate":6},"nuxt add","/docs/api/commands/add","docs/3.api/4.commands/add",{"title":674,"path":675,"stem":676,"titleTemplate":6},"nuxt analyze","/docs/api/commands/analyze","docs/3.api/4.commands/analyze",{"title":678,"path":679,"stem":680,"titleTemplate":6},"nuxt build","/docs/api/commands/build","docs/3.api/4.commands/build",{"title":682,"path":683,"stem":684,"titleTemplate":6},"nuxt build-module","/docs/api/commands/build-module","docs/3.api/4.commands/build-module",{"title":686,"path":687,"stem":688,"titleTemplate":6},"nuxt cleanup","/docs/api/commands/cleanup","docs/3.api/4.commands/cleanup",{"title":690,"path":691,"stem":692,"titleTemplate":6},"nuxt dev","/docs/api/commands/dev","docs/3.api/4.commands/dev",{"title":694,"path":695,"stem":696,"titleTemplate":6},"nuxt devtools","/docs/api/commands/devtools","docs/3.api/4.commands/devtools",{"title":698,"path":699,"stem":700,"titleTemplate":6},"nuxt generate","/docs/api/commands/generate","docs/3.api/4.commands/generate",{"title":702,"path":703,"stem":704,"titleTemplate":6},"nuxt info","/docs/api/commands/info","docs/3.api/4.commands/info",{"title":706,"path":707,"stem":708,"titleTemplate":6},"create nuxt","/docs/api/commands/init","docs/3.api/4.commands/init",{"title":710,"path":711,"stem":712,"titleTemplate":6},"nuxt module","/docs/api/commands/module","docs/3.api/4.commands/module",{"title":714,"path":715,"stem":716,"titleTemplate":6},"nuxt prepare","/docs/api/commands/prepare","docs/3.api/4.commands/prepare",{"title":718,"path":719,"stem":720,"titleTemplate":6},"nuxt preview","/docs/api/commands/preview","docs/3.api/4.commands/preview",{"title":722,"path":723,"stem":724,"titleTemplate":6},"nuxt typecheck","/docs/api/commands/typecheck","docs/3.api/4.commands/typecheck",{"title":726,"path":727,"stem":728,"titleTemplate":6},"nuxt upgrade","/docs/api/commands/upgrade","docs/3.api/4.commands/upgrade",{"title":311,"titleTemplate":730,"icon":731,"path":732,"stem":733,"children":734,"page":108},"%s · Nuxt Kit","i-lucide-package","/docs/api/kit","docs/3.api/5.kit",[735,738,741,745,749,753,757,761,765,769,773,776,779,783,787,791],{"title":143,"path":736,"stem":737,"titleTemplate":6},"/docs/api/kit/modules","docs/3.api/5.kit/1.modules",{"title":295,"path":739,"stem":740,"titleTemplate":6},"/docs/api/kit/runtime-config","docs/3.api/5.kit/10.runtime-config",{"title":742,"path":743,"stem":744,"titleTemplate":6},"Templates","/docs/api/kit/templates","docs/3.api/5.kit/10.templates",{"title":746,"path":747,"stem":748,"titleTemplate":6},"Nitro","/docs/api/kit/nitro","docs/3.api/5.kit/11.nitro",{"title":750,"path":751,"stem":752,"titleTemplate":6},"Resolving","/docs/api/kit/resolving","docs/3.api/5.kit/12.resolving",{"title":754,"path":755,"stem":756,"titleTemplate":6},"Logging","/docs/api/kit/logging","docs/3.api/5.kit/13.logging",{"title":758,"path":759,"stem":760,"titleTemplate":6},"Builder","/docs/api/kit/builder","docs/3.api/5.kit/14.builder",{"title":762,"path":763,"stem":764,"titleTemplate":6},"Examples","/docs/api/kit/examples","docs/3.api/5.kit/15.examples",{"title":766,"path":767,"stem":768,"titleTemplate":6},"Programmatic Usage","/docs/api/kit/programmatic","docs/3.api/5.kit/2.programmatic",{"title":770,"path":771,"stem":772,"titleTemplate":6},"Compatibility","/docs/api/kit/compatibility","docs/3.api/5.kit/3.compatibility",{"title":123,"path":774,"stem":775,"titleTemplate":6},"/docs/api/kit/autoimports","docs/3.api/5.kit/4.autoimports",{"title":357,"path":777,"stem":778,"titleTemplate":6},"/docs/api/kit/components","docs/3.api/5.kit/5.components",{"title":780,"path":781,"stem":782,"titleTemplate":6},"Context","/docs/api/kit/context","docs/3.api/5.kit/6.context",{"title":784,"path":785,"stem":786,"titleTemplate":6},"Pages","/docs/api/kit/pages","docs/3.api/5.kit/7.pages",{"title":788,"path":789,"stem":790,"titleTemplate":6},"Layout","/docs/api/kit/layout","docs/3.api/5.kit/8.layout",{"title":792,"path":793,"stem":794,"titleTemplate":6},"Plugins","/docs/api/kit/plugins","docs/3.api/5.kit/9.plugins",{"title":796,"titleTemplate":6,"icon":797,"path":798,"stem":799,"children":800,"page":108},"Advanced","i-lucide-brain","/docs/api/advanced","docs/3.api/6.advanced",[801,804],{"title":303,"path":802,"stem":803,"titleTemplate":6},"/docs/api/advanced/hooks","docs/3.api/6.advanced/1.hooks",{"title":805,"path":806,"stem":807,"titleTemplate":6},"Import meta","/docs/api/advanced/import-meta","docs/3.api/6.advanced/2.import-meta",{"title":809,"path":810,"stem":811,"titleTemplate":812,"icon":32},"Nuxt Configuration","/docs/api/nuxt-config","docs/3.api/6.nuxt-config","%s",{"title":762,"titleTemplate":814,"icon":815,"path":816,"stem":817,"children":818,"page":108},"%s · Nuxt Examples","i-lucide-app-window-mac","/docs/examples","docs/4.examples",[819,823,845,860,896],{"title":820,"path":821,"stem":822,"titleTemplate":6},"Hello World","/docs/examples/hello-world","docs/4.examples/0.hello-world",{"title":287,"path":824,"stem":825,"children":826,"page":108},"/docs/examples/features","docs/4.examples/1.features",[827,831,834,837,841],{"title":828,"path":829,"stem":830,"titleTemplate":6},"Auto Imports","/docs/examples/features/auto-imports","docs/4.examples/1.features/1.auto-imports",{"title":64,"path":832,"stem":833,"titleTemplate":6},"/docs/examples/features/data-fetching","docs/4.examples/1.features/2.data-fetching",{"title":69,"path":835,"stem":836,"titleTemplate":6},"/docs/examples/features/state-management","docs/4.examples/1.features/3.state-management",{"title":838,"path":839,"stem":840,"titleTemplate":6},"Meta Tags","/docs/examples/features/meta-tags","docs/4.examples/1.features/4.meta-tags",{"title":842,"path":843,"stem":844,"titleTemplate":6},"Layouts","/docs/examples/features/layouts","docs/4.examples/1.features/5.layouts",{"title":49,"path":846,"stem":847,"children":848,"page":108},"/docs/examples/routing","docs/4.examples/2.routing",[849,853,856],{"title":850,"path":851,"stem":852,"titleTemplate":6},"Middleware","/docs/examples/routing/middleware","docs/4.examples/2.routing/middleware",{"title":784,"path":854,"stem":855,"titleTemplate":6},"/docs/examples/routing/pages","docs/4.examples/2.routing/pages",{"title":857,"path":858,"stem":859,"titleTemplate":6},"Universal Router","/docs/examples/routing/universal-router","docs/4.examples/2.routing/universal-router",{"title":796,"path":861,"stem":862,"children":863,"page":108},"/docs/examples/advanced","docs/4.examples/4.advanced",[864,867,870,874,878,882,886,889,892],{"title":84,"path":865,"stem":866,"titleTemplate":6},"/docs/examples/advanced/config-extends","docs/4.examples/4.advanced/config-extends",{"title":74,"path":868,"stem":869,"titleTemplate":6},"/docs/examples/advanced/error-handling","docs/4.examples/4.advanced/error-handling",{"title":871,"path":872,"stem":873,"titleTemplate":6},"JSX / TSX","/docs/examples/advanced/jsx","docs/4.examples/4.advanced/jsx",{"title":875,"path":876,"stem":877,"titleTemplate":6},"Locale","/docs/examples/advanced/locale","docs/4.examples/4.advanced/locale",{"title":879,"path":880,"stem":881,"titleTemplate":6},"Module Extend Pages","/docs/examples/advanced/module-extend-pages","docs/4.examples/4.advanced/module-extend-pages",{"title":883,"path":884,"stem":885,"titleTemplate":6},"Teleport","/docs/examples/advanced/teleport","docs/4.examples/4.advanced/teleport",{"title":99,"path":887,"stem":888,"titleTemplate":6},"/docs/examples/advanced/testing","docs/4.examples/4.advanced/testing",{"title":444,"path":890,"stem":891,"titleTemplate":6},"/docs/examples/advanced/use-cookie","docs/4.examples/4.advanced/use-cookie",{"title":893,"path":894,"stem":895,"titleTemplate":6},"Use Custom Fetch Composable","/docs/examples/advanced/use-custom-fetch-composable","docs/4.examples/4.advanced/use-custom-fetch-composable",{"title":897,"path":898,"stem":899,"children":900,"page":108},"Experimental","/docs/examples/experimental","docs/4.examples/7.experimental",[901],{"title":902,"path":903,"stem":904,"titleTemplate":6},"WASM","/docs/examples/experimental/wasm","docs/4.examples/7.experimental/wasm",{"title":906,"titleTemplate":907,"icon":908,"path":909,"stem":910,"children":911,"page":108},"Community","%s · Nuxt Community","i-lucide-messages-square","/docs/community","docs/5.community",[912,917,922,927,932,937],{"title":913,"path":914,"stem":915,"titleTemplate":6,"icon":916},"Getting Help","/docs/community/getting-help","docs/5.community/2.getting-help","i-lucide-life-buoy",{"title":918,"path":919,"stem":920,"titleTemplate":6,"icon":921},"Reporting Bugs","/docs/community/reporting-bugs","docs/5.community/3.reporting-bugs","i-lucide-bug",{"title":923,"path":924,"stem":925,"titleTemplate":6,"icon":926},"Contribution","/docs/community/contribution","docs/5.community/4.contribution","i-lucide-git-pull-request",{"title":928,"path":929,"stem":930,"titleTemplate":6,"icon":931},"Framework","/docs/community/framework-contribution","docs/5.community/5.framework-contribution","i-lucide-github",{"title":933,"path":934,"stem":935,"titleTemplate":6,"icon":936},"Roadmap","/docs/community/roadmap","docs/5.community/6.roadmap","i-lucide-map",{"title":938,"path":939,"stem":940,"titleTemplate":6,"icon":941},"Releases","/docs/community/changelog","docs/5.community/7.changelog","i-lucide-bell-dot",{"title":943,"titleTemplate":944,"icon":945,"path":946,"stem":947,"children":948,"page":108},"Migrate to Nuxt Bridge","Migrate to Nuxt Bridge: %s","i-lucide-ship","/docs/bridge","docs/6.bridge",[949,953,956,959,963,967,971,974,977,980],{"title":950,"path":951,"stem":952,"titleTemplate":6},"Overview","/docs/bridge/overview","docs/6.bridge/1.overview",{"title":29,"path":954,"stem":955,"titleTemplate":6},"/docs/bridge/configuration","docs/6.bridge/10.configuration",{"title":151,"path":957,"stem":958,"titleTemplate":6},"/docs/bridge/typescript","docs/6.bridge/2.typescript",{"title":960,"path":961,"stem":962,"titleTemplate":6},"Legacy Composition API","/docs/bridge/bridge-composition-api","docs/6.bridge/3.bridge-composition-api",{"title":964,"path":965,"stem":966,"titleTemplate":6},"Plugins and Middleware","/docs/bridge/plugins-and-middleware","docs/6.bridge/4.plugins-and-middleware",{"title":968,"path":969,"stem":970,"titleTemplate":6},"New Composition API","/docs/bridge/nuxt3-compatible-api","docs/6.bridge/5.nuxt3-compatible-api",{"title":838,"path":972,"stem":973,"titleTemplate":6},"/docs/bridge/meta","docs/6.bridge/6.meta",{"title":295,"path":975,"stem":976,"titleTemplate":6},"/docs/bridge/runtime-config","docs/6.bridge/7.runtime-config",{"title":746,"path":978,"stem":979,"titleTemplate":6},"/docs/bridge/nitro","docs/6.bridge/8.nitro",{"title":981,"path":982,"stem":983,"titleTemplate":6},"Vite","/docs/bridge/vite","docs/6.bridge/9.vite",{"title":985,"titleTemplate":986,"icon":107,"path":987,"stem":988,"children":989,"page":108},"Migrate to Nuxt 3","Migrate to Nuxt 3: %s","/docs/migration","docs/7.migration",[990,993,997,1000,1003,1006,1009,1012,1015,1019,1023],{"title":950,"path":991,"stem":992,"titleTemplate":6},"/docs/migration/overview","docs/7.migration/1.overview",{"title":994,"path":995,"stem":996,"titleTemplate":6},"Build Tooling","/docs/migration/bundling","docs/7.migration/10.bundling",{"title":79,"path":998,"stem":999,"titleTemplate":6},"/docs/migration/server","docs/7.migration/11.server",{"title":29,"path":1001,"stem":1002,"titleTemplate":6},"/docs/migration/configuration","docs/7.migration/2.configuration",{"title":143,"path":1004,"stem":1005,"titleTemplate":6},"/docs/migration/module-authors","docs/7.migration/20.module-authors",{"title":828,"path":1007,"stem":1008,"titleTemplate":6},"/docs/migration/auto-imports","docs/7.migration/3.auto-imports",{"title":838,"path":1010,"stem":1011,"titleTemplate":6},"/docs/migration/meta","docs/7.migration/4.meta",{"title":964,"path":1013,"stem":1014,"titleTemplate":6},"/docs/migration/plugins-and-middleware","docs/7.migration/5.plugins-and-middleware",{"title":1016,"path":1017,"stem":1018,"titleTemplate":6},"Pages and Layouts","/docs/migration/pages-and-layouts","docs/7.migration/6.pages-and-layouts",{"title":1020,"path":1021,"stem":1022,"titleTemplate":6},"Component Options","/docs/migration/component-options","docs/7.migration/7.component-options",{"title":295,"path":1024,"stem":1025,"titleTemplate":6},"/docs/migration/runtime-config","docs/7.migration/8.runtime-config",{"title":1027,"path":1028,"stem":1029,"titleTemplate":6},"Package","/docs/package","docs/package",{"title":1031,"path":1032,"stem":1033,"children":1034,"page":108},"Blog","/blog","blog",[1035,1039,1043,1047,1051,1055,1059,1063,1067,1071,1075,1079,1083,1087,1091,1095,1099,1103,1107,1111,1115],{"title":1036,"path":1037,"stem":1038},"Announcing 3.0","/blog/v3","blog/1.v3",{"title":1040,"path":1041,"stem":1042},"Nuxt 3.3","/blog/v3-3","blog/10.v3-3",{"title":1044,"path":1045,"stem":1046},"Nuxt 3.4","/blog/v3-4","blog/11.v3-4",{"title":1048,"path":1049,"stem":1050},"Nuxt 3.5","/blog/v3-5","blog/12.v3-5",{"title":1052,"path":1053,"stem":1054},"Nuxt 3.6","/blog/v3-6","blog/13.v3-6",{"title":1056,"path":1057,"stem":1058},"Nuxt on the Edge","/blog/nuxt-on-the-edge","blog/14.nuxt-on-the-edge",{"title":1060,"path":1061,"stem":1062},"Nuxt DevTools v1.0","/blog/nuxt-devtools-v1-0","blog/18.nuxt-devtools-v1-0",{"title":1064,"path":1065,"stem":1066},"Nuxt: A vision for 2023","/blog/vision-2023","blog/2.vision-2023",{"title":1068,"path":1069,"stem":1070},"The Evolution of Shiki v1.0","/blog/shiki-v1","blog/21.shiki-v1",{"title":1072,"path":1073,"stem":1074},"Refreshed Nuxt ESLint Integrations","/blog/eslint-module","blog/24.eslint-module",{"title":1076,"path":1077,"stem":1078},"Introducing Nuxt Scripts","/blog/nuxt-scripts","blog/26.nuxt-scripts",{"title":1080,"path":1081,"stem":1082},"Introducing Nuxt Icon v1","/blog/nuxt-icon-v1-0","blog/29.nuxt-icon-v1-0",{"title":1084,"path":1085,"stem":1086},"Introducing Nuxt DevTools","/blog/introducing-nuxt-devtools","blog/3.introducing-nuxt-devtools",{"title":1088,"path":1089,"stem":1090},"Announcing Nuxt 3 Release Candidate","/blog/nuxt3-rc","blog/3.nuxt3-rc",{"title":1092,"path":1093,"stem":1094},"Nuxt 2 End-of-Life (EOL)","/blog/nuxt2-eol","blog/4.nuxt2-eol",{"title":1096,"path":1097,"stem":1098},"Introducing Nuxt 3 Beta","/blog/nuxt3-beta","blog/4.nuxt3-beta",{"title":1100,"path":1101,"stem":1102},"Going Full Static","/blog/going-full-static","blog/5.going-full-static",{"title":1104,"path":1105,"stem":1106},"Introducing Smart Prefetching","/blog/introducing-smart-prefetching","blog/6.introducing-smart-prefetching",{"title":1108,"path":1109,"stem":1110},"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":1112,"path":1113,"stem":1114},"Nuxt 2 Static Improvements","/blog/nuxt-static-improvements","blog/8.nuxt-static-improvements",{"title":1116,"path":1117,"stem":1118},"Nuxt 2: From Terminal to Browser","/blog/nuxtjs-from-terminal-to-browser","blog/9.nuxtjs-from-terminal-to-browser",{"id":1120,"title":44,"body":1121,"description":4801,"extension":4802,"links":6,"meta":4803,"navigation":4804,"path":45,"seo":4805,"stem":46,"titleTemplate":6,"__hash__":4806},"docs/docs/1.getting-started/06.styling.md",{"type":1122,"value":1123,"toc":4768},"minimal",[1124,1128,1133,1145,1150,1162,1300,1306,1310,1322,1373,1378,1382,1396,1504,1507,1560,1564,1571,1636,1639,1706,1709,1748,1752,1755,1765,1860,1864,1867,1870,1926,1938,1942,1945,1952,2060,2068,2072,2075,2129,2138,2178,2184,2224,2229,2243,2249,2306,2313,2496,2504,2508,2517,2522,2587,2598,2602,2610,2619,2623,2626,3462,3470,3477,3480,3630,3634,3637,3732,3736,3748,3847,3851,3854,4004,4023,4027,4033,4111,4114,4151,4154,4196,4200,4203,4322,4324,4328,4342,4350,4395,4410,4414,4422,4436,4439,4442,4453,4455,4459,4472,4477,4481,4484,4498,4505,4508,4765],[1125,1126,1127],"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.",[1129,1130,1132],"h2",{"id":1131},"local-stylesheets","Local Stylesheets",[1125,1134,1135,1136,1144],{},"If you're writing local stylesheets, the natural place to put them is the ",[1137,1138,1139,1143],"a",{"href":176},[1140,1141,1142],"code",{},"assets/"," directory",".",[1146,1147,1149],"h3",{"id":1148},"importing-within-components","Importing Within Components",[1125,1151,1152,1153,1144],{},"You can import stylesheets in your pages, layouts and components directly.\nYou can use a JavaScript import, or a CSS ",[1137,1154,1158,1161],{"href":1155,"rel":1156},"https://developer.mozilla.org/en-US/docs/Web/CSS/@import",[1157],"nofollow",[1140,1159,1160],{},"@import"," statement",[1163,1164,1170],"pre",{"className":1165,"code":1166,"filename":1167,"language":1168,"meta":1169,"style":1169},"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","",[1140,1171,1172,1188,1195,1212,1219,1225,1244,1254,1259,1269,1291],{"__ignoreMap":1169},[1173,1174,1177,1181,1185],"span",{"class":1175,"line":1176},"line",1,[1173,1178,1180],{"class":1179},"sDfIl","\u003C",[1173,1182,1184],{"class":1183},"sRlkE","script",[1173,1186,1187],{"class":1179},">\n",[1173,1189,1191],{"class":1175,"line":1190},2,[1173,1192,1194],{"class":1193},"sWuyu","// Use a static import for server-side compatibility\n",[1173,1196,1198,1202,1205,1209],{"class":1175,"line":1197},3,[1173,1199,1201],{"class":1200},"s8R28","import",[1173,1203,1204],{"class":1179}," '",[1173,1206,1208],{"class":1207},"sGFVr","~/assets/css/first.css",[1173,1210,1211],{"class":1179},"'\n",[1173,1213,1215],{"class":1175,"line":1214},4,[1173,1216,1218],{"emptyLinePlaceholder":1217},true,"\n",[1173,1220,1222],{"class":1175,"line":1221},5,[1173,1223,1224],{"class":1193},"// Caution: Dynamic imports are not server-side compatible\n",[1173,1226,1228,1230,1234,1237,1239,1241],{"class":1175,"line":1227},6,[1173,1229,1201],{"class":1179},[1173,1231,1233],{"class":1232},"sZSNi","(",[1173,1235,1236],{"class":1179},"'",[1173,1238,1208],{"class":1207},[1173,1240,1236],{"class":1179},[1173,1242,1243],{"class":1232},")\n",[1173,1245,1247,1250,1252],{"class":1175,"line":1246},7,[1173,1248,1249],{"class":1179},"\u003C/",[1173,1251,1184],{"class":1183},[1173,1253,1187],{"class":1179},[1173,1255,1257],{"class":1175,"line":1256},8,[1173,1258,1218],{"emptyLinePlaceholder":1217},[1173,1260,1262,1264,1267],{"class":1175,"line":1261},9,[1173,1263,1180],{"class":1179},[1173,1265,1266],{"class":1183},"style",[1173,1268,1187],{"class":1179},[1173,1270,1272,1274,1278,1280,1283,1286,1288],{"class":1175,"line":1271},10,[1173,1273,1160],{"class":1200},[1173,1275,1277],{"class":1276},"s3cPz"," url",[1173,1279,1233],{"class":1179},[1173,1281,1282],{"class":1179},"\"",[1173,1284,1285],{"class":1207},"~/assets/css/second.css",[1173,1287,1282],{"class":1179},[1173,1289,1290],{"class":1179},");\n",[1173,1292,1294,1296,1298],{"class":1175,"line":1293},11,[1173,1295,1249],{"class":1179},[1173,1297,1266],{"class":1183},[1173,1299,1187],{"class":1179},[1301,1302,1303],"tip",{},[1125,1304,1305],{},"The stylesheets will be inlined in the HTML rendered by Nuxt.",[1146,1307,1309],{"id":1308},"the-css-property","The CSS Property",[1125,1311,1312,1313,1316,1317,1321],{},"You can also use the ",[1140,1314,1315],{},"css"," property in the Nuxt configuration.\nThe natural place for your stylesheets is the ",[1137,1318,1319,1143],{"href":176},[1140,1320,1142],{},". You can then reference its path and Nuxt will include it to all the pages of your application.",[1163,1323,1327],{"className":1324,"code":1325,"filename":260,"language":1326,"meta":1169,"style":1169},"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",[1140,1328,1329,1345,1366],{"__ignoreMap":1169},[1173,1330,1331,1334,1337,1340,1342],{"class":1175,"line":1176},[1173,1332,1333],{"class":1200},"export",[1173,1335,1336],{"class":1200}," default",[1173,1338,1339],{"class":1276}," defineNuxtConfig",[1173,1341,1233],{"class":1232},[1173,1343,1344],{"class":1179},"{\n",[1173,1346,1347,1350,1353,1356,1358,1361,1363],{"class":1175,"line":1190},[1173,1348,1349],{"class":1183},"  css",[1173,1351,1352],{"class":1179},":",[1173,1354,1355],{"class":1232}," [",[1173,1357,1236],{"class":1179},[1173,1359,1360],{"class":1207},"~/assets/css/main.css",[1173,1362,1236],{"class":1179},[1173,1364,1365],{"class":1232},"]\n",[1173,1367,1368,1371],{"class":1175,"line":1197},[1173,1369,1370],{"class":1179},"}",[1173,1372,1243],{"class":1232},[1301,1374,1375],{},[1125,1376,1377],{},"The stylesheets will be inlined in the HTML rendered by Nuxt, injected globally and present in all pages.",[1146,1379,1381],{"id":1380},"working-with-fonts","Working With Fonts",[1125,1383,1384,1385,1388,1389,1392,1393,1144],{},"Place your local fonts files in your ",[1140,1386,1387],{},"~/public/"," directory, for example in ",[1140,1390,1391],{},"~/public/fonts",". You can then reference them in your stylesheets using ",[1140,1394,1395],{},"url()",[1163,1397,1401],{"className":1398,"code":1399,"filename":1400,"language":1315,"meta":1169,"style":1169},"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",[1140,1402,1403,1411,1429,1464,1476,1487,1499],{"__ignoreMap":1169},[1173,1404,1405,1408],{"class":1175,"line":1176},[1173,1406,1407],{"class":1200},"@font-face",[1173,1409,1410],{"class":1179}," {\n",[1173,1412,1413,1417,1419,1421,1424,1426],{"class":1175,"line":1190},[1173,1414,1416],{"class":1415},"spFsF","  font-family",[1173,1418,1352],{"class":1179},[1173,1420,1204],{"class":1179},[1173,1422,1423],{"class":1207},"FarAwayGalaxy",[1173,1425,1236],{"class":1179},[1173,1427,1428],{"class":1179},";\n",[1173,1430,1431,1434,1436,1438,1440,1442,1445,1447,1450,1453,1455,1457,1460,1462],{"class":1175,"line":1197},[1173,1432,1433],{"class":1415},"  src",[1173,1435,1352],{"class":1179},[1173,1437,1277],{"class":1276},[1173,1439,1233],{"class":1179},[1173,1441,1236],{"class":1179},[1173,1443,1444],{"class":1207},"/fonts/FarAwayGalaxy.woff",[1173,1446,1236],{"class":1179},[1173,1448,1449],{"class":1179},")",[1173,1451,1452],{"class":1276}," format",[1173,1454,1233],{"class":1179},[1173,1456,1236],{"class":1179},[1173,1458,1459],{"class":1207},"woff",[1173,1461,1236],{"class":1179},[1173,1463,1290],{"class":1179},[1173,1465,1466,1469,1471,1474],{"class":1175,"line":1214},[1173,1467,1468],{"class":1415},"  font-weight",[1173,1470,1352],{"class":1179},[1173,1472,1473],{"class":1232}," normal",[1173,1475,1428],{"class":1179},[1173,1477,1478,1481,1483,1485],{"class":1175,"line":1221},[1173,1479,1480],{"class":1415},"  font-style",[1173,1482,1352],{"class":1179},[1173,1484,1473],{"class":1232},[1173,1486,1428],{"class":1179},[1173,1488,1489,1492,1494,1497],{"class":1175,"line":1227},[1173,1490,1491],{"class":1415},"  font-display",[1173,1493,1352],{"class":1179},[1173,1495,1496],{"class":1232}," swap",[1173,1498,1428],{"class":1179},[1173,1500,1501],{"class":1175,"line":1246},[1173,1502,1503],{"class":1179},"}\n",[1125,1505,1506],{},"Then reference your fonts by name in your stylesheets, pages or components:",[1163,1508,1510],{"className":1165,"code":1509,"language":1168,"meta":1169,"style":1169},"\u003Cstyle>\nh1 {\n  font-family: 'FarAwayGalaxy', sans-serif;\n}\n\u003C/style>\n",[1140,1511,1512,1520,1528,1548,1552],{"__ignoreMap":1169},[1173,1513,1514,1516,1518],{"class":1175,"line":1176},[1173,1515,1180],{"class":1179},[1173,1517,1266],{"class":1183},[1173,1519,1187],{"class":1179},[1173,1521,1522,1526],{"class":1175,"line":1190},[1173,1523,1525],{"class":1524},"s52Pk","h1",[1173,1527,1410],{"class":1179},[1173,1529,1530,1532,1534,1536,1538,1540,1543,1546],{"class":1175,"line":1197},[1173,1531,1416],{"class":1415},[1173,1533,1352],{"class":1179},[1173,1535,1204],{"class":1179},[1173,1537,1423],{"class":1207},[1173,1539,1236],{"class":1179},[1173,1541,1542],{"class":1179},",",[1173,1544,1545],{"class":1232}," sans-serif",[1173,1547,1428],{"class":1179},[1173,1549,1550],{"class":1175,"line":1214},[1173,1551,1503],{"class":1179},[1173,1553,1554,1556,1558],{"class":1175,"line":1221},[1173,1555,1249],{"class":1179},[1173,1557,1266],{"class":1183},[1173,1559,1187],{"class":1179},[1146,1561,1563],{"id":1562},"stylesheets-distributed-through-npm","Stylesheets Distributed Through NPM",[1125,1565,1566,1567,1570],{},"You can also reference stylesheets that are distributed through npm. Let's use the popular ",[1140,1568,1569],{},"animate.css"," library as an example.",[1572,1573,1575,1593,1608,1622],"code-group",{"sync":1574},"pm",[1163,1576,1581],{"className":1577,"code":1578,"filename":1579,"language":1580,"meta":1169,"style":1169},"language-bash shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","npm install animate.css\n","npm","bash",[1140,1582,1583],{"__ignoreMap":1169},[1173,1584,1585,1587,1590],{"class":1175,"line":1176},[1173,1586,1579],{"class":1524},[1173,1588,1589],{"class":1207}," install",[1173,1591,1592],{"class":1207}," animate.css\n",[1163,1594,1597],{"className":1577,"code":1595,"filename":1596,"language":1580,"meta":1169,"style":1169},"yarn add animate.css\n","yarn",[1140,1598,1599],{"__ignoreMap":1169},[1173,1600,1601,1603,1606],{"class":1175,"line":1176},[1173,1602,1596],{"class":1524},[1173,1604,1605],{"class":1207}," add",[1173,1607,1592],{"class":1207},[1163,1609,1612],{"className":1577,"code":1610,"filename":1611,"language":1580,"meta":1169,"style":1169},"pnpm install animate.css\n","pnpm",[1140,1613,1614],{"__ignoreMap":1169},[1173,1615,1616,1618,1620],{"class":1175,"line":1176},[1173,1617,1611],{"class":1524},[1173,1619,1589],{"class":1207},[1173,1621,1592],{"class":1207},[1163,1623,1626],{"className":1577,"code":1624,"filename":1625,"language":1580,"meta":1169,"style":1169},"bun install animate.css\n","bun",[1140,1627,1628],{"__ignoreMap":1169},[1173,1629,1630,1632,1634],{"class":1175,"line":1176},[1173,1631,1625],{"class":1524},[1173,1633,1589],{"class":1207},[1173,1635,1592],{"class":1207},[1125,1637,1638],{},"Then you can reference it directly in your pages, layouts and components:",[1163,1640,1642],{"className":1165,"code":1641,"filename":248,"language":1168,"meta":1169,"style":1169},"\u003Cscript>\nimport 'animate.css'\n\u003C/script>\n\n\u003Cstyle>\n@import url(\"animate.css\");\n\u003C/style>\n",[1140,1643,1644,1652,1662,1670,1674,1682,1698],{"__ignoreMap":1169},[1173,1645,1646,1648,1650],{"class":1175,"line":1176},[1173,1647,1180],{"class":1179},[1173,1649,1184],{"class":1183},[1173,1651,1187],{"class":1179},[1173,1653,1654,1656,1658,1660],{"class":1175,"line":1190},[1173,1655,1201],{"class":1200},[1173,1657,1204],{"class":1179},[1173,1659,1569],{"class":1207},[1173,1661,1211],{"class":1179},[1173,1663,1664,1666,1668],{"class":1175,"line":1197},[1173,1665,1249],{"class":1179},[1173,1667,1184],{"class":1183},[1173,1669,1187],{"class":1179},[1173,1671,1672],{"class":1175,"line":1214},[1173,1673,1218],{"emptyLinePlaceholder":1217},[1173,1675,1676,1678,1680],{"class":1175,"line":1221},[1173,1677,1180],{"class":1179},[1173,1679,1266],{"class":1183},[1173,1681,1187],{"class":1179},[1173,1683,1684,1686,1688,1690,1692,1694,1696],{"class":1175,"line":1227},[1173,1685,1160],{"class":1200},[1173,1687,1277],{"class":1276},[1173,1689,1233],{"class":1179},[1173,1691,1282],{"class":1179},[1173,1693,1569],{"class":1207},[1173,1695,1282],{"class":1179},[1173,1697,1290],{"class":1179},[1173,1699,1700,1702,1704],{"class":1175,"line":1246},[1173,1701,1249],{"class":1179},[1173,1703,1266],{"class":1183},[1173,1705,1187],{"class":1179},[1125,1707,1708],{},"The package can also be referenced as a string in the css property of your Nuxt configuration.",[1163,1710,1712],{"className":1324,"code":1711,"filename":260,"language":1326,"meta":1169,"style":1169},"export default defineNuxtConfig({\n  css: ['animate.css']\n})\n",[1140,1713,1714,1726,1742],{"__ignoreMap":1169},[1173,1715,1716,1718,1720,1722,1724],{"class":1175,"line":1176},[1173,1717,1333],{"class":1200},[1173,1719,1336],{"class":1200},[1173,1721,1339],{"class":1276},[1173,1723,1233],{"class":1232},[1173,1725,1344],{"class":1179},[1173,1727,1728,1730,1732,1734,1736,1738,1740],{"class":1175,"line":1190},[1173,1729,1349],{"class":1183},[1173,1731,1352],{"class":1179},[1173,1733,1355],{"class":1232},[1173,1735,1236],{"class":1179},[1173,1737,1569],{"class":1207},[1173,1739,1236],{"class":1179},[1173,1741,1365],{"class":1232},[1173,1743,1744,1746],{"class":1175,"line":1197},[1173,1745,1370],{"class":1179},[1173,1747,1243],{"class":1232},[1129,1749,1751],{"id":1750},"external-stylesheets","External Stylesheets",[1125,1753,1754],{},"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.",[1125,1756,1757,1758,1764],{},"You can manipulate the head with the ",[1137,1759,1761],{"href":1760},"/docs/api/nuxt-config#head",[1140,1762,1763],{},"app.head"," property of your Nuxt configuration:",[1163,1766,1769],{"className":1324,"code":1767,"filename":260,"language":1326,"meta":1768,"style":1169},"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",[1140,1770,1771,1783,1792,1801,1844,1849,1854],{"__ignoreMap":1169},[1173,1772,1773,1775,1777,1779,1781],{"class":1175,"line":1176},[1173,1774,1333],{"class":1200},[1173,1776,1336],{"class":1200},[1173,1778,1339],{"class":1276},[1173,1780,1233],{"class":1232},[1173,1782,1344],{"class":1179},[1173,1784,1785,1788,1790],{"class":1175,"line":1190},[1173,1786,1787],{"class":1183},"  app",[1173,1789,1352],{"class":1179},[1173,1791,1410],{"class":1179},[1173,1793,1794,1797,1799],{"class":1175,"line":1197},[1173,1795,1796],{"class":1183},"    head",[1173,1798,1352],{"class":1179},[1173,1800,1410],{"class":1179},[1173,1802,1803,1806,1808,1810,1813,1816,1818,1820,1823,1825,1827,1830,1832,1834,1837,1839,1842],{"class":1175,"line":1214},[1173,1804,1805],{"class":1183},"      link",[1173,1807,1352],{"class":1179},[1173,1809,1355],{"class":1232},[1173,1811,1812],{"class":1179},"{",[1173,1814,1815],{"class":1183}," rel",[1173,1817,1352],{"class":1179},[1173,1819,1204],{"class":1179},[1173,1821,1822],{"class":1207},"stylesheet",[1173,1824,1236],{"class":1179},[1173,1826,1542],{"class":1179},[1173,1828,1829],{"class":1183}," href",[1173,1831,1352],{"class":1179},[1173,1833,1204],{"class":1179},[1173,1835,1836],{"class":1207},"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",[1173,1838,1236],{"class":1179},[1173,1840,1841],{"class":1179}," }",[1173,1843,1365],{"class":1232},[1173,1845,1846],{"class":1175,"line":1221},[1173,1847,1848],{"class":1179},"    }\n",[1173,1850,1851],{"class":1175,"line":1227},[1173,1852,1853],{"class":1179},"  }\n",[1173,1855,1856,1858],{"class":1175,"line":1246},[1173,1857,1370],{"class":1179},[1173,1859,1243],{"class":1232},[1146,1861,1863],{"id":1862},"dynamically-adding-stylesheets","Dynamically Adding Stylesheets",[1125,1865,1866],{},"You can use the useHead composable to dynamically set a value in your head in your code.",[1868,1869],"read-more",{"to":457},[1163,1871,1873],{"className":1324,"code":1872,"language":1326,"meta":1768,"style":1169},"useHead({\n  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]\n})\n",[1140,1874,1875,1883,1920],{"__ignoreMap":1169},[1173,1876,1877,1879,1881],{"class":1175,"line":1176},[1173,1878,456],{"class":1276},[1173,1880,1233],{"class":1232},[1173,1882,1344],{"class":1179},[1173,1884,1885,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918],{"class":1175,"line":1190},[1173,1886,1887],{"class":1183},"  link",[1173,1889,1352],{"class":1179},[1173,1891,1355],{"class":1232},[1173,1893,1812],{"class":1179},[1173,1895,1815],{"class":1183},[1173,1897,1352],{"class":1179},[1173,1899,1204],{"class":1179},[1173,1901,1822],{"class":1207},[1173,1903,1236],{"class":1179},[1173,1905,1542],{"class":1179},[1173,1907,1829],{"class":1183},[1173,1909,1352],{"class":1179},[1173,1911,1204],{"class":1179},[1173,1913,1836],{"class":1207},[1173,1915,1236],{"class":1179},[1173,1917,1841],{"class":1179},[1173,1919,1365],{"class":1232},[1173,1921,1922,1924],{"class":1175,"line":1197},[1173,1923,1370],{"class":1179},[1173,1925,1243],{"class":1232},[1125,1927,1928,1929,1932,1933,1144],{},"Nuxt uses ",[1140,1930,1931],{},"unhead"," under the hood, and you can refer to ",[1137,1934,1937],{"href":1935,"rel":1936},"https://unhead.unjs.io",[1157],"its full documentation",[1146,1939,1941],{"id":1940},"modifying-the-rendered-head-with-a-nitro-plugin","Modifying The Rendered Head With A Nitro Plugin",[1125,1943,1944],{},"If you need more advanced control, you can intercept the rendered html with a hook and modify the head programmatically.",[1125,1946,1947,1948,1951],{},"Create a plugin in ",[1140,1949,1950],{},"~/server/plugins/my-plugin.ts"," like this:",[1163,1953,1956],{"className":1324,"code":1954,"filename":1955,"language":1326,"meta":1768,"style":1169},"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",[1140,1957,1958,1983,2021,2047,2054],{"__ignoreMap":1169},[1173,1959,1960,1962,1964,1967,1969,1971,1975,1977,1981],{"class":1175,"line":1176},[1173,1961,1333],{"class":1200},[1173,1963,1336],{"class":1200},[1173,1965,1966],{"class":1276}," defineNitroPlugin",[1173,1968,1233],{"class":1232},[1173,1970,1233],{"class":1179},[1173,1972,1974],{"class":1973},"s1nJG","nitro",[1173,1976,1449],{"class":1179},[1173,1978,1980],{"class":1979},"smZ93"," =>",[1173,1982,1410],{"class":1179},[1173,1984,1985,1988,1990,1993,1995,1998,2000,2002,2005,2007,2009,2012,2015,2017,2019],{"class":1175,"line":1190},[1173,1986,1987],{"class":1232},"  nitro",[1173,1989,1144],{"class":1179},[1173,1991,1992],{"class":1232},"hooks",[1173,1994,1144],{"class":1179},[1173,1996,1997],{"class":1276},"hook",[1173,1999,1233],{"class":1183},[1173,2001,1236],{"class":1179},[1173,2003,2004],{"class":1207},"render:html",[1173,2006,1236],{"class":1179},[1173,2008,1542],{"class":1179},[1173,2010,2011],{"class":1179}," (",[1173,2013,2014],{"class":1973},"html",[1173,2016,1449],{"class":1179},[1173,2018,1980],{"class":1979},[1173,2020,1410],{"class":1179},[1173,2022,2023,2026,2028,2031,2033,2036,2038,2040,2043,2045],{"class":1175,"line":1197},[1173,2024,2025],{"class":1232},"    html",[1173,2027,1144],{"class":1179},[1173,2029,2030],{"class":1232},"head",[1173,2032,1144],{"class":1179},[1173,2034,2035],{"class":1276},"push",[1173,2037,1233],{"class":1183},[1173,2039,1236],{"class":1179},[1173,2041,2042],{"class":1207},"\u003Clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">",[1173,2044,1236],{"class":1179},[1173,2046,1243],{"class":1183},[1173,2048,2049,2052],{"class":1175,"line":1214},[1173,2050,2051],{"class":1179},"  }",[1173,2053,1243],{"class":1183},[1173,2055,2056,2058],{"class":1175,"line":1221},[1173,2057,1370],{"class":1179},[1173,2059,1243],{"class":1232},[1125,2061,2062,2063,1144],{},"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 ",[1137,2064,2067],{"href":2065,"rel":2066},"https://web.dev/defer-non-critical-css",[1157],"web.dev",[1129,2069,2071],{"id":2070},"using-preprocessors","Using Preprocessors",[1125,2073,2074],{},"To use a preprocessor like SCSS, Sass, Less or Stylus, install it first.",[1572,2076,2077,2095,2112],{},[1163,2078,2081],{"className":1577,"code":2079,"filename":2080,"language":1580,"meta":1169,"style":1169},"npm install -D sass\n","Sass & SCSS",[1140,2082,2083],{"__ignoreMap":1169},[1173,2084,2085,2087,2089,2092],{"class":1175,"line":1176},[1173,2086,1579],{"class":1524},[1173,2088,1589],{"class":1207},[1173,2090,2091],{"class":1207}," -D",[1173,2093,2094],{"class":1207}," sass\n",[1163,2096,2099],{"className":1577,"code":2097,"filename":2098,"language":1580,"meta":1169,"style":1169},"npm install -D less\n","Less",[1140,2100,2101],{"__ignoreMap":1169},[1173,2102,2103,2105,2107,2109],{"class":1175,"line":1176},[1173,2104,1579],{"class":1524},[1173,2106,1589],{"class":1207},[1173,2108,2091],{"class":1207},[1173,2110,2111],{"class":1207}," less\n",[1163,2113,2116],{"className":1577,"code":2114,"filename":2115,"language":1580,"meta":1169,"style":1169},"npm install -D stylus\n","Stylus",[1140,2117,2118],{"__ignoreMap":1169},[1173,2119,2120,2122,2124,2126],{"class":1175,"line":1176},[1173,2121,1579],{"class":1524},[1173,2123,1589],{"class":1207},[1173,2125,2091],{"class":1207},[1173,2127,2128],{"class":1207}," stylus\n",[1125,2130,2131,2132,2134,2135,2137],{},"The natural place to write your stylesheets is the ",[1140,2133,175],{}," directory.\nYou can then import your source files in your ",[1140,2136,248],{}," (or layouts files) using your preprocessor's syntax.",[1163,2139,2142],{"className":1165,"code":2140,"filename":2141,"language":1168,"meta":1169,"style":1169},"\u003Cstyle lang=\"scss\">\n@use \"~/assets/scss/main.scss\";\n\u003C/style>\n","pages/app.vue",[1140,2143,2144,2165,2170],{"__ignoreMap":1169},[1173,2145,2146,2148,2150,2153,2156,2158,2161,2163],{"class":1175,"line":1176},[1173,2147,1180],{"class":1179},[1173,2149,1266],{"class":1183},[1173,2151,2152],{"class":1979}," lang",[1173,2154,2155],{"class":1179},"=",[1173,2157,1282],{"class":1179},[1173,2159,2160],{"class":1207},"scss",[1173,2162,1282],{"class":1179},[1173,2164,1187],{"class":1179},[1173,2166,2167],{"class":1175,"line":1190},[1173,2168,2169],{"class":1232},"@use \"~/assets/scss/main.scss\";\n",[1173,2171,2172,2174,2176],{"class":1175,"line":1197},[1173,2173,1249],{"class":1179},[1173,2175,1266],{"class":1183},[1173,2177,1187],{"class":1179},[1125,2179,2180,2181,2183],{},"Alternatively, you can use the ",[1140,2182,1315],{}," property of your Nuxt configuration.",[1163,2185,2187],{"className":1324,"code":2186,"filename":260,"language":1326,"meta":1768,"style":1169},"export default defineNuxtConfig({\n  css: ['~/assets/scss/main.scss']\n})\n",[1140,2188,2189,2201,2218],{"__ignoreMap":1169},[1173,2190,2191,2193,2195,2197,2199],{"class":1175,"line":1176},[1173,2192,1333],{"class":1200},[1173,2194,1336],{"class":1200},[1173,2196,1339],{"class":1276},[1173,2198,1233],{"class":1232},[1173,2200,1344],{"class":1179},[1173,2202,2203,2205,2207,2209,2211,2214,2216],{"class":1175,"line":1190},[1173,2204,1349],{"class":1183},[1173,2206,1352],{"class":1179},[1173,2208,1355],{"class":1232},[1173,2210,1236],{"class":1179},[1173,2212,2213],{"class":1207},"~/assets/scss/main.scss",[1173,2215,1236],{"class":1179},[1173,2217,1365],{"class":1232},[1173,2219,2220,2222],{"class":1175,"line":1197},[1173,2221,1370],{"class":1179},[1173,2223,1243],{"class":1232},[1301,2225,2226],{},[1125,2227,2228],{},"In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.",[1125,2230,2231,2232,2237,2238,1144],{},"If you need to inject code in pre-processed files, like a ",[1137,2233,2236],{"href":2234,"rel":2235},"https://sass-lang.com/documentation/at-rules/use#partials",[1157],"Sass partial"," with color variables, you can do so with the Vite ",[1137,2239,2242],{"href":2240,"rel":2241},"https://vite.dev/config/shared-options.html#css-preprocessoroptions",[1157],"preprocessors options",[1125,2244,2245,2246,2248],{},"Create some partials in your ",[1140,2247,175],{}," directory:",[1572,2250,2252,2288],{"sync":2251},"preprocessor",[1163,2253,2257],{"className":2254,"code":2255,"filename":2256,"language":2160,"meta":1169,"style":1169},"language-scss shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","$primary: #49240F;\n$secondary: #E4A79D;\n","assets/_colors.scss",[1140,2258,2259,2274],{"__ignoreMap":1169},[1173,2260,2261,2264,2266,2269,2272],{"class":1175,"line":1176},[1173,2262,2263],{"class":1232},"$primary",[1173,2265,1352],{"class":1179},[1173,2267,2268],{"class":1179}," #",[1173,2270,2271],{"class":1232},"49240F",[1173,2273,1428],{"class":1179},[1173,2275,2276,2279,2281,2283,2286],{"class":1175,"line":1190},[1173,2277,2278],{"class":1232},"$secondary",[1173,2280,1352],{"class":1179},[1173,2282,2268],{"class":1179},[1173,2284,2285],{"class":1232},"E4A79D",[1173,2287,1428],{"class":1179},[1163,2289,2294],{"className":2290,"code":2291,"filename":2292,"language":2293,"meta":1169,"style":1169},"language-sass shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","$primary: #49240F\n$secondary: #E4A79D\n","assets/_colors.sass","sass",[1140,2295,2296,2301],{"__ignoreMap":1169},[1173,2297,2298],{"class":1175,"line":1176},[1173,2299,2300],{},"$primary: #49240F\n",[1173,2302,2303],{"class":1175,"line":1190},[1173,2304,2305],{},"$secondary: #E4A79D\n",[1125,2307,2308,2309,2312],{},"Then in your ",[1140,2310,2311],{},"nuxt.config"," :",[1572,2314,2315,2407],{},[1163,2316,2319],{"className":1324,"code":2317,"filename":2318,"language":1326,"meta":1768,"style":1169},"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",[1140,2320,2321,2333,2342,2351,2360,2369,2383,2388,2393,2397,2401],{"__ignoreMap":1169},[1173,2322,2323,2325,2327,2329,2331],{"class":1175,"line":1176},[1173,2324,1333],{"class":1200},[1173,2326,1336],{"class":1200},[1173,2328,1339],{"class":1276},[1173,2330,1233],{"class":1232},[1173,2332,1344],{"class":1179},[1173,2334,2335,2338,2340],{"class":1175,"line":1190},[1173,2336,2337],{"class":1183},"  vite",[1173,2339,1352],{"class":1179},[1173,2341,1410],{"class":1179},[1173,2343,2344,2347,2349],{"class":1175,"line":1197},[1173,2345,2346],{"class":1183},"    css",[1173,2348,1352],{"class":1179},[1173,2350,1410],{"class":1179},[1173,2352,2353,2356,2358],{"class":1175,"line":1214},[1173,2354,2355],{"class":1183},"      preprocessorOptions",[1173,2357,1352],{"class":1179},[1173,2359,1410],{"class":1179},[1173,2361,2362,2365,2367],{"class":1175,"line":1221},[1173,2363,2364],{"class":1183},"        scss",[1173,2366,1352],{"class":1179},[1173,2368,1410],{"class":1179},[1173,2370,2371,2374,2376,2378,2381],{"class":1175,"line":1227},[1173,2372,2373],{"class":1183},"          additionalData",[1173,2375,1352],{"class":1179},[1173,2377,1204],{"class":1179},[1173,2379,2380],{"class":1207},"@use \"~/assets/_colors.scss\" as *;",[1173,2382,1211],{"class":1179},[1173,2384,2385],{"class":1175,"line":1246},[1173,2386,2387],{"class":1179},"        }\n",[1173,2389,2390],{"class":1175,"line":1256},[1173,2391,2392],{"class":1179},"      }\n",[1173,2394,2395],{"class":1175,"line":1261},[1173,2396,1848],{"class":1179},[1173,2398,2399],{"class":1175,"line":1271},[1173,2400,1853],{"class":1179},[1173,2402,2403,2405],{"class":1175,"line":1293},[1173,2404,1370],{"class":1179},[1173,2406,1243],{"class":1232},[1163,2408,2411],{"className":1324,"code":2409,"filename":2410,"language":1326,"meta":1768,"style":1169},"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",[1140,2412,2413,2425,2433,2441,2449,2458,2474,2478,2482,2486,2490],{"__ignoreMap":1169},[1173,2414,2415,2417,2419,2421,2423],{"class":1175,"line":1176},[1173,2416,1333],{"class":1200},[1173,2418,1336],{"class":1200},[1173,2420,1339],{"class":1276},[1173,2422,1233],{"class":1232},[1173,2424,1344],{"class":1179},[1173,2426,2427,2429,2431],{"class":1175,"line":1190},[1173,2428,2337],{"class":1183},[1173,2430,1352],{"class":1179},[1173,2432,1410],{"class":1179},[1173,2434,2435,2437,2439],{"class":1175,"line":1197},[1173,2436,2346],{"class":1183},[1173,2438,1352],{"class":1179},[1173,2440,1410],{"class":1179},[1173,2442,2443,2445,2447],{"class":1175,"line":1214},[1173,2444,2355],{"class":1183},[1173,2446,1352],{"class":1179},[1173,2448,1410],{"class":1179},[1173,2450,2451,2454,2456],{"class":1175,"line":1221},[1173,2452,2453],{"class":1183},"        sass",[1173,2455,1352],{"class":1179},[1173,2457,1410],{"class":1179},[1173,2459,2460,2462,2464,2466,2469,2472],{"class":1175,"line":1227},[1173,2461,2373],{"class":1183},[1173,2463,1352],{"class":1179},[1173,2465,1204],{"class":1179},[1173,2467,2468],{"class":1207},"@use \"~/assets/_colors.sass\" as *",[1173,2470,2471],{"class":1232},"\\n",[1173,2473,1211],{"class":1179},[1173,2475,2476],{"class":1175,"line":1246},[1173,2477,2387],{"class":1179},[1173,2479,2480],{"class":1175,"line":1256},[1173,2481,2392],{"class":1179},[1173,2483,2484],{"class":1175,"line":1261},[1173,2485,1848],{"class":1179},[1173,2487,2488],{"class":1175,"line":1271},[1173,2489,1853],{"class":1179},[1173,2491,2492,2494],{"class":1175,"line":1293},[1173,2493,1370],{"class":1179},[1173,2495,1243],{"class":1232},[1125,2497,2498,2499,1144],{},"Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader ",[1137,2500,2503],{"href":2501,"rel":2502},"https://webpack.js.org/loaders/sass-loader",[1157],"documentation",[1146,2505,2507],{"id":2506},"preprocessor-workers-experimental","Preprocessor Workers (Experimental)",[1125,2509,2510,2511,2516],{},"Vite has made available an ",[1137,2512,2515],{"href":2513,"rel":2514},"https://vite.dev/config/shared-options.html#css-preprocessormaxworkers",[1157],"experimental option"," which can speed up using preprocessors.",[1125,2518,2519,2520,1352],{},"You can enable this in your ",[1140,2521,2311],{},[1163,2523,2525],{"className":1324,"code":2524,"language":1326,"meta":1169,"style":1169},"\nexport default defineNuxtConfig({\n  vite: {\n    css: {\n      preprocessorMaxWorkers: true // number of CPUs minus 1\n    }\n  }\n})\n",[1140,2526,2527,2531,2543,2551,2559,2573,2577,2581],{"__ignoreMap":1169},[1173,2528,2529],{"class":1175,"line":1176},[1173,2530,1218],{"emptyLinePlaceholder":1217},[1173,2532,2533,2535,2537,2539,2541],{"class":1175,"line":1190},[1173,2534,1333],{"class":1200},[1173,2536,1336],{"class":1200},[1173,2538,1339],{"class":1276},[1173,2540,1233],{"class":1232},[1173,2542,1344],{"class":1179},[1173,2544,2545,2547,2549],{"class":1175,"line":1197},[1173,2546,2337],{"class":1183},[1173,2548,1352],{"class":1179},[1173,2550,1410],{"class":1179},[1173,2552,2553,2555,2557],{"class":1175,"line":1214},[1173,2554,2346],{"class":1183},[1173,2556,1352],{"class":1179},[1173,2558,1410],{"class":1179},[1173,2560,2561,2564,2566,2570],{"class":1175,"line":1221},[1173,2562,2563],{"class":1183},"      preprocessorMaxWorkers",[1173,2565,1352],{"class":1179},[1173,2567,2569],{"class":2568},"sbKd-"," true",[1173,2571,2572],{"class":1193}," // number of CPUs minus 1\n",[1173,2574,2575],{"class":1175,"line":1227},[1173,2576,1848],{"class":1179},[1173,2578,2579],{"class":1175,"line":1246},[1173,2580,1853],{"class":1179},[1173,2582,2583,2585],{"class":1175,"line":1256},[1173,2584,1370],{"class":1179},[1173,2586,1243],{"class":1232},[2588,2589,2590],"note",{},[1125,2591,2592,2593,1144],{},"This is an experimental option and you should refer to the Vite documentation and ",[1137,2594,2597],{"href":2595,"rel":2596},"https://github.com/vitejs/vite/discussions/15835",[1157],"provide feedback",[1129,2599,2601],{"id":2600},"single-file-components-sfc-styling","Single File Components (SFC) Styling",[1125,2603,2604,2605,1144],{},"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 ",[1137,2606,2609],{"href":2607,"rel":2608},"https://github.com/Tahul/pinceau",[1157],"pinceau",[1125,2611,2612,2613,2618],{},"You can refer to the ",[1137,2614,2617],{"href":2615,"rel":2616},"https://vuejs.org/api/sfc-css-features.html",[1157],"Vue docs"," for a comprehensive reference about styling components in SFC.",[1146,2620,2622],{"id":2621},"class-and-style-bindings","Class And Style Bindings",[1125,2624,2625],{},"You can leverage Vue SFC features to style your components with class and style attributes.",[1572,2627,2628,2864,3079,3210],{},[1163,2629,2632],{"className":1165,"code":2630,"filename":2631,"language":1168,"meta":1169,"style":1169},"\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",[1140,2633,2634,2655,2675,2693,2709,2721,2736,2742,2750,2754,2763,2829,2855],{"__ignoreMap":1169},[1173,2635,2636,2638,2640,2643,2645,2647,2649,2651,2653],{"class":1175,"line":1176},[1173,2637,1180],{"class":1179},[1173,2639,1184],{"class":1183},[1173,2641,2642],{"class":1979}," setup",[1173,2644,2152],{"class":1979},[1173,2646,2155],{"class":1179},[1173,2648,1282],{"class":1179},[1173,2650,1326],{"class":1207},[1173,2652,1282],{"class":1179},[1173,2654,1187],{"class":1179},[1173,2656,2657,2660,2663,2665,2668,2670,2673],{"class":1175,"line":1190},[1173,2658,2659],{"class":1979},"const",[1173,2661,2662],{"class":1232}," isActive ",[1173,2664,2155],{"class":1179},[1173,2666,2667],{"class":1276}," ref",[1173,2669,1233],{"class":1232},[1173,2671,2672],{"class":2568},"true",[1173,2674,1243],{"class":1232},[1173,2676,2677,2679,2682,2684,2686,2688,2691],{"class":1175,"line":1197},[1173,2678,2659],{"class":1979},[1173,2680,2681],{"class":1232}," hasError ",[1173,2683,2155],{"class":1179},[1173,2685,2667],{"class":1276},[1173,2687,1233],{"class":1232},[1173,2689,2690],{"class":2568},"false",[1173,2692,1243],{"class":1232},[1173,2694,2695,2697,2700,2702,2705,2707],{"class":1175,"line":1214},[1173,2696,2659],{"class":1979},[1173,2698,2699],{"class":1232}," classObject ",[1173,2701,2155],{"class":1179},[1173,2703,2704],{"class":1276}," reactive",[1173,2706,1233],{"class":1232},[1173,2708,1344],{"class":1179},[1173,2710,2711,2714,2716,2718],{"class":1175,"line":1221},[1173,2712,2713],{"class":1183},"  active",[1173,2715,1352],{"class":1179},[1173,2717,2569],{"class":2568},[1173,2719,2720],{"class":1179},",\n",[1173,2722,2723,2726,2729,2731,2733],{"class":1175,"line":1227},[1173,2724,2725],{"class":1179},"  '",[1173,2727,2728],{"class":1183},"text-danger",[1173,2730,1236],{"class":1179},[1173,2732,1352],{"class":1179},[1173,2734,2735],{"class":2568}," false\n",[1173,2737,2738,2740],{"class":1175,"line":1246},[1173,2739,1370],{"class":1179},[1173,2741,1243],{"class":1232},[1173,2743,2744,2746,2748],{"class":1175,"line":1256},[1173,2745,1249],{"class":1179},[1173,2747,1184],{"class":1183},[1173,2749,1187],{"class":1179},[1173,2751,2752],{"class":1175,"line":1261},[1173,2753,1218],{"emptyLinePlaceholder":1217},[1173,2755,2756,2758,2761],{"class":1175,"line":1271},[1173,2757,1180],{"class":1179},[1173,2759,2760],{"class":1183},"template",[1173,2762,1187],{"class":1179},[1173,2764,2765,2768,2771,2774,2776,2778,2781,2783,2785,2788,2790,2792,2795,2798,2801,2804,2807,2809,2811,2813,2815,2818,2820,2822,2825,2827],{"class":1175,"line":1293},[1173,2766,2767],{"class":1179},"  \u003C",[1173,2769,2770],{"class":1183},"div",[1173,2772,2773],{"class":1979}," class",[1173,2775,2155],{"class":1179},[1173,2777,1282],{"class":1179},[1173,2779,2780],{"class":1207},"static",[1173,2782,1282],{"class":1179},[1173,2784,2312],{"class":1179},[1173,2786,2787],{"class":1979},"class",[1173,2789,2155],{"class":1179},[1173,2791,1282],{"class":1179},[1173,2793,2794],{"class":1179},"{ ",[1173,2796,2797],{"class":1183},"active",[1173,2799,2800],{"class":1179},": ",[1173,2802,2803],{"class":1232},"isActive",[1173,2805,2806],{"class":1179},", ",[1173,2808,1236],{"class":1179},[1173,2810,2728],{"class":1183},[1173,2812,1236],{"class":1179},[1173,2814,2800],{"class":1179},[1173,2816,2817],{"class":1232},"hasError",[1173,2819,1841],{"class":1179},[1173,2821,1282],{"class":1179},[1173,2823,2824],{"class":1179},">\u003C/",[1173,2826,2770],{"class":1183},[1173,2828,1187],{"class":1179},[1173,2830,2832,2834,2836,2838,2840,2842,2844,2847,2849,2851,2853],{"class":1175,"line":2831},12,[1173,2833,2767],{"class":1179},[1173,2835,2770],{"class":1183},[1173,2837,2312],{"class":1179},[1173,2839,2787],{"class":1979},[1173,2841,2155],{"class":1179},[1173,2843,1282],{"class":1179},[1173,2845,2846],{"class":1232},"classObject",[1173,2848,1282],{"class":1179},[1173,2850,2824],{"class":1179},[1173,2852,2770],{"class":1183},[1173,2854,1187],{"class":1179},[1173,2856,2858,2860,2862],{"class":1175,"line":2857},13,[1173,2859,1249],{"class":1179},[1173,2861,2760],{"class":1183},[1173,2863,1187],{"class":1179},[1163,2865,2868],{"className":1165,"code":2866,"filename":2867,"language":1168,"meta":1169,"style":1169},"\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",[1140,2869,2870,2890,2906,2924,2928,2950,2980,3020,3027,3035,3039,3047,3071],{"__ignoreMap":1169},[1173,2871,2872,2874,2876,2878,2880,2882,2884,2886,2888],{"class":1175,"line":1176},[1173,2873,1180],{"class":1179},[1173,2875,1184],{"class":1183},[1173,2877,2642],{"class":1979},[1173,2879,2152],{"class":1979},[1173,2881,2155],{"class":1179},[1173,2883,1282],{"class":1179},[1173,2885,1326],{"class":1207},[1173,2887,1282],{"class":1179},[1173,2889,1187],{"class":1179},[1173,2891,2892,2894,2896,2898,2900,2902,2904],{"class":1175,"line":1190},[1173,2893,2659],{"class":1979},[1173,2895,2662],{"class":1232},[1173,2897,2155],{"class":1179},[1173,2899,2667],{"class":1276},[1173,2901,1233],{"class":1232},[1173,2903,2672],{"class":2568},[1173,2905,1243],{"class":1232},[1173,2907,2908,2910,2913,2915,2917,2919,2922],{"class":1175,"line":1197},[1173,2909,2659],{"class":1979},[1173,2911,2912],{"class":1232}," error ",[1173,2914,2155],{"class":1179},[1173,2916,2667],{"class":1276},[1173,2918,1233],{"class":1232},[1173,2920,2921],{"class":1179},"null",[1173,2923,1243],{"class":1232},[1173,2925,2926],{"class":1175,"line":1214},[1173,2927,1218],{"emptyLinePlaceholder":1217},[1173,2929,2930,2932,2934,2936,2939,2941,2944,2946,2948],{"class":1175,"line":1221},[1173,2931,2659],{"class":1979},[1173,2933,2699],{"class":1232},[1173,2935,2155],{"class":1179},[1173,2937,2938],{"class":1276}," computed",[1173,2940,1233],{"class":1232},[1173,2942,2943],{"class":1179},"()",[1173,2945,1980],{"class":1979},[1173,2947,2011],{"class":1232},[1173,2949,1344],{"class":1179},[1173,2951,2952,2954,2956,2959,2961,2964,2967,2970,2973,2975,2978],{"class":1175,"line":1227},[1173,2953,2713],{"class":1183},[1173,2955,1352],{"class":1179},[1173,2957,2958],{"class":1232}," isActive",[1173,2960,1144],{"class":1179},[1173,2962,2963],{"class":1232},"value ",[1173,2965,2966],{"class":1179},"&&",[1173,2968,2969],{"class":1179}," !",[1173,2971,2972],{"class":1232},"error",[1173,2974,1144],{"class":1179},[1173,2976,2977],{"class":1232},"value",[1173,2979,2720],{"class":1179},[1173,2981,2982,2984,2986,2988,2990,2993,2995,2997,2999,3001,3003,3005,3007,3010,3013,3015,3018],{"class":1175,"line":1246},[1173,2983,2725],{"class":1179},[1173,2985,2728],{"class":1183},[1173,2987,1236],{"class":1179},[1173,2989,1352],{"class":1179},[1173,2991,2992],{"class":1232}," error",[1173,2994,1144],{"class":1179},[1173,2996,2963],{"class":1232},[1173,2998,2966],{"class":1179},[1173,3000,2992],{"class":1232},[1173,3002,1144],{"class":1179},[1173,3004,2977],{"class":1232},[1173,3006,1144],{"class":1179},[1173,3008,3009],{"class":1232},"type ",[1173,3011,3012],{"class":1179},"===",[1173,3014,1204],{"class":1179},[1173,3016,3017],{"class":1207},"fatal",[1173,3019,1211],{"class":1179},[1173,3021,3022,3024],{"class":1175,"line":1256},[1173,3023,1370],{"class":1179},[1173,3025,3026],{"class":1232},"))\n",[1173,3028,3029,3031,3033],{"class":1175,"line":1261},[1173,3030,1249],{"class":1179},[1173,3032,1184],{"class":1183},[1173,3034,1187],{"class":1179},[1173,3036,3037],{"class":1175,"line":1271},[1173,3038,1218],{"emptyLinePlaceholder":1217},[1173,3040,3041,3043,3045],{"class":1175,"line":1293},[1173,3042,1180],{"class":1179},[1173,3044,2760],{"class":1183},[1173,3046,1187],{"class":1179},[1173,3048,3049,3051,3053,3055,3057,3059,3061,3063,3065,3067,3069],{"class":1175,"line":2831},[1173,3050,2767],{"class":1179},[1173,3052,2770],{"class":1183},[1173,3054,2312],{"class":1179},[1173,3056,2787],{"class":1979},[1173,3058,2155],{"class":1179},[1173,3060,1282],{"class":1179},[1173,3062,2846],{"class":1232},[1173,3064,1282],{"class":1179},[1173,3066,2824],{"class":1179},[1173,3068,2770],{"class":1183},[1173,3070,1187],{"class":1179},[1173,3072,3073,3075,3077],{"class":1175,"line":2857},[1173,3074,1249],{"class":1179},[1173,3076,2760],{"class":1183},[1173,3078,1187],{"class":1179},[1163,3080,3083],{"className":1165,"code":3081,"filename":3082,"language":1168,"meta":1169,"style":1169},"\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",[1140,3084,3085,3105,3121,3142,3150,3154,3162,3202],{"__ignoreMap":1169},[1173,3086,3087,3089,3091,3093,3095,3097,3099,3101,3103],{"class":1175,"line":1176},[1173,3088,1180],{"class":1179},[1173,3090,1184],{"class":1183},[1173,3092,2642],{"class":1979},[1173,3094,2152],{"class":1979},[1173,3096,2155],{"class":1179},[1173,3098,1282],{"class":1179},[1173,3100,1326],{"class":1207},[1173,3102,1282],{"class":1179},[1173,3104,1187],{"class":1179},[1173,3106,3107,3109,3111,3113,3115,3117,3119],{"class":1175,"line":1190},[1173,3108,2659],{"class":1979},[1173,3110,2662],{"class":1232},[1173,3112,2155],{"class":1179},[1173,3114,2667],{"class":1276},[1173,3116,1233],{"class":1232},[1173,3118,2672],{"class":2568},[1173,3120,1243],{"class":1232},[1173,3122,3123,3125,3128,3130,3132,3134,3136,3138,3140],{"class":1175,"line":1197},[1173,3124,2659],{"class":1979},[1173,3126,3127],{"class":1232}," errorClass ",[1173,3129,2155],{"class":1179},[1173,3131,2667],{"class":1276},[1173,3133,1233],{"class":1232},[1173,3135,1236],{"class":1179},[1173,3137,2728],{"class":1207},[1173,3139,1236],{"class":1179},[1173,3141,1243],{"class":1232},[1173,3143,3144,3146,3148],{"class":1175,"line":1214},[1173,3145,1249],{"class":1179},[1173,3147,1184],{"class":1183},[1173,3149,1187],{"class":1179},[1173,3151,3152],{"class":1175,"line":1221},[1173,3153,1218],{"emptyLinePlaceholder":1217},[1173,3155,3156,3158,3160],{"class":1175,"line":1227},[1173,3157,1180],{"class":1179},[1173,3159,2760],{"class":1183},[1173,3161,1187],{"class":1179},[1173,3163,3164,3166,3168,3170,3172,3174,3176,3179,3181,3183,3185,3188,3191,3194,3196,3198,3200],{"class":1175,"line":1246},[1173,3165,2767],{"class":1179},[1173,3167,2770],{"class":1183},[1173,3169,2312],{"class":1179},[1173,3171,2787],{"class":1979},[1173,3173,2155],{"class":1179},[1173,3175,1282],{"class":1179},[1173,3177,3178],{"class":1179},"[{ ",[1173,3180,2797],{"class":1183},[1173,3182,2800],{"class":1179},[1173,3184,2803],{"class":1232},[1173,3186,3187],{"class":1179}," }, ",[1173,3189,3190],{"class":1232},"errorClass",[1173,3192,3193],{"class":1179},"]",[1173,3195,1282],{"class":1179},[1173,3197,2824],{"class":1179},[1173,3199,2770],{"class":1183},[1173,3201,1187],{"class":1179},[1173,3203,3204,3206,3208],{"class":1175,"line":1256},[1173,3205,1249],{"class":1179},[1173,3207,2760],{"class":1183},[1173,3209,1187],{"class":1179},[1163,3211,3214],{"className":1165,"code":3212,"filename":3213,"language":1168,"meta":1169,"style":1169},"\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",[1140,3215,3216,3236,3258,3277,3321,3329,3333,3341,3394,3429,3454],{"__ignoreMap":1169},[1173,3217,3218,3220,3222,3224,3226,3228,3230,3232,3234],{"class":1175,"line":1176},[1173,3219,1180],{"class":1179},[1173,3221,1184],{"class":1183},[1173,3223,2642],{"class":1979},[1173,3225,2152],{"class":1979},[1173,3227,2155],{"class":1179},[1173,3229,1282],{"class":1179},[1173,3231,1326],{"class":1207},[1173,3233,1282],{"class":1179},[1173,3235,1187],{"class":1179},[1173,3237,3238,3240,3243,3245,3247,3249,3251,3254,3256],{"class":1175,"line":1190},[1173,3239,2659],{"class":1979},[1173,3241,3242],{"class":1232}," activeColor ",[1173,3244,2155],{"class":1179},[1173,3246,2667],{"class":1276},[1173,3248,1233],{"class":1232},[1173,3250,1236],{"class":1179},[1173,3252,3253],{"class":1207},"red",[1173,3255,1236],{"class":1179},[1173,3257,1243],{"class":1232},[1173,3259,3260,3262,3265,3267,3269,3271,3275],{"class":1175,"line":1197},[1173,3261,2659],{"class":1979},[1173,3263,3264],{"class":1232}," fontSize ",[1173,3266,2155],{"class":1179},[1173,3268,2667],{"class":1276},[1173,3270,1233],{"class":1232},[1173,3272,3274],{"class":3273},"sYRBq","30",[1173,3276,1243],{"class":1232},[1173,3278,3279,3281,3284,3286,3288,3290,3292,3295,3297,3299,3301,3303,3305,3308,3310,3312,3315,3317,3319],{"class":1175,"line":1214},[1173,3280,2659],{"class":1979},[1173,3282,3283],{"class":1232}," styleObject ",[1173,3285,2155],{"class":1179},[1173,3287,2704],{"class":1276},[1173,3289,1233],{"class":1232},[1173,3291,1812],{"class":1179},[1173,3293,3294],{"class":1183}," color",[1173,3296,1352],{"class":1179},[1173,3298,1204],{"class":1179},[1173,3300,3253],{"class":1207},[1173,3302,1236],{"class":1179},[1173,3304,1542],{"class":1179},[1173,3306,3307],{"class":1183}," fontSize",[1173,3309,1352],{"class":1179},[1173,3311,1204],{"class":1179},[1173,3313,3314],{"class":1207},"13px",[1173,3316,1236],{"class":1179},[1173,3318,1841],{"class":1179},[1173,3320,1243],{"class":1232},[1173,3322,3323,3325,3327],{"class":1175,"line":1221},[1173,3324,1249],{"class":1179},[1173,3326,1184],{"class":1183},[1173,3328,1187],{"class":1179},[1173,3330,3331],{"class":1175,"line":1227},[1173,3332,1218],{"emptyLinePlaceholder":1217},[1173,3334,3335,3337,3339],{"class":1175,"line":1246},[1173,3336,1180],{"class":1179},[1173,3338,2760],{"class":1183},[1173,3340,1187],{"class":1179},[1173,3342,3343,3345,3347,3349,3351,3353,3355,3357,3360,3362,3365,3367,3370,3372,3374,3377,3379,3382,3384,3386,3388,3390,3392],{"class":1175,"line":1256},[1173,3344,2767],{"class":1179},[1173,3346,2770],{"class":1183},[1173,3348,2312],{"class":1179},[1173,3350,1266],{"class":1979},[1173,3352,2155],{"class":1179},[1173,3354,1282],{"class":1179},[1173,3356,2794],{"class":1179},[1173,3358,3359],{"class":1183},"color",[1173,3361,2800],{"class":1179},[1173,3363,3364],{"class":1232},"activeColor",[1173,3366,2806],{"class":1179},[1173,3368,3369],{"class":1183},"fontSize",[1173,3371,2800],{"class":1179},[1173,3373,3369],{"class":1232},[1173,3375,3376],{"class":1179}," + ",[1173,3378,1236],{"class":1179},[1173,3380,3381],{"class":1207},"px",[1173,3383,1236],{"class":1179},[1173,3385,1841],{"class":1179},[1173,3387,1282],{"class":1179},[1173,3389,2824],{"class":1179},[1173,3391,2770],{"class":1183},[1173,3393,1187],{"class":1179},[1173,3395,3396,3398,3400,3402,3404,3406,3408,3411,3414,3416,3419,3421,3423,3425,3427],{"class":1175,"line":1261},[1173,3397,2767],{"class":1179},[1173,3399,2770],{"class":1183},[1173,3401,2312],{"class":1179},[1173,3403,1266],{"class":1979},[1173,3405,2155],{"class":1179},[1173,3407,1282],{"class":1179},[1173,3409,3410],{"class":1179},"[",[1173,3412,3413],{"class":1232},"baseStyles",[1173,3415,2806],{"class":1179},[1173,3417,3418],{"class":1232},"overridingStyles",[1173,3420,3193],{"class":1179},[1173,3422,1282],{"class":1179},[1173,3424,2824],{"class":1179},[1173,3426,2770],{"class":1183},[1173,3428,1187],{"class":1179},[1173,3430,3431,3433,3435,3437,3439,3441,3443,3446,3448,3450,3452],{"class":1175,"line":1271},[1173,3432,2767],{"class":1179},[1173,3434,2770],{"class":1183},[1173,3436,2312],{"class":1179},[1173,3438,1266],{"class":1979},[1173,3440,2155],{"class":1179},[1173,3442,1282],{"class":1179},[1173,3444,3445],{"class":1232},"styleObject",[1173,3447,1282],{"class":1179},[1173,3449,2824],{"class":1179},[1173,3451,2770],{"class":1183},[1173,3453,1187],{"class":1179},[1173,3455,3456,3458,3460],{"class":1175,"line":1293},[1173,3457,1249],{"class":1179},[1173,3459,2760],{"class":1183},[1173,3461,1187],{"class":1179},[1125,3463,3464,3465,3469],{},"Refer to the ",[1137,3466,2617],{"href":3467,"rel":3468},"https://vuejs.org/guide/essentials/class-and-style.html",[1157]," for more information.",[1146,3471,3473,3474],{"id":3472},"dynamic-styles-with-v-bind","Dynamic Styles With ",[1140,3475,3476],{},"v-bind",[1125,3478,3479],{},"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.",[1163,3481,3483],{"className":1165,"code":3482,"language":1168,"meta":1169,"style":1169},"\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",[1140,3484,3485,3505,3526,3534,3538,3546,3575,3583,3587,3595,3603,3618,3622],{"__ignoreMap":1169},[1173,3486,3487,3489,3491,3493,3495,3497,3499,3501,3503],{"class":1175,"line":1176},[1173,3488,1180],{"class":1179},[1173,3490,1184],{"class":1183},[1173,3492,2642],{"class":1979},[1173,3494,2152],{"class":1979},[1173,3496,2155],{"class":1179},[1173,3498,1282],{"class":1179},[1173,3500,1326],{"class":1207},[1173,3502,1282],{"class":1179},[1173,3504,1187],{"class":1179},[1173,3506,3507,3509,3512,3514,3516,3518,3520,3522,3524],{"class":1175,"line":1190},[1173,3508,2659],{"class":1979},[1173,3510,3511],{"class":1232}," color ",[1173,3513,2155],{"class":1179},[1173,3515,2667],{"class":1276},[1173,3517,1233],{"class":1232},[1173,3519,1282],{"class":1179},[1173,3521,3253],{"class":1207},[1173,3523,1282],{"class":1179},[1173,3525,1243],{"class":1232},[1173,3527,3528,3530,3532],{"class":1175,"line":1197},[1173,3529,1249],{"class":1179},[1173,3531,1184],{"class":1183},[1173,3533,1187],{"class":1179},[1173,3535,3536],{"class":1175,"line":1214},[1173,3537,1218],{"emptyLinePlaceholder":1217},[1173,3539,3540,3542,3544],{"class":1175,"line":1221},[1173,3541,1180],{"class":1179},[1173,3543,2760],{"class":1183},[1173,3545,1187],{"class":1179},[1173,3547,3548,3550,3552,3554,3556,3558,3561,3563,3566,3569,3571,3573],{"class":1175,"line":1227},[1173,3549,2767],{"class":1179},[1173,3551,2770],{"class":1183},[1173,3553,2773],{"class":1979},[1173,3555,2155],{"class":1179},[1173,3557,1282],{"class":1179},[1173,3559,3560],{"class":1207},"text",[1173,3562,1282],{"class":1179},[1173,3564,3565],{"class":1179},">",[1173,3567,3568],{"class":1232},"hello",[1173,3570,1249],{"class":1179},[1173,3572,2770],{"class":1183},[1173,3574,1187],{"class":1179},[1173,3576,3577,3579,3581],{"class":1175,"line":1246},[1173,3578,1249],{"class":1179},[1173,3580,2760],{"class":1183},[1173,3582,1187],{"class":1179},[1173,3584,3585],{"class":1175,"line":1256},[1173,3586,1218],{"emptyLinePlaceholder":1217},[1173,3588,3589,3591,3593],{"class":1175,"line":1261},[1173,3590,1180],{"class":1179},[1173,3592,1266],{"class":1183},[1173,3594,1187],{"class":1179},[1173,3596,3597,3599,3601],{"class":1175,"line":1271},[1173,3598,1144],{"class":1179},[1173,3600,3560],{"class":1524},[1173,3602,1410],{"class":1179},[1173,3604,3605,3608,3610,3613,3616],{"class":1175,"line":1293},[1173,3606,3607],{"class":1415},"  color",[1173,3609,1352],{"class":1179},[1173,3611,3612],{"class":1276}," v-bind",[1173,3614,3615],{"class":1232},"(color)",[1173,3617,1428],{"class":1179},[1173,3619,3620],{"class":1175,"line":2831},[1173,3621,1503],{"class":1179},[1173,3623,3624,3626,3628],{"class":1175,"line":2857},[1173,3625,1249],{"class":1179},[1173,3627,1266],{"class":1183},[1173,3629,1187],{"class":1179},[1146,3631,3633],{"id":3632},"scoped-styles","Scoped Styles",[1125,3635,3636],{},"The scoped attribute allows you to style components in isolation. The styles declared with this attribute will only apply to this component.",[1163,3638,3640],{"className":1165,"code":3639,"language":1168,"meta":1169,"style":1169},"\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",[1140,3641,3642,3650,3678,3686,3690,3701,3709,3720,3724],{"__ignoreMap":1169},[1173,3643,3644,3646,3648],{"class":1175,"line":1176},[1173,3645,1180],{"class":1179},[1173,3647,2760],{"class":1183},[1173,3649,1187],{"class":1179},[1173,3651,3652,3654,3656,3658,3660,3662,3665,3667,3669,3672,3674,3676],{"class":1175,"line":1190},[1173,3653,2767],{"class":1179},[1173,3655,2770],{"class":1183},[1173,3657,2773],{"class":1979},[1173,3659,2155],{"class":1179},[1173,3661,1282],{"class":1179},[1173,3663,3664],{"class":1207},"example",[1173,3666,1282],{"class":1179},[1173,3668,3565],{"class":1179},[1173,3670,3671],{"class":1232},"hi",[1173,3673,1249],{"class":1179},[1173,3675,2770],{"class":1183},[1173,3677,1187],{"class":1179},[1173,3679,3680,3682,3684],{"class":1175,"line":1197},[1173,3681,1249],{"class":1179},[1173,3683,2760],{"class":1183},[1173,3685,1187],{"class":1179},[1173,3687,3688],{"class":1175,"line":1214},[1173,3689,1218],{"emptyLinePlaceholder":1217},[1173,3691,3692,3694,3696,3699],{"class":1175,"line":1221},[1173,3693,1180],{"class":1179},[1173,3695,1266],{"class":1183},[1173,3697,3698],{"class":1979}," scoped",[1173,3700,1187],{"class":1179},[1173,3702,3703,3705,3707],{"class":1175,"line":1227},[1173,3704,1144],{"class":1179},[1173,3706,3664],{"class":1524},[1173,3708,1410],{"class":1179},[1173,3710,3711,3713,3715,3718],{"class":1175,"line":1246},[1173,3712,3607],{"class":1415},[1173,3714,1352],{"class":1179},[1173,3716,3717],{"class":1232}," red",[1173,3719,1428],{"class":1179},[1173,3721,3722],{"class":1175,"line":1256},[1173,3723,1503],{"class":1179},[1173,3725,3726,3728,3730],{"class":1175,"line":1261},[1173,3727,1249],{"class":1179},[1173,3729,1266],{"class":1183},[1173,3731,1187],{"class":1179},[1146,3733,3735],{"id":3734},"css-modules","CSS Modules",[1125,3737,3738,3739,3743,3744,3747],{},"You can use ",[1137,3740,3735],{"href":3741,"rel":3742},"https://github.com/css-modules/css-modules",[1157]," with the module attribute. Access it with the injected ",[1140,3745,3746],{},"$style"," variable.",[1163,3749,3751],{"className":1165,"code":3750,"language":1168,"meta":1169,"style":1169},"\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",[1140,3752,3753,3761,3794,3802,3806,3817,3825,3835,3839],{"__ignoreMap":1169},[1173,3754,3755,3757,3759],{"class":1175,"line":1176},[1173,3756,1180],{"class":1179},[1173,3758,2760],{"class":1183},[1173,3760,1187],{"class":1179},[1173,3762,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781,3783,3785,3788,3790,3792],{"class":1175,"line":1190},[1173,3764,2767],{"class":1179},[1173,3766,1125],{"class":1183},[1173,3768,2312],{"class":1179},[1173,3770,2787],{"class":1979},[1173,3772,2155],{"class":1179},[1173,3774,1282],{"class":1179},[1173,3776,3746],{"class":1232},[1173,3778,1144],{"class":1179},[1173,3780,3253],{"class":1232},[1173,3782,1282],{"class":1179},[1173,3784,3565],{"class":1179},[1173,3786,3787],{"class":1232},"This should be red",[1173,3789,1249],{"class":1179},[1173,3791,1125],{"class":1183},[1173,3793,1187],{"class":1179},[1173,3795,3796,3798,3800],{"class":1175,"line":1197},[1173,3797,1249],{"class":1179},[1173,3799,2760],{"class":1183},[1173,3801,1187],{"class":1179},[1173,3803,3804],{"class":1175,"line":1214},[1173,3805,1218],{"emptyLinePlaceholder":1217},[1173,3807,3808,3810,3812,3815],{"class":1175,"line":1221},[1173,3809,1180],{"class":1179},[1173,3811,1266],{"class":1183},[1173,3813,3814],{"class":1979}," module",[1173,3816,1187],{"class":1179},[1173,3818,3819,3821,3823],{"class":1175,"line":1227},[1173,3820,1144],{"class":1179},[1173,3822,3253],{"class":1524},[1173,3824,1410],{"class":1179},[1173,3826,3827,3829,3831,3833],{"class":1175,"line":1246},[1173,3828,3607],{"class":1415},[1173,3830,1352],{"class":1179},[1173,3832,3717],{"class":1232},[1173,3834,1428],{"class":1179},[1173,3836,3837],{"class":1175,"line":1256},[1173,3838,1503],{"class":1179},[1173,3840,3841,3843,3845],{"class":1175,"line":1261},[1173,3842,1249],{"class":1179},[1173,3844,1266],{"class":1183},[1173,3846,1187],{"class":1179},[1146,3848,3850],{"id":3849},"preprocessors-support","Preprocessors Support",[1125,3852,3853],{},"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.",[1572,3855,3856,3892,3929,3967],{},[1163,3857,3859],{"className":1165,"code":3858,"filename":2318,"language":1168,"meta":1169,"style":1169},"\u003Cstyle lang=\"scss\">\n  /* Write scss here */\n\u003C/style>\n",[1140,3860,3861,3879,3884],{"__ignoreMap":1169},[1173,3862,3863,3865,3867,3869,3871,3873,3875,3877],{"class":1175,"line":1176},[1173,3864,1180],{"class":1179},[1173,3866,1266],{"class":1183},[1173,3868,2152],{"class":1979},[1173,3870,2155],{"class":1179},[1173,3872,1282],{"class":1179},[1173,3874,2160],{"class":1207},[1173,3876,1282],{"class":1179},[1173,3878,1187],{"class":1179},[1173,3880,3881],{"class":1175,"line":1190},[1173,3882,3883],{"class":1232},"  /* Write scss here */\n",[1173,3885,3886,3888,3890],{"class":1175,"line":1197},[1173,3887,1249],{"class":1179},[1173,3889,1266],{"class":1183},[1173,3891,1187],{"class":1179},[1163,3893,3896],{"className":1165,"code":3894,"filename":3895,"language":1168,"meta":1169,"style":1169},"\u003Cstyle lang=\"sass\">\n  /* Write sass here */\n\u003C/style>\n","Sass",[1140,3897,3898,3916,3921],{"__ignoreMap":1169},[1173,3899,3900,3902,3904,3906,3908,3910,3912,3914],{"class":1175,"line":1176},[1173,3901,1180],{"class":1179},[1173,3903,1266],{"class":1183},[1173,3905,2152],{"class":1979},[1173,3907,2155],{"class":1179},[1173,3909,1282],{"class":1179},[1173,3911,2293],{"class":1207},[1173,3913,1282],{"class":1179},[1173,3915,1187],{"class":1179},[1173,3917,3918],{"class":1175,"line":1190},[1173,3919,3920],{"class":1232},"  /* Write sass here */\n",[1173,3922,3923,3925,3927],{"class":1175,"line":1197},[1173,3924,1249],{"class":1179},[1173,3926,1266],{"class":1183},[1173,3928,1187],{"class":1179},[1163,3930,3933],{"className":1165,"code":3931,"filename":3932,"language":1168,"meta":1169,"style":1169},"\u003Cstyle lang=\"less\">\n  /* Write less here */\n\u003C/style>\n","LESS",[1140,3934,3935,3954,3959],{"__ignoreMap":1169},[1173,3936,3937,3939,3941,3943,3945,3947,3950,3952],{"class":1175,"line":1176},[1173,3938,1180],{"class":1179},[1173,3940,1266],{"class":1183},[1173,3942,2152],{"class":1979},[1173,3944,2155],{"class":1179},[1173,3946,1282],{"class":1179},[1173,3948,3949],{"class":1207},"less",[1173,3951,1282],{"class":1179},[1173,3953,1187],{"class":1179},[1173,3955,3956],{"class":1175,"line":1190},[1173,3957,3958],{"class":1232},"  /* Write less here */\n",[1173,3960,3961,3963,3965],{"class":1175,"line":1197},[1173,3962,1249],{"class":1179},[1173,3964,1266],{"class":1183},[1173,3966,1187],{"class":1179},[1163,3968,3970],{"className":1165,"code":3969,"filename":2115,"language":1168,"meta":1169,"style":1169},"\u003Cstyle lang=\"stylus\">\n  /* Write stylus here */\n\u003C/style>\n",[1140,3971,3972,3991,3996],{"__ignoreMap":1169},[1173,3973,3974,3976,3978,3980,3982,3984,3987,3989],{"class":1175,"line":1176},[1173,3975,1180],{"class":1179},[1173,3977,1266],{"class":1183},[1173,3979,2152],{"class":1979},[1173,3981,2155],{"class":1179},[1173,3983,1282],{"class":1179},[1173,3985,3986],{"class":1207},"stylus",[1173,3988,1282],{"class":1179},[1173,3990,1187],{"class":1179},[1173,3992,3993],{"class":1175,"line":1190},[1173,3994,3995],{"class":1232},"  /* Write stylus here */\n",[1173,3997,3998,4000,4002],{"class":1175,"line":1197},[1173,3999,1249],{"class":1179},[1173,4001,1266],{"class":1183},[1173,4003,1187],{"class":1179},[1125,4005,2612,4006,4011,4012,4017,4018,1144],{},[1137,4007,4010],{"href":4008,"rel":4009},"https://vite.dev/guide/features.html#css",[1157],"Vite CSS docs"," and the ",[1137,4013,4016],{"href":4014,"rel":4015},"https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue",[1157],"@vitejs/plugin-vue docs",".\nFor webpack users, refer to the ",[1137,4019,4022],{"href":4020,"rel":4021},"https://vue-loader.vuejs.org",[1157],"vue loader docs",[1129,4024,4026],{"id":4025},"using-postcss","Using PostCSS",[1125,4028,4029,4030,4032],{},"Nuxt comes with postcss built-in. You can configure it in your ",[1140,4031,2311],{}," file.",[1163,4034,4036],{"className":1324,"code":4035,"filename":260,"language":1326,"meta":1169,"style":1169},"export default defineNuxtConfig({\n  postcss: {\n    plugins: {\n      'postcss-nested': {},\n      'postcss-custom-media': {}\n    }\n  }\n})\n",[1140,4037,4038,4050,4059,4068,4083,4097,4101,4105],{"__ignoreMap":1169},[1173,4039,4040,4042,4044,4046,4048],{"class":1175,"line":1176},[1173,4041,1333],{"class":1200},[1173,4043,1336],{"class":1200},[1173,4045,1339],{"class":1276},[1173,4047,1233],{"class":1232},[1173,4049,1344],{"class":1179},[1173,4051,4052,4055,4057],{"class":1175,"line":1190},[1173,4053,4054],{"class":1183},"  postcss",[1173,4056,1352],{"class":1179},[1173,4058,1410],{"class":1179},[1173,4060,4061,4064,4066],{"class":1175,"line":1197},[1173,4062,4063],{"class":1183},"    plugins",[1173,4065,1352],{"class":1179},[1173,4067,1410],{"class":1179},[1173,4069,4070,4073,4076,4078,4080],{"class":1175,"line":1214},[1173,4071,4072],{"class":1179},"      '",[1173,4074,4075],{"class":1183},"postcss-nested",[1173,4077,1236],{"class":1179},[1173,4079,1352],{"class":1179},[1173,4081,4082],{"class":1179}," {},\n",[1173,4084,4085,4087,4090,4092,4094],{"class":1175,"line":1221},[1173,4086,4072],{"class":1179},[1173,4088,4089],{"class":1183},"postcss-custom-media",[1173,4091,1236],{"class":1179},[1173,4093,1352],{"class":1179},[1173,4095,4096],{"class":1179}," {}\n",[1173,4098,4099],{"class":1175,"line":1227},[1173,4100,1848],{"class":1179},[1173,4102,4103],{"class":1175,"line":1246},[1173,4104,1853],{"class":1179},[1173,4106,4107,4109],{"class":1175,"line":1256},[1173,4108,1370],{"class":1179},[1173,4110,1243],{"class":1232},[1125,4112,4113],{},"For proper syntax highlighting in SFC, you can use the postcss lang attribute.",[1163,4115,4117],{"className":1165,"code":4116,"language":1168,"meta":1169,"style":1169},"\u003Cstyle lang=\"postcss\">\n  /* Write postcss here */\n\u003C/style>\n",[1140,4118,4119,4138,4143],{"__ignoreMap":1169},[1173,4120,4121,4123,4125,4127,4129,4131,4134,4136],{"class":1175,"line":1176},[1173,4122,1180],{"class":1179},[1173,4124,1266],{"class":1183},[1173,4126,2152],{"class":1979},[1173,4128,2155],{"class":1179},[1173,4130,1282],{"class":1179},[1173,4132,4133],{"class":1207},"postcss",[1173,4135,1282],{"class":1179},[1173,4137,1187],{"class":1179},[1173,4139,4140],{"class":1175,"line":1190},[1173,4141,4142],{"class":1232},"  /* Write postcss here */\n",[1173,4144,4145,4147,4149],{"class":1175,"line":1197},[1173,4146,1249],{"class":1179},[1173,4148,1266],{"class":1183},[1173,4150,1187],{"class":1179},[1125,4152,4153],{},"By default, Nuxt comes with the following plugins already pre-configured:",[4155,4156,4157,4169,4180,4188],"ul",{},[4158,4159,4160,4165,4166,4168],"li",{},[1137,4161,4164],{"href":4162,"rel":4163},"https://github.com/postcss/postcss-import",[1157],"postcss-import",": Improves the ",[1140,4167,1160],{}," rule",[4158,4170,4171,4176,4177,4179],{},[1137,4172,4175],{"href":4173,"rel":4174},"https://github.com/postcss/postcss-url",[1157],"postcss-url",": Transforms ",[1140,4178,1395],{}," statements",[4158,4181,4182,4187],{},[1137,4183,4186],{"href":4184,"rel":4185},"https://github.com/postcss/autoprefixer",[1157],"autoprefixer",": Automatically adds vendor prefixes",[4158,4189,4190,4195],{},[1137,4191,4194],{"href":4192,"rel":4193},"https://cssnano.github.io/cssnano",[1157],"cssnano",": Minification and purge",[1129,4197,4199],{"id":4198},"leveraging-layouts-for-multiple-styles","Leveraging Layouts For Multiple Styles",[1125,4201,4202],{},"If you need to style different parts of your application completely differently, you can use layouts.\nUse different styles for different layouts.",[1163,4204,4206],{"className":1165,"code":4205,"language":1168,"meta":1169,"style":1169},"\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",[1140,4207,4208,4216,4235,4253,4263,4272,4280,4284,4292,4300,4310,4314],{"__ignoreMap":1169},[1173,4209,4210,4212,4214],{"class":1175,"line":1176},[1173,4211,1180],{"class":1179},[1173,4213,2760],{"class":1183},[1173,4215,1187],{"class":1179},[1173,4217,4218,4220,4222,4224,4226,4228,4231,4233],{"class":1175,"line":1190},[1173,4219,2767],{"class":1179},[1173,4221,2770],{"class":1183},[1173,4223,2773],{"class":1979},[1173,4225,2155],{"class":1179},[1173,4227,1282],{"class":1179},[1173,4229,4230],{"class":1207},"default-layout",[1173,4232,1282],{"class":1179},[1173,4234,1187],{"class":1179},[1173,4236,4237,4240,4242,4244,4247,4249,4251],{"class":1175,"line":1197},[1173,4238,4239],{"class":1179},"    \u003C",[1173,4241,1525],{"class":1183},[1173,4243,3565],{"class":1179},[1173,4245,4246],{"class":1232},"Default Layout",[1173,4248,1249],{"class":1179},[1173,4250,1525],{"class":1183},[1173,4252,1187],{"class":1179},[1173,4254,4255,4257,4260],{"class":1175,"line":1214},[1173,4256,4239],{"class":1179},[1173,4258,4259],{"class":1183},"slot",[1173,4261,4262],{"class":1179}," />\n",[1173,4264,4265,4268,4270],{"class":1175,"line":1221},[1173,4266,4267],{"class":1179},"  \u003C/",[1173,4269,2770],{"class":1183},[1173,4271,1187],{"class":1179},[1173,4273,4274,4276,4278],{"class":1175,"line":1227},[1173,4275,1249],{"class":1179},[1173,4277,2760],{"class":1183},[1173,4279,1187],{"class":1179},[1173,4281,4282],{"class":1175,"line":1246},[1173,4283,1218],{"emptyLinePlaceholder":1217},[1173,4285,4286,4288,4290],{"class":1175,"line":1256},[1173,4287,1180],{"class":1179},[1173,4289,1266],{"class":1183},[1173,4291,1187],{"class":1179},[1173,4293,4294,4296,4298],{"class":1175,"line":1261},[1173,4295,1144],{"class":1179},[1173,4297,4230],{"class":1524},[1173,4299,1410],{"class":1179},[1173,4301,4302,4304,4306,4308],{"class":1175,"line":1271},[1173,4303,3607],{"class":1415},[1173,4305,1352],{"class":1179},[1173,4307,3717],{"class":1232},[1173,4309,1428],{"class":1179},[1173,4311,4312],{"class":1175,"line":1293},[1173,4313,1503],{"class":1179},[1173,4315,4316,4318,4320],{"class":1175,"line":2831},[1173,4317,1249],{"class":1179},[1173,4319,1266],{"class":1183},[1173,4321,1187],{"class":1179},[1868,4323],{"to":192},[1129,4325,4327],{"id":4326},"third-party-libraries-and-modules","Third Party Libraries And Modules",[1125,4329,4330,4331,4336,4337,1144],{},"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 ",[1137,4332,4335],{"href":4333,"rel":4334},"https://unocss.dev",[1157],"UnoCSS"," or ",[1137,4338,4341],{"href":4339,"rel":4340},"https://tailwindcss.com",[1157],"Tailwind CSS",[1125,4343,4344,4345,4349],{},"The community and the Nuxt team have developed plenty of Nuxt modules to make the integration easier.\nYou can discover them on the ",[1137,4346,4348],{"href":4347},"/modules","modules section"," of the website.\nHere are a few modules to help you get started:",[4155,4351,4352,4358,4364,4372,4379,4387],{},[4158,4353,4354,4357],{},[1137,4355,4335],{"href":4356},"/modules/unocss",": Instant on-demand atomic CSS engine",[4158,4359,4360,4363],{},[1137,4361,4341],{"href":4362},"/modules/tailwindcss",": Utility-first CSS framework",[4158,4365,4366,4371],{},[1137,4367,4370],{"href":4368,"rel":4369},"https://github.com/nuxt-modules/fontaine",[1157],"Fontaine",": Font metric fallback",[4158,4373,4374,4378],{},[1137,4375,4377],{"href":2607,"rel":4376},[1157],"Pinceau",": Adaptable styling framework",[4158,4380,4381,4386],{},[1137,4382,4385],{"href":4383,"rel":4384},"https://ui.nuxt.com",[1157],"Nuxt UI",": A UI Library for Modern Web Apps",[4158,4388,4389,4394],{},[1137,4390,4393],{"href":4391,"rel":4392},"https://panda-css.com/docs/installation/nuxt",[1157],"Panda CSS",": CSS-in-JS engine that generates atomic CSS at build time",[1125,4396,4397,4398,4401,4402,4405,4406,4409],{},"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 ",[1137,4399,4400],{"href":212},"Nuxt plugin"," and/or ",[1137,4403,4404],{"href":308},"make your own module",". Share them with the ",[1137,4407,4408],{"href":4347},"community"," if you do!",[1146,4411,4413],{"id":4412},"easily-load-webfonts","Easily Load Webfonts",[1125,4415,3738,4416,4421],{},[1137,4417,4420],{"href":4418,"rel":4419},"https://github.com/nuxt-modules/google-fonts",[1157],"the Nuxt Google Fonts module"," to load Google Fonts.",[1125,4423,4424,4425,4429,4430,4435],{},"If you are using ",[1137,4426,4335],{"href":4427,"rel":4428},"https://unocss.dev/integrations/nuxt",[1157],", note that it comes with a ",[1137,4431,4434],{"href":4432,"rel":4433},"https://unocss.dev/presets/web-fonts",[1157],"web fonts presets"," to conveniently load fonts from common providers, including Google Fonts and more.",[1129,4437,796],{"id":4438},"advanced",[1146,4440,59],{"id":4441},"transitions",[1125,4443,4444,4445,4448,4449,1144],{},"Nuxt comes with the same ",[1140,4446,4447],{},"\u003CTransition>"," element that Vue has, and also has support for the experimental ",[1137,4450,4452],{"href":4451},"/docs/getting-started/transitions#view-transitions-api-experimental","View Transitions API",[1868,4454],{"to":60},[1146,4456,4458],{"id":4457},"font-advanced-optimization","Font Advanced Optimization",[1125,4460,4461,4462,4465,4466,4471],{},"We would recommend using ",[1137,4463,4370],{"href":4368,"rel":4464},[1157]," to reduce your ",[1137,4467,4470],{"href":4468,"rel":4469},"https://web.dev/cls",[1157],"CLS",". If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.",[1301,4473,4474],{},[1125,4475,4476],{},"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!",[1146,4478,4480],{"id":4479},"lcp-advanced-optimizations","LCP Advanced Optimizations",[1125,4482,4483],{},"You can do the following to speed-up the download of your global CSS files:",[4155,4485,4486,4489,4492,4495],{},[4158,4487,4488],{},"Use a CDN so the files are physically closer to your users",[4158,4490,4491],{},"Compress your assets, ideally using Brotli",[4158,4493,4494],{},"Use HTTP2/HTTP3 for delivery",[4158,4496,4497],{},"Host your assets on the same domain (do not use a different subdomain)",[1125,4499,4500,4501,1144],{},"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 ",[1137,4502,2067],{"href":4503,"rel":4504},"https://web.dev/optimize-lcp",[1157],[1125,4506,4507],{},"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.",[1163,4509,4511],{"className":1324,"code":4510,"filename":260,"language":1326,"meta":1169,"style":1169},"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",[1140,4512,4513,4525,4534,4557,4562,4615,4629,4634,4684,4689,4739,4743,4747,4752,4758],{"__ignoreMap":1169},[1173,4514,4515,4517,4519,4521,4523],{"class":1175,"line":1176},[1173,4516,1333],{"class":1200},[1173,4518,1336],{"class":1200},[1173,4520,1339],{"class":1276},[1173,4522,1233],{"class":1232},[1173,4524,1344],{"class":1179},[1173,4526,4527,4530,4532],{"class":1175,"line":1190},[1173,4528,4529],{"class":1183},"  hooks",[1173,4531,1352],{"class":1179},[1173,4533,1410],{"class":1179},[1173,4535,4536,4539,4542,4544,4546,4548,4551,4553,4555],{"class":1175,"line":1197},[1173,4537,4538],{"class":1179},"    '",[1173,4540,4541],{"class":1183},"build:manifest",[1173,4543,1236],{"class":1179},[1173,4545,1352],{"class":1179},[1173,4547,2011],{"class":1179},[1173,4549,4550],{"class":1973},"manifest",[1173,4552,1449],{"class":1179},[1173,4554,1980],{"class":1979},[1173,4556,1410],{"class":1179},[1173,4558,4559],{"class":1175,"line":1214},[1173,4560,4561],{"class":1193},"      // find the app entry, css list\n",[1173,4563,4564,4567,4570,4573,4576,4578,4581,4583,4585,4587,4589,4592,4594,4597,4599,4602,4604,4607,4609,4612],{"class":1175,"line":1221},[1173,4565,4566],{"class":1979},"      const",[1173,4568,4569],{"class":1232}," css",[1173,4571,4572],{"class":1179}," =",[1173,4574,4575],{"class":1232}," Object",[1173,4577,1144],{"class":1179},[1173,4579,4580],{"class":1276},"values",[1173,4582,1233],{"class":1183},[1173,4584,4550],{"class":1232},[1173,4586,1449],{"class":1183},[1173,4588,1144],{"class":1179},[1173,4590,4591],{"class":1276},"find",[1173,4593,1233],{"class":1183},[1173,4595,4596],{"class":1973},"options",[1173,4598,1980],{"class":1979},[1173,4600,4601],{"class":1232}," options",[1173,4603,1144],{"class":1179},[1173,4605,4606],{"class":1232},"isEntry",[1173,4608,1449],{"class":1183},[1173,4610,4611],{"class":1179},"?.",[1173,4613,4614],{"class":1232},"css\n",[1173,4616,4617,4620,4622,4624,4627],{"class":1175,"line":1227},[1173,4618,4619],{"class":1200},"      if",[1173,4621,2011],{"class":1183},[1173,4623,1315],{"class":1232},[1173,4625,4626],{"class":1183},") ",[1173,4628,1344],{"class":1179},[1173,4630,4631],{"class":1175,"line":1246},[1173,4632,4633],{"class":1193},"        // start from the end of the array and go to the beginning\n",[1173,4635,4636,4639,4641,4644,4647,4649,4651,4653,4656,4659,4662,4665,4667,4670,4673,4675,4677,4680,4682],{"class":1175,"line":1256},[1173,4637,4638],{"class":1200},"        for",[1173,4640,2011],{"class":1183},[1173,4642,4643],{"class":1979},"let",[1173,4645,4646],{"class":1232}," i",[1173,4648,4572],{"class":1179},[1173,4650,4569],{"class":1232},[1173,4652,1144],{"class":1179},[1173,4654,4655],{"class":1232},"length",[1173,4657,4658],{"class":1179}," -",[1173,4660,4661],{"class":3273}," 1",[1173,4663,4664],{"class":1179},";",[1173,4666,4646],{"class":1232},[1173,4668,4669],{"class":1179}," >=",[1173,4671,4672],{"class":3273}," 0",[1173,4674,4664],{"class":1179},[1173,4676,4646],{"class":1232},[1173,4678,4679],{"class":1179},"--",[1173,4681,4626],{"class":1183},[1173,4683,1344],{"class":1179},[1173,4685,4686],{"class":1175,"line":1261},[1173,4687,4688],{"class":1193},"          // if it starts with 'entry', remove it from the list\n",[1173,4690,4691,4694,4696,4698,4700,4703,4705,4707,4710,4712,4714,4717,4719,4722,4724,4726,4729,4731,4733,4735,4737],{"class":1175,"line":1271},[1173,4692,4693],{"class":1200},"          if",[1173,4695,2011],{"class":1183},[1173,4697,1315],{"class":1232},[1173,4699,3410],{"class":1183},[1173,4701,4702],{"class":1232},"i",[1173,4704,3193],{"class":1183},[1173,4706,1144],{"class":1179},[1173,4708,4709],{"class":1276},"startsWith",[1173,4711,1233],{"class":1183},[1173,4713,1236],{"class":1179},[1173,4715,4716],{"class":1207},"entry",[1173,4718,1236],{"class":1179},[1173,4720,4721],{"class":1183},")) ",[1173,4723,1315],{"class":1232},[1173,4725,1144],{"class":1179},[1173,4727,4728],{"class":1276},"splice",[1173,4730,1233],{"class":1183},[1173,4732,4702],{"class":1232},[1173,4734,1542],{"class":1179},[1173,4736,4661],{"class":3273},[1173,4738,1243],{"class":1183},[1173,4740,4741],{"class":1175,"line":1293},[1173,4742,2387],{"class":1179},[1173,4744,4745],{"class":1175,"line":2831},[1173,4746,2392],{"class":1179},[1173,4748,4749],{"class":1175,"line":2857},[1173,4750,4751],{"class":1179},"    },\n",[1173,4753,4755],{"class":1175,"line":4754},14,[1173,4756,4757],{"class":1179},"  },\n",[1173,4759,4761,4763],{"class":1175,"line":4760},15,[1173,4762,1370],{"class":1179},[1173,4764,1243],{"class":1232},[1266,4766,4767],{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sRlkE, html code.shiki .sRlkE{--shiki-light:#E53935;--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--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 .s8R28, html code.shiki .s8R28{--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 .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--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 .spFsF, html code.shiki .spFsF{--shiki-light:#8796B0;--shiki-default:#8796B0;--shiki-dark:#B2CCD6}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sbKd-, html code.shiki .sbKd-{--shiki-light:#FF5370;--shiki-default:#FF5370;--shiki-dark:#FF9CAC}html pre.shiki code .sYRBq, html code.shiki .sYRBq{--shiki-light:#F76D47;--shiki-default:#F76D47;--shiki-dark:#F78C6C}html pre.shiki code .s1nJG, html code.shiki .s1nJG{--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":1169,"searchDepth":1190,"depth":1190,"links":4769},[4770,4776,4780,4783,4791,4792,4793,4796],{"id":1131,"depth":1190,"text":1132,"children":4771},[4772,4773,4774,4775],{"id":1148,"depth":1197,"text":1149},{"id":1308,"depth":1197,"text":1309},{"id":1380,"depth":1197,"text":1381},{"id":1562,"depth":1197,"text":1563},{"id":1750,"depth":1190,"text":1751,"children":4777},[4778,4779],{"id":1862,"depth":1197,"text":1863},{"id":1940,"depth":1197,"text":1941},{"id":2070,"depth":1190,"text":2071,"children":4781},[4782],{"id":2506,"depth":1197,"text":2507},{"id":2600,"depth":1190,"text":2601,"children":4784},[4785,4786,4788,4789,4790],{"id":2621,"depth":1197,"text":2622},{"id":3472,"depth":1197,"text":4787},"Dynamic Styles With v-bind",{"id":3632,"depth":1197,"text":3633},{"id":3734,"depth":1197,"text":3735},{"id":3849,"depth":1197,"text":3850},{"id":4025,"depth":1190,"text":4026},{"id":4198,"depth":1190,"text":4199},{"id":4326,"depth":1190,"text":4327,"children":4794},[4795],{"id":4412,"depth":1197,"text":4413},{"id":4438,"depth":1190,"text":796,"children":4797},[4798,4799,4800],{"id":4441,"depth":1197,"text":59},{"id":4457,"depth":1197,"text":4458},{"id":4479,"depth":1197,"text":4480},"Learn how to style your Nuxt application.","md",{},{"icon":47},{"title":44,"description":4801},"qqwYP-Gx4lhPOqlZ8DQgh3y37M-uZb9eDvVjOgJ4GQw",[4808,4810],{"title":39,"path":40,"stem":41,"description":4809,"icon":42,"children":-1},"Nuxt offers two options for your assets.",{"title":49,"path":50,"stem":51,"description":4811,"icon":52,"children":-1},"Nuxt file-system routing creates a route for every file in the pages/ directory.",1748853343821]