\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3048,3049],{"name":3027,"color":3028},{"name":3050,"color":3051},"pages","00DFB5",26034,"closed","scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.59752816,{"description":3059,"labels":3060,"number":3068,"owner":3030,"repository":3030,"state":3053,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.0\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: devtools, compatibilityDate, app\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nCreate new project \nSetup pages\nSet NuxtPage transitions to : \n`\u003Cnuxt-page\n :transition=\"{\n name: 'page-fade',\n mode: 'out-in',\n }\"\n />\n`\nMake pages taller than screen height\nChange page using nuxt link\n\n### Describe the bug\n\n[Reproduction / Stackblitz](https://stackblitz.com/edit/nuxt-starter-h8che3l8?file=pages%2Findex.vue,pages%2Fd.vue,pages%2Fc.vue,pages%2Fb.vue,pages%2Fa.vue,app.vue,nuxt.config.ts)\n\nPage scroll to top before page transition is triggered making the page jump before shifting.\n\nThis issue only occurs when using the NuxtPage transition props alone without setting \n`app:{pageTransition: true,}` in nuxt config\n\nhttps://github.com/user-attachments/assets/6ba83d07-f5e2-48c2-b0cf-fcc458ed567e\n\n### Additional context\n\n\n### **Nuxt Config (`nuxt.config.ts`)**\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n devtools: { enabled: false },\n compatibilityDate: '2025-04-02',\n app: {\n // pageTransition: true,\n },\n});\n```\n\n\n\n### **App (`app.vue`)**\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003CNuxtPage\n :transition=\"{\n name: 'page-fade',\n mode: 'out-in',\n }\"\n />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\n/* FADE */\n.page-fade-enter-active,\n.page-fade-leave-active {\n transition: opacity 0.45s ease-in-out;\n}\n\n.page-fade-enter-from,\n.page-fade-leave-to {\n opacity: 0;\n}\n\u003C/style>\n```",[3061,3062,3065],{"name":3027,"color":3028},{"name":3063,"color":3064},"🔨 p3-minor","FBCA04",{"name":3066,"color":3067},"possible regression","B90A42",31650,"Page scroll to top before transition has started using NuxtPage transition","2025-07-14T14:18:55Z","https://github.com/nuxt/nuxt/issues/31650",0.6266613,{"description":3074,"labels":3075,"number":3080,"owner":3030,"repository":3030,"state":3053,"title":3081,"updated_at":3082,"url":3083,"score":3084},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.13.1`\r\n- Nuxt Version: `3.0.0-rc.13`\r\n- Nitro Version: `0.6.1`\r\n- Package Manager: `yarn@1.22.15`\r\n- Builder: `vite`\r\n- User Config: `alias`, `app`, `build`, `modules`, `progress`, `plausible`, `runtimeConfig`, `vite`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.1.3`, `nuxt-progress@0.1.6`, `vue-plausible@1.3.2`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ruxdek?file=pages/index.vue\n\n### Describe the bug\n\nReproduction:\r\n* Have two pages, each with more than 100vh width.\r\n* Scroll down on page 1\r\n* Navigate to page 2\r\n\r\nExpected behavior:\r\n* Page 2 should scroll to top\r\n\r\nActual behavior:\r\n* Page 2 stays at the scroll position of page 1\r\n\r\nThe reason is that `router.options.ts` falsely thinks that an `undefined` page transition is `true`, meaning it HAS a transition.\r\nhttps://github.com/nuxt/framework/blob/bde96947333501c22a5e981515bd27c24eb8b88f/packages/nuxt/src/pages/runtime/router.options.ts#L34\r\n\r\nWhereas `page.mjs` correctly interprets an `undefined` transition as `false`.\r\nhttps://github.com/nuxt/framework/blob/bde96947333501c22a5e981515bd27c24eb8b88f/packages/nuxt/src/pages/runtime/page.ts#L46\r\n\r\nI will submit a PR to fix this issue.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3076,3079],{"name":3077,"color":3078},"3.x","29bc7f",{"name":3027,"color":3028},15364,"Default scroll behavior without page transition is broken in rc.13","2023-01-19T17:49:02Z","https://github.com/nuxt/nuxt/issues/15364",0.6345724,{"description":3086,"labels":3087,"number":3092,"owner":3030,"repository":3030,"state":3053,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.1\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: app, compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\nAffects every single version of Nuxt 3 – this has never worked. In Nuxt 2 it was perfect. \n\n### Reproduction\n\nhttps://github.com/simonhrogers/transition-no-worky\n\n### Describe the bug\n\nLayout transitions are not retaining correct scroll position. Page transitions do. \n\nNavigate from the about page to the home page here, the home page is already partially scrolled:\n\nhttps://layout-transition-no-worky-nuxt3.netlify.app/about\n\nI can provide further demonstration if needed. Written explanation below, as well as written explanation of the behaviour I would expect, which occurs correctly without layout transitions. \n\nI open my website. I scroll down 200px. I click a NuxtLink. The browser navigates to the new page. The new page is already scrolled 200px from the top. I scroll up 52px. I click on Chrome’s back button. It takes me back to the index page, which is scrolled down 148px.\n\nThis is not the default behaviour of the website, which operates correctly without layout transitions. But it is happening between layout transitions.\n\nHow can I make the default behaviour occur? The desired behaviour is as follows:\n\nI open my website. I scroll down 200px. I click a NuxtLink. The browser navigates to the new page. The new page is at the top – scroll distance: 0px. I scroll down 250px. I click on Chrome’s back button. It takes me back to the index page, which is scrolled down 200px, exactly where I left it.\n\nThank you!\n\n### Additional context\n\nI’m wondering if the issue might stem from [`nuxt/src/pages/runtime/router.options.ts`](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/router.options.ts), which checks for `route.meta.pageTransition`, but not `route.meta.layoutTransition` inside the `hasTransition` function? This appears to be the deciding factor in whether the page is scrolled to top or not, so would make total sense at first glance. But I’m just getting to grips with the codebase, and I fear it can’t be this easy? \n\nIf that’s not the solution, more below:\n\nDirectly below, `hookToWait` appears to await the resolution of both `page:transition:finish` and `page:finish`, but Nuxt lacks a corresponding `layout:transition:finish` hook to call. As far as I can see, `page:transition:finish` is not called in relation to layout transitions.\n\nIn [`nuxt/src/pages/runtime/page.ts`](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/page.ts), we see a repetition of `hasTransition` which again, only checks for page transitions. If a page transition is present, `page:transition:finish` is called `onAfterLeave`:\n\n```js\nconst hasTransition = !!(props.transition ?? routeProps.route.meta.pageTransition ?? defaultPageTransition)\nconst transitionProps = hasTransition && _mergeTransitionProps([\n props.transition,\n routeProps.route.meta.pageTransition,\n defaultPageTransition,\n { onAfterLeave: () => { nuxtApp.callHook('page:transition:finish', routeProps.Component) } },\n].filter(Boolean))\n```\n\nAnd finally, [`nuxt/src/app/components/nuxt-layout.ts`](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-layout.ts) appears to be the only location where `route.meta.layoutTransition` is mentioned, providing the layout prop `hasTransition`.\n\n### Logs\n\n_No response_",[3088,3091],{"name":3089,"color":3090},"bug","d73a4a",{"name":3063,"color":3064},28988,"Layout Transitions break scroll position on route change and browser forward/back","2025-04-02T08:44:50Z","https://github.com/nuxt/nuxt/issues/28988",0.63947874,{"description":3098,"labels":3099,"number":3101,"owner":3030,"repository":3030,"state":3053,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.3.1`\r\n- Nitro Version: `2.3.1`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `app`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-5cma1i?file=pages%2Findex.vue\n\n### Describe the bug\n\nWhen nesting pages with multiple `NuxtPage` elements, page transitions are applied to every `NuxtPage`. The expected behavior is to apply the transition only to the top-level `nuxtPage`.\r\n\r\nYou can see this in the reproduction, as the blue background on the `[folder].vue` page is clearly visible as it slides in before the contents of the `page.vue` page. The artificial delay applied in `page.vue` is only there so you can see the effect of the issue.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3100],{"name":3063,"color":3064},19814,"Page transitions are applied multiple times","2025-05-28T23:13:41Z","https://github.com/nuxt/nuxt/issues/19814",0.65502626,{"description":3107,"labels":3108,"number":3111,"owner":3030,"repository":3030,"state":3053,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.0.0-rc.14`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `modules`, `postcss`, `image`, `css`, `vite`\r\n- Runtime Modules: `@nuxt/image-edge@1.0.0-27809804.194d2d6`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nJust use the javascript hooks of transitions, but here is my use case.\r\n\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage :transition=\"transition\" />\r\n \u003C/NuxtLayout>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { gsap } from \"gsap\";\r\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\r\n\r\nconst layoutFooterEl = ref(null);\r\n\r\nconst transition = {\r\n mode: 'out-in',\r\n css: false,\r\n onLeave: (el, done) => {\r\n console.log('leave');\r\n\r\n gsap.to([el, layoutFooterEl.value], {\r\n opacity: 0,\r\n ease: 'none',\r\n duration: 0.3,\r\n onComplete: () => {\r\n console.log('leave complete');\r\n done();\r\n },\r\n });\r\n },\r\n onAfterLeave: () => {\r\n console.log('after leave');\r\n },\r\n onBeforeEnter: (el) => {\r\n console.log('before enter');\r\n\r\n gsap.set([el, layoutFooterEl.value], { opacity: 0, lazy: false });\r\n },\r\n onEnter: (el, done) => {\r\n console.log('enter');\r\n gsap.set([el, layoutFooterEl.value], { opacity: 0 });\r\n viewport.onResize();\r\n ScrollTrigger.refresh();\r\n\r\n lenis.value.scrollTo(0, { immediate: true });\r\n\r\n gsap.to([el, layoutFooterEl.value], {\r\n lazy: false,\r\n opacity: 1,\r\n ease: 'none',\r\n duration: 0.7,\r\n onComplete: done,\r\n });\r\n },\r\n};\r\n\r\n\u003C/script>\r\n```\r\n\r\n### Describe the bug\r\n\r\nOn page transitions, the `onMounted()` hook is called before the page enter. Here is the lifecycle I have on the page transition:\r\n\r\n```\r\napp.vue:29 leave\r\npage-2.vue:51 mounted\r\napp.vue:34 leave complete\r\napp.vue:44 before enter\r\napp.vue:41 after leave\r\napp.vue:48 enter\r\n```\r\n\r\nUPDATE: Also, the `onUnmounted` hook is called before the page finished the transition\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3109,3110],{"name":3077,"color":3078},{"name":3027,"color":3028},15793,"Page transitions bad lifecycle ?","2023-06-06T15:57:02Z","https://github.com/nuxt/nuxt/issues/15793",0.66092706,{"description":3117,"labels":3118,"number":3121,"owner":3030,"repository":3030,"state":3053,"title":3122,"updated_at":3123,"url":3124,"score":3125},"### 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_",[3119,3120],{"name":3077,"color":3078},{"name":3027,"color":3028},25695,"Page renders before layout change is done","2024-03-18T07:03:19Z","https://github.com/nuxt/nuxt/issues/25695",0.66190594,{"description":3127,"labels":3128,"number":3135,"owner":3030,"repository":3030,"state":3053,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v24.0.2`\n- Nuxt Version: `3.17.7`\n- CLI Version: `3.26.1`\n- Nitro Version: `2.11.13`\n- Package Manager: `pnpm@10.13.1`\n- Builder: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-bj4qfgh3?file=nuxt.config.ts,pages%2Ftest.vue,pages%2Findex.vue,app.vue,layouts%2Fdefault.vue\n\nClick on the links at the bottom of the page\n\n### Describe the bug\n\nIn Nuxt 3.17.6, this configuration only worked for hash links: https://nuxt.com/docs/guide/recipes/custom-routing#scroll-behavior-for-hash-links\n\nIn Nuxt 3.17.7:\nNow, when navigating between pages, scrolling to the top occurs with animation.\n\nThis is likely due to these changes: https://github.com/nuxt/nuxt/pull/32376\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3129,3132,3133,3134],{"name":3130,"color":3131},"good first issue","fbca04",{"name":3050,"color":3051},{"name":3063,"color":3064},{"name":3066,"color":3067},32620,"v3.17.7 Router: scrollBehaviorType: 'smooth' always scroll to top smoothly","2025-07-15T15:19:44Z","https://github.com/nuxt/nuxt/issues/32620",0.67137957,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fy-F9cHZ5xhNA4sN50pOYhzwYmtHleOgaDxuMDXfFZ7c":-1},"/nuxt/nuxt/32193"]