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