\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```",[3046,3047,3050],{"name":3021,"color":3022},{"name":3048,"color":3049},"🔨 p3-minor","FBCA04",{"name":3051,"color":3052},"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.6683351,{"description":3059,"labels":3060,"number":3065,"owner":3024,"repository":3024,"state":3038,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### 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_",[3061,3064],{"name":3062,"color":3063},"bug","d73a4a",{"name":3048,"color":3049},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.67184514,{"description":3071,"labels":3072,"number":3077,"owner":3024,"repository":3024,"state":3038,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### 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_",[3073,3074],{"name":3021,"color":3022},{"name":3075,"color":3076},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.6832327,{"description":3083,"labels":3084,"number":3086,"owner":3024,"repository":3024,"state":3038,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: app, devtools, modules, css\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/logo-animation-bug-forked-f87j5v?workspaceId=ws_R5D8sPbE55qH8y2tgoniPg\n\n### Describe the bug\n\nWhen a page has a top-level await (e.g. for `useAsyncData` or `useAsyncQuery`), the scroll position jumps to the top immediately before the page transition starts. This occurs for both CSS-based transitions, as well as JS hook-based transition.\n\n### Additional context\n\nIn the CodeSandbox example provided, you can navigate between routes `/1` and `/2`, and use the link in the top right to access the corresponding routes within `/async` that have a dummy `await` to demonstrate the bug.\n\n### Logs\n\n```shell-script\n\n```",[3085],{"name":3021,"color":3022},32416,"Top-level await causes scroll reset before page transition starts","2025-06-17T13:47:40Z","https://github.com/nuxt/nuxt/issues/32416",0.68389654,{"labels":3092,"number":3095,"owner":3024,"repository":3024,"state":3038,"title":3096,"updated_at":3097,"url":3098,"score":3099},[3093,3094],{"name":3021,"color":3022},{"name":3035,"color":3036},5362,"Page flickers/jumps to top before navigating to new page","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5362",0.6859463,{"description":3101,"labels":3102,"number":3105,"owner":3024,"repository":3024,"state":3038,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Environment\r\n\r\n System:\r\n OS: macOS 13.2.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 69.81 MB / 32.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node\r\n Yarn: 1.22.19 - ~/www/showbizz/frontend/node_modules/.bin/yarn\r\n npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm\r\n Browsers:\r\n Chrome: 111.0.5563.64\r\n Chrome Canary: 113.0.5665.2\r\n Firefox: 110.0.1\r\n Safari: 16.3\r\n Safari Technology Preview: 16.4\r\n npmPackages:\r\n nuxt: ^2.15.8 => 2.16.3\r\n\r\n### Reproduction\r\n\r\nComing\r\n\r\n### Describe the bug\r\n\r\nA) When navigating between sibblings nested pages, Nuxt should not scrollToTop. This is currently the correct behavior. ✅ \r\n\r\n\r\nB) When I navigate between a regular page to a nested page, Nuxt should scrollToTop.\r\nCurrently incorrect, nuxt doesn't scrollToTop. 🛑 \r\n\r\n\r\nC) If I add `scrollToTop: true`, then it break behavior A because it will scrollToTop even when navigating between nested pages which are Tabs in my case. 🛑 \r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\nThis is probably related to `scrollBehavior`, because the `some` will now always return true even if I added `scrollToTop` to the parent page only and non of the children pages.\r\n```\r\nfunction shouldScrollToTop(route) {\r\n const Pages = getMatchedComponents(route);\r\n console.log(Pages);\r\n if (Pages.length === 1) {\r\n const { options = {} } = Pages[0];\r\n return options.scrollToTop !== false;\r\n }\r\n return Pages.some(({ options }) => options && options.scrollToTop);\r\n}\r\n```\r\n\r\n### Logs\r\n\r\n_No response_",[3103,3104],{"name":3021,"color":3022},{"name":3035,"color":3036},19848,"scrollBehavior does not scrollToTop between regular and nested page","2024-07-21T10:21:22Z","https://github.com/nuxt/nuxt/issues/19848",0.6872598,{"description":3111,"labels":3112,"number":3124,"owner":3024,"repository":3024,"state":3038,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.15.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.5.5\r\n- Builder: vite\r\n- User Config: app, components, devtools, modules, swiper, css, vite\r\n- Runtime Modules: @pinia/nuxt@0.4.11, nuxt-swiper@1.2.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nYou can check the effect here:\r\nhttps://stackblitz.com/edit/nuxt-starter-cgquz4?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI have a problem with scroll behavior in Nuxt.js 3. When I refresh the page (when static content is served), the scroll jumps abruptly to the top of the page. However, after serving the static content, there is an automatic scroll to the previous position (the position from which the refresh was triggered), which creates an unpleasant \"jumping\" effect on the website.\r\nIf I use SSR = False, the scroll doesnt \"jump\" and stay on the same position when the page is refreshed.\r\n\r\nI assume that Nuxt3 should prevent the scroll from returning to the top of the document when refreshing my page and keep the scroll at the same position.\r\n\r\nWhen I try to do the same in Nuxt2, the scroll behaviour is normal.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3113,3116,3119,3122,3123],{"name":3114,"color":3115},"good first issue","fbca04",{"name":3117,"color":3118},"3.x","29bc7f",{"name":3120,"color":3121},"workaround available","11376d",{"name":3062,"color":3063},{"name":3048,"color":3049},22487,"Scroll do weird jumping to the top of the web page on Nuxt3 page refresh","2024-01-29T13:56:25Z","https://github.com/nuxt/nuxt/issues/22487",0.68919766,{"description":3130,"labels":3131,"number":3133,"owner":3024,"repository":3024,"state":3038,"title":3134,"updated_at":3135,"url":3136,"score":3137},"Hi. Somebody notice a little annoying glitch in Firefox (I am using Ubuntu, not sure if it's related to OS) - when page transition is triggered, page footer jumps to top of the screen for 1ms (very quickly but unfortunately noticible). What can cause that behavior? In Chrome all just fine. \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c865\">#c865\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3132],{"name":3035,"color":3036},1002,"What cause a glitch when page transition in Firefox?","2023-01-18T15:40:38Z","https://github.com/nuxt/nuxt/issues/1002",0.6900305,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7aY1S9wSXLbKILVLTa-B1NgqdOFhIGmn4Re6zi_UnKg":-1},"/nuxt/nuxt/2593"]