of the layout comes last on pages with the SSR disabled.\n\nI don't have the necessary skills to submit a PR ^^\"\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[1984,1987,1990,1993],{"name":1985,"color":1986},"3.x","29bc7f",{"name":1988,"color":1989},"bug","d73a4a",{"name":1991,"color":1992},"upstream","E8A36D",{"name":1994,"color":1995},"🔨 p3-minor","FBCA04",31113,"nuxt","open","Layout \u003Cslot /> displays last in SSR project upon navigation between not-SSR pages","2025-03-19T11:13:59Z","https://github.com/nuxt/nuxt/issues/31113",0.6600638,{"description":2004,"labels":2005,"number":2009,"owner":1997,"repository":1997,"state":1998,"title":2010,"updated_at":2011,"url":2012,"score":2013},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.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: npm@10.2.3\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/github-psf3p3\n\n### Describe the bug\n\nWhen navigating between two routes with different layouts, if a pageTransition is set in the Nuxt config and one of the page has a some async logic, the slot of the layout will not be rendered where it is supposed to be.\r\n\r\nIn my reproduction, the content of the page is rendering after the footer. It might take several back and forth between the homepage and the about page to get the bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2006],{"name":2007,"color":2008},"pending triage","E99695",25685,"Changing layout with a pageTransition and some async logic breaks the layout","2024-06-30T11:05:52Z","https://github.com/nuxt/nuxt/issues/25685",0.6610415,{"description":2015,"labels":2016,"number":2019,"owner":1997,"repository":1997,"state":1998,"title":2020,"updated_at":2021,"url":2022,"score":2023},"### 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_",[2017,2018],{"name":1988,"color":1989},{"name":1994,"color":1995},19814,"Page transitions are applied multiple times","2024-11-19T16:20:24Z","https://github.com/nuxt/nuxt/issues/19814",0.67289287,{"description":2025,"labels":2026,"number":2028,"owner":1997,"repository":1997,"state":1998,"title":2029,"updated_at":2030,"url":2031,"score":2032},"### 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",[2027],{"name":2007,"color":2008},31613,"page transtion with fast props change","2025-04-02T03:30:33Z","https://github.com/nuxt/nuxt/issues/31613",0.6760353,{"description":2034,"labels":2035,"number":2042,"owner":1997,"repository":1997,"state":1998,"title":2043,"updated_at":2044,"url":2045,"score":2046},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.8.0\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.0\r\n- Package Manager: npm@9.6.7\r\n- Builder: -\r\n- User Config: devtools, nitro\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-jcxvar?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nThe problem is when using layout named slots within pages to show different piece of data for each page. For example different menu, toolbar, header info or whatever. On each page/route change, whole layout gets re-executed. So if you have components or subcomponents with fetch calls, everything is refetched every time, event listeners are duplicated and memory usage goes up.\r\n\r\nIf NuxtLayout is added to app.vue instead pages, everything works fine. But in that case, I am unable to use named slots within pages.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2036,2039],{"name":2037,"color":2038},"enhancement","8DEF37",{"name":2040,"color":2041},"🍰 p2-nice-to-have","0E8A16",23929,"named layout slots directly within pages","2025-03-12T15:13:00Z","https://github.com/nuxt/nuxt/issues/23929",0.6805139,{"description":2048,"labels":2049,"number":2051,"owner":1997,"repository":1997,"state":1998,"title":2052,"updated_at":2053,"url":2054,"score":2055},"### 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_",[2050],{"name":2007,"color":2008},28220,"Page Transition Bug","2024-10-17T18:04:01Z","https://github.com/nuxt/nuxt/issues/28220",0.68598396,{"description":2057,"labels":2058,"number":2061,"owner":1997,"repository":1997,"state":2062,"title":2063,"updated_at":2064,"url":2065,"score":2066},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.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: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, ssr, app, css\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-njpvcp\n\n### Describe the bug\n\nThe following is a very common application layout(also shown in layouts/default.vue in the reproduction link):\r\n```\r\n\u003CHeader />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n\u003CFooter />\r\n```\r\nWhen we use 'out-in' mode in pageTransition in nuxt.config.ts:\r\n```\r\npageTransition: { name: 'page', mode: 'out-in' }\r\n```\r\nAnd we **CLICK ON THE LINK** . This is what's rendered in the DOM.\r\n```\r\n\u003CHeader />\r\n\u003CFooter />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n```\r\nAlso when we use the following layout:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n \u003Cp>More Content\u003C/p>\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nThis is the result in the DOM, after the link is clicked:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cp>More Content\u003C/p>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nNuxt v3 it seems that append the slot at the end of the parent element. Which seems a bug to me. Looks like there needs to be a handling in appending the slot in the correct order.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2059,2060],{"name":1985,"color":1986},{"name":2007,"color":2008},25739,"closed","Slot position gets shifted when using the out-in page transition","2024-02-11T09:36:25Z","https://github.com/nuxt/nuxt/issues/25739",0.6311473,{"description":2068,"labels":2069,"number":2072,"owner":1997,"repository":1997,"state":2062,"title":2073,"updated_at":2074,"url":2075,"score":2076},"### 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_",[2070,2071],{"name":1985,"color":1986},{"name":2007,"color":2008},25065,"Page transitions in 'out-in' mode disrupt layout order","2024-01-05T10:08:42Z","https://github.com/nuxt/nuxt/issues/25065",0.64164793,{"description":2078,"labels":2079,"number":2084,"owner":1997,"repository":1997,"state":2062,"title":2085,"updated_at":2086,"url":2087,"score":2088},"### 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_",[2080,2081],{"name":2007,"color":2008},{"name":2082,"color":2083},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.6564063,{"description":2090,"labels":2091,"number":2094,"owner":1997,"repository":1997,"state":2062,"title":2095,"updated_at":2096,"url":2097,"score":2098},"### 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_",[2092,2093],{"name":1988,"color":1989},{"name":1994,"color":1995},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.65784305,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"kfcKrXGhoIh3LR0NXcglPVK3AmzaIQg0S0L7D2lDPMI":-1},"/nuxt/nuxt/26836"]