\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```",[2865,2868,2871],{"name":2866,"color":2867},"pending triage","E99695",{"name":2869,"color":2870},"🔨 p3-minor","FBCA04",{"name":2872,"color":2873},"possible regression","B90A42",31650,"nuxt","open","Page scroll to top before transition has started using NuxtPage transition","2025-05-30T14:38:46Z","https://github.com/nuxt/nuxt/issues/31650",0.6266613,{"description":2882,"labels":2883,"number":2885,"owner":2875,"repository":2875,"state":2876,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### 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_",[2884],{"name":2866,"color":2867},28220,"Page Transition Bug","2024-10-17T18:04:01Z","https://github.com/nuxt/nuxt/issues/28220",0.65250576,{"description":2891,"labels":2892,"number":2894,"owner":2875,"repository":2875,"state":2876,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.9.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.5.0`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `compatibilityDate`, `css`, `app`, `modules`, `runtimeConfig`, `vite`, `vueQuery`, `ui`, `icon`, `elementPlus`\n- Runtime Modules: `@nuxt/eslint@1.2.0`, `@nuxt/icon@1.11.0`, `@nuxt/scripts@0.11.2`, `@nuxt/test-utils@3.17.2`, `@nuxt/ui@3.0.2`, `@element-plus/nuxt@1.1.1`, `@hebilicious/vue-query-nuxt@0.3.0`, `@vueuse/nuxt@13.0.0`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/purple-worker-q927r2?workspaceId=ws_Nd6bGHokakFXXgZBfRPLsD\n\n### Describe the bug\n\n**Steps to Reproduce:**\n\n1. Open the reproduction link.\n2. Click on 'page 2' at the top to navigate to the page2 page.\n3. The loading animation will not disappear.\n\nThe code logic of the page2 page is to call the `fetchData` function when the page is opened, while setting `loading` to true and then setting it to false within a short period.\n\nThis bug is triggered when a Nuxt page uses a transition with the mode set to `out-in`. Specifically, when the component's props change rapidly, the code related to DOM operations does not correctly handle the state of the props, resulting in abnormal component display.\n\nWorkaround:\n\n1. Set the mode to a value other than `out-in`.\n2. Wrap the component using `v-loading` with a `\u003CClientOnly>` component.\n3. Call `fetchData` within the `onMounted` callback.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```\n\nEdit: pick right words",[2893],{"name":2866,"color":2867},31613,"page transtion with fast props change","2025-04-02T03:30:33Z","https://github.com/nuxt/nuxt/issues/31613",0.6787567,{"description":2900,"labels":2901,"number":2906,"owner":2875,"repository":2875,"state":2907,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.1`\r\n- Nuxt Version: `3.10.3`\r\n- CLI Version: `3.10.1`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `npm@10.2.4`\r\n- Builder: `-`\r\n- User Config: `nitro`, `modules`, `svgo`, `image`, `googleFonts`, `alias`, `app`, `typescript`, `devtools`, `devServer`\r\n- Runtime Modules: `@pinia/nuxt@0.5.1`, `@nuxt/content@2.12.0`, `@nuxtjs/tailwindcss@6.11.4`, `@nuxtjs/google-fonts@3.1.3`, `nuxt-svgo@4.0.0`, `@vueuse/nuxt@10.9.0`, `@nuxt/image@1.3.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-eedaaw\r\n\r\n### Describe the bug\r\n\r\nWhen transitioning between pages the scroll position is reset which is expected. However when passing the transition via the prop to \u003CNuxtPage> this reset takes places before the page is actually changed. Also the visibility 'glitches' in before changing the page.\r\n\r\nAlthough I am quite inexperienced I believe this could be related to https://github.com/nuxt/nuxt/issues/2593\r\n\r\nA workaround for me was to pass the transition in the nuxt config instead. To be able to use js hooks I declared them in the prop without specifying a transition name or type:\r\n```\r\n\u003CNuxtPage :transition=\"{onAfterEnter: () => {console.log('onAfterEnter')},}\"/>\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_",[2902,2903],{"name":2866,"color":2867},{"name":2904,"color":2905},"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":2913,"labels":2914,"number":2919,"owner":2875,"repository":2875,"state":2907,"title":2920,"updated_at":2921,"url":2922,"score":2923},"### 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_",[2915,2918],{"name":2916,"color":2917},"3.x","29bc7f",{"name":2866,"color":2867},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":2925,"labels":2926,"number":2931,"owner":2875,"repository":2875,"state":2907,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### 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_",[2927,2930],{"name":2928,"color":2929},"bug","d73a4a",{"name":2869,"color":2870},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":2937,"labels":2938,"number":2940,"owner":2875,"repository":2875,"state":2907,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### 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_",[2939],{"name":2869,"color":2870},19814,"Page transitions are applied multiple times","2025-05-28T23:13:41Z","https://github.com/nuxt/nuxt/issues/19814",0.65502626,{"description":2946,"labels":2947,"number":2950,"owner":2875,"repository":2875,"state":2907,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### 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_",[2948,2949],{"name":2916,"color":2917},{"name":2866,"color":2867},15793,"Page transitions bad lifecycle ?","2023-06-06T15:57:02Z","https://github.com/nuxt/nuxt/issues/15793",0.66092706,{"description":2956,"labels":2957,"number":2960,"owner":2875,"repository":2875,"state":2907,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### 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_",[2958,2959],{"name":2916,"color":2917},{"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.66190594,{"description":2966,"labels":2967,"number":2970,"owner":2875,"repository":2875,"state":2907,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-zo83ve?file=app.vue\n\n### Describe the bug\n\nWhen custom page transitions are defined with the 'out-in' mode, it causes a disruption in custom layouts. The \u003Cslot> is consistently rendered at the end of the page after the initial navigation. An example illustrating this issue can be found on [Stackblitz](https://stackblitz.com/edit/nuxt-starter-zo83ve?file=app.vue). The provided example uses the default layout and is expected to display components in the following order:\r\n\r\n1️⃣ Navigation\r\n2️⃣ [slot]\r\n3️⃣ Footer\r\n\r\nHowever, after navigating to the /second page, the layout breaks, resulting in the following rendering:\r\n\r\n1️⃣ Navigation\r\n3️⃣ Footer\r\n2️⃣ [slot]\r\n\r\nThe page transition is defined inside the nuxt.config.ts.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2968,2969],{"name":2916,"color":2917},{"name":2866,"color":2867},25065,"Page transitions in 'out-in' mode disrupt layout order","2024-01-05T10:08:42Z","https://github.com/nuxt/nuxt/issues/25065",0.6716936,["Reactive",2976],{},["Set"],["ShallowReactive",2979],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fy-F9cHZ5xhNA4sN50pOYhzwYmtHleOgaDxuMDXfFZ7c":-1},"/nuxt/nuxt/32193"]