\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```\n\nWhen you switch between pages and you have already scrolled a bit to the bottom you will see the jump between the pages.\n\nThanks to @awfulcode there is already a minimal reproduction for the issue: https://codesandbox.io/p/devbox/festive-cohen-jg4w3d\n\n\n### Describe the bug\n\nAs already mentioned by @awfulcode and others in the Issue https://github.com/nuxt/nuxt/issues/32053 there is a weird bug when using page transitions according to the documentation. There is a problem that the scroll to function is being executed before the page transition finished, results in a jiggy looking page transition since you see the scroll position applied before transition is completed.\n\nI'm currently using a workaround to get around this, but this is not perfect since there is a defined timeout. It would be better if this is properly aligned to the end of the page transition.\n\nI use a app/router.options.ts file to modify the basic scroll behaviour:\n```\nimport type { RouterConfig } from \"@nuxt/schema\";\n\nexport default \u003CRouterConfig>{\n scrollBehavior(to, from, savedPosition) {\n if(savedPosition)\n {\n if(to.path == from.path)\n return savedPosition\n else\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve(savedPosition)\n }, 450)\n })\n }\n else{\n if (to.hash && to.path == from.path) {\n return { el: to.hash }\n }\n else if(to.hash && to.path != from.path) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ el: to.hash })\n }, 450)\n })\n }\n else{\n if(to)\n {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ top:0, left:0 })\n }, 450)\n })\n }\n else\n {\n return { top: 0, left: 0 }\n }\n }\n }\n }\n};\n``` \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2890],{"name":2866,"color":2867},32193,"Scroll behaviour timing is not properly aligned to page transition duration","2025-05-23T14:34:55Z","https://github.com/nuxt/nuxt/issues/32193",0.66379714,{"description":2897,"labels":2898,"number":2900,"owner":2869,"repository":2869,"state":2870,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@8.10.5\r\n- Builder: -\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-transition-out-in-bug\r\n\r\n### Describe the bug\r\n\r\nWhen navigating from the Home page to the Test page, the onMounted hook on the Test page is triggered twice. This behavior occurs only when the pageTransition mode is set to out-in in the Nuxt configuration and the Test page contains await useAsyncData.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2899],{"name":2866,"color":2867},27442,"onMounted hook called twice during pageTransition with out-in mode","2024-11-14T14:50:13Z","https://github.com/nuxt/nuxt/issues/27442",0.66623604,{"description":2906,"labels":2907,"number":2909,"owner":2869,"repository":2869,"state":2870,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[stackblitz](https://stackblitz.com/edit/nuxt-starter-ibatpo)\r\n\r\nIf you wil click on \"CLICK TO TEST\" from main page, the \"test page\" order is right, but\r\n\r\n1. go to unexisted route. (/dsdsdsd)\r\n2. click: \"CLICK TO TEST\" \r\n3.you will see order:\r\nHeader\r\nFooter\r\ntest page\r\n\r\n\r\n\n\n### Describe the bug\n\nWhen you add\r\n\r\n`\r\n app: {\r\n pageTransition: { name: 'page', mode: 'out-in' },\r\n },\r\n`\r\n\r\nand then you have a page with useAsyncData layout order breaks. \r\n\r\nExpected:\r\nHeader\r\nPage\r\nFooter\r\n\r\nbut after error page it becomes:\r\n\r\nHeader\r\nFooter\r\nPage\n\n### Additional context\n\nfor example, I didn't add transition styles because they don't matter. The bug appears with them too\n\n### Logs\n\n_No response_",[2908],{"name":2866,"color":2867},28220,"Page Transition Bug","2024-10-17T18:04:01Z","https://github.com/nuxt/nuxt/issues/28220",0.66730547,{"description":2915,"labels":2916,"number":2918,"owner":2869,"repository":2869,"state":2870,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @hypernym/nuxt-anime@2.1.1\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-swvkkt\r\n\r\n### Steps to Reproduce\r\n1. Navigate from the first to the second page.\r\n2. Return to the first page from the second page.\r\n3. Navigate from the first to the third page.\r\n\r\n### Describe the bug\r\n\r\nThere's an issue with `pageTransition` and `layoutTransition` not triggering correctly under certain circumstances. Specifically, when navigating between routes where one route defines a `layoutTransition` and another does not, the expected page transitions do not occur as intended and only partial hooks from `layoutTransition` triggers.\r\n\r\n### Scenario\r\n- **First Page**:\r\n - Defines `pageTransition` but no `layoutTransition` in middleware.\r\n - Layout: `default`\r\n- **Second Page**:\r\n - Defines both `pageTransition` and `layoutTransition` in middleware.\r\n - Layout: `another`\r\n- **Third Page**:\r\n - Similar to the first page with only `pageTransition` defined in middleware.\r\n - Layout: `default`\r\n\r\n### Observed Behavior\r\n- Navigating from the first to the second page only partially triggers `layoutTransition` hooks (`onBeforeLeave`, `onEnter`, `onAfterEnter`)\r\n - Misses all the `pageTransition` hooks as expected as layout changes.\r\n- Going back from the second to the first page results in no transitions, where `layoutTransition` should occur.\r\n- Moving from the first to the third page, which does not change the layout, unexpectedly triggers `layoutTransition` hooks and misses `pageTransition` hooks.\r\n\r\n### Expected Behavior\r\n- All defined transitions should trigger correctly according to their respective route changes.\r\n - `First page -> Second page`: Layout transition's hooks: `onBeforeEnter`, `onEnter`, and `onAfterEnter`, as those are defined in Second page's middleware.\r\n - `Second page -> First page`: Layout transition's hooks: `onBeforeLeave`, `onLeave`, and `onAfterLeave`, as those are defined in Second page's middleware and not defined in First page's middleware.\r\n - `First page -> Third page`: Page transition's hooks: `onBeforeLeave`, `onLeave`, `onAfterLeave`, `onBeforeEnter`, `onEnter`, and `onAfterEnter`, as those are defined in First page's and Third page's middlewares.\r\n- Transitions should not be missed or incorrectly triggered based on the presence or absence of `layoutTransition` in neighboring routes.\r\n\r\n\r\n### Additional context\r\n\r\nThis behavior suggests an issue in the transition handling mechanism when `layoutTransition` and `pageTransition` are mixed or when `layoutTransition` is undefined.\r\n\r\nAdding `layoutTransition` on all pages will resolve this issue and trigger transitions correctly (using `pageTransition` at the right time and triggering complete `layoutTransition` when the layout changes.\r\n\r\n### Logs\r\n\r\n```shell-script\r\ntest:router:info \r\n ------\r\n Navigation: from: \"/\" to: \"/second\"\r\n ------\r\n \r\nuseTransitions.ts:125 test:useTransitions:second:info onBeforeLeave \u003Cdiv data-v-8940e9df class=\"layout\">…\u003C/div> \r\nuseTransitions.ts:144 test:useTransitions:second:info onEnter {targets: div.layout, opacity: Array(2), duration: 1000, easing: 'linear', delay: 0, …}\r\nuseTransitions.ts:150 test:useTransitions:second:info onAfterEnter \u003Cdiv data-v-8940e9df class=\"layout\" style>…\u003C/div>\r\n\r\napp.vue:28 test:router:info \r\n ------\r\n Navigation: from: \"/second\" to: \"/\"\r\n ------\r\n\r\napp.vue:28 test:router:info \r\n ------\r\n Navigation: from: \"/\" to: \"/third\"\r\n ------\r\n \r\nuseTransitions.ts:125 test:useTransitions:third:info onBeforeLeave \u003Cdiv data-v-433a9abd class=\"layout\" style=\"opacity: 0.0666;\">…\u003C/div> \r\nuseTransitions.ts:144 test:useTransitions:third:info onEnter {targets: div.layout, opacity: Array(2), duration: 1000, easing: 'linear', delay: 0, …}\r\nuseTransitions.ts:150 test:useTransitions:third:info onAfterEnter \u003Cdiv data-v-433a9abd class=\"layout\" style=\"opacity: 0.9832;\">…\u003C/div>\r\n```\r\n",[2917],{"name":2866,"color":2867},25471,"Inconsistent pageTransition behavior with mixed layoutTransition","2024-06-30T11:06:02Z","https://github.com/nuxt/nuxt/issues/25471",0.6680986,{"description":2924,"labels":2925,"number":2930,"owner":2869,"repository":2869,"state":2931,"title":2932,"updated_at":2933,"url":2934,"score":2935},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: 2.15.8\r\n- node: v14.19.0\r\n\r\n### Reproduction\r\n\r\n\u003C!--\r\nLink to a minimal test case based on one of:\r\n- A fork of https://template.nuxtjs.org\r\n- A GitHub repository that can reproduce the bug\r\nWithout a reproduction, it is so hard to address problem :(\r\n-->\r\n\r\nhttps://codesandbox.io/p/github/Kolobok12309/nuxt-page-layout-mount-twice/draft/stoic-beaver - playground\r\nhttps://github.com/Kolobok12309/nuxt-page-layout-mount-twice - repo\r\n\r\n### Steps to reproduce\r\n\r\n1. Config nuxt\r\n```js\r\n// nuxt.config.js\r\nexport default {\r\n features: {\r\n transitions: false,\r\n },\r\n\r\n build: {\r\n splitChunks: {\r\n layouts: true,\r\n },\r\n },\r\n}\r\n```\r\n\r\n2. Create 2 layouts and 2 pages\r\n3. Add `console.log('mounted', this.$nuxt.layoutName)` to `mounted` hook of each page\r\n4. Go from one page to another\r\n\r\n\r\n### What is Expected?\r\n\r\n```\r\n// from page-1 to page-2\r\nmounted layout-2\r\n// page-2 to page-1\r\nmounted layout-1\r\n```\r\n\r\n\r\n### What is actually happening?\r\n\r\n```\r\n// from page-1 to page-2\r\nmounted layout-1\r\nmounted layout-2\r\n// page-2 to page-1\r\nmounted layout-2\r\nmounted layout-1\r\n```\r\n\r\n### Additional info\r\n\r\nIf i set `features.transitions: true`, all to be fine, but we can't use it(some problems with meta)",[2926,2927],{"name":2866,"color":2867},{"name":2928,"color":2929},"2.x","d4c5f9",10873,"closed","Page mounted twice","2024-06-14T12:08:58Z","https://github.com/nuxt/nuxt/issues/10873",0.6481398,{"description":2937,"labels":2938,"number":2949,"owner":2869,"repository":2869,"state":2931,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.7.1`\r\n- CLI Version: `3.8.3`\r\n- Nitro Version: `2.6.3`\r\n- Package Manager: `pnpm@8.7.5`\r\n- Builder: `-`\r\n- User Config: `extends`, `app`, `spaLoadingTemplate`, `runtimeConfig`, `modules`, `vueuse`, `i18n`, `ssr`, `vue`, `nitro`, `vite`, `build`, `typescript`, `devtools`\r\n- Runtime Modules: `@pinia/nuxt@0.4.11`, `@nuxtjs/i18n@8.0.0-beta.10`, `@vueuse/nuxt@10.4.1`, `@unocss/nuxt@0.55.7`, `@nuxtjs/fontaine@0.4.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nusing nuxt config\r\n```\r\napp: { pageTransition: { name: 'fade', mode: 'out-in' }, }\r\n```\n\n### Describe the bug\n\nWhen page transition is enabled on nuxt 3.7.1 it leaves the previous page and adds new page at the bottom and initial it renders two page top one is the actual page but buttom one stucks at loading \r\n\r\n[Here you can try the deployment with pageTransition](http://app-v2-bmih98l5k-hubble-excahnge.vercel.app)\r\n\r\n[Here you can try the deployment with pageTransition false](http://app-v2-a81c5iagp-hubble-excahnge.vercel.app)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2939,2942,2943,2946],{"name":2940,"color":2941},"3.x","29bc7f",{"name":2866,"color":2867},{"name":2944,"color":2945},"needs reproduction","FBCA04",{"name":2947,"color":2948},"closed-by-bot","ededed",23141,"3.7.1 pageTransition breaks","2023-09-20T01:47:41Z","https://github.com/nuxt/nuxt/issues/23141",0.6485493,{"description":2955,"labels":2956,"number":2959,"owner":2869,"repository":2869,"state":2931,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.4.1\r\n- Nitro Version: 2.3.3\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: app, imports, ssr, plugins\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-fxstfh?file=nuxt.config.ts\r\n\r\n### Describe the bug\r\n\r\nHaving `pageTransition` enabled, the component does not render when navigating between pages. On initial render it works (after refresh) but when navigating to the other pages it stops rendering.\r\n\r\nIn the repro, removing the `pageTransition` option from `nuxt.config.ts`, it works again.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2957,2958],{"name":2940,"color":2941},{"name":2866,"color":2867},20318,"pageTransition breaks component rendering","2023-04-17T11:27:16Z","https://github.com/nuxt/nuxt/issues/20318",0.64987135,{"description":2965,"labels":2966,"number":2969,"owner":2869,"repository":2869,"state":2931,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Environment\r\n```\r\n- Operating System: Darwin\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: bun@1.0.22\r\n- Builder: -\r\n- User Config: devtools, typescript, modules, ssr, app, build, postcss, vite, nitro, supabase, primevue, headlessui, piniaPersistedstate, security, routeRules, runtimeConfig\r\n- Runtime Modules: @nuxtjs/supabase@1.1.6, @nuxtjs/tailwindcss@6.11.3, nuxt-icon@0.6.8, nuxt-typed-router@3.5.1, nuxt-security@1.1.0, @vueuse/nuxt@10.7.2, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0\r\n- Build Modules: -\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-41grgd?file=nuxt.config.ts,app.vue,layouts%2Fdefault.vue\r\n\r\n### Describe the bug\r\n\r\n1. go to the second page (works fine)\r\n2. go to the 1st page again \r\n3. notice how the page content loads before the layout has loaded\r\n\r\nI added a transition and you can see how the transition runs **after** the other page loaded. Even thought, that other page should never appear together at the same time with other Layout\r\n\r\nin the repro I added an `await timeout` to introduce the bug. In my actual case, there is no timeout and i'm not 100% sure why it's happening yet. But clearly, I expect Nuxt to load the layout first and then its slot content (the page)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2967,2968],{"name":2940,"color":2941},{"name":2866,"color":2867},25695,"Page renders before layout change is done","2024-03-18T07:03:19Z","https://github.com/nuxt/nuxt/issues/25695",0.65860814,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkmRRrY-Q-gajXnGUYGq5Fvix0tC4MX7niV_5Uk7n6uE":-1},"/nuxt/nuxt/23915"]