` inside a `\u003CSuspense>`.\n\n```html\n\u003CSuspense>\n \u003CNuxtPage />\n\u003C/Suspense>\n```\n\nThe Suspense Quick Fix seems to work fine. We have it in production now for about half a year. But I can't say if it has any drawbacks or creates issues elsewhere. It's also difficult to make sure our devs know of this workaround and do not create new pages without it.\n\n### Additional context\n\nThe issue was once further explained as a comment to https://github.com/nuxt/nuxt/issues/27364. The bug is open for +1 Year now. \n\nI updated the reproduction to 3.17.5 and the bug persists.\nI suggest closing the other, less clearly described issue and keep tracking this one.\n\nIf it's not an easy fix, then I would suggest that after 1 year, at least a warning in the documentation should be placed that page/layout transitions should be used with caution.\n\nRelated:\nhttps://github.com/nuxt/scripts/issues/297\nhttps://github.com/nuxt/nuxt/issues/27442\nhttps://github.com/nuxt/nuxt/issues/27364\n",[3158],{"name":3159,"color":3160},"pending triage","E99695",32371,"nuxt","open","Using pageTransition/layoutTransition and useAsyncData() leads to faulty double-mounting","2025-06-12T11:44:20Z","https://github.com/nuxt/nuxt/issues/32371",0.63320446,{"description":3169,"labels":3170,"number":3172,"owner":3162,"repository":3162,"state":3163,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### 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_",[3171],{"name":3159,"color":3160},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.6332931,{"description":3178,"labels":3179,"number":3184,"owner":3162,"repository":3162,"state":3163,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Update\nThe problem was reported more than two months ago!! \n\n### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.1\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: npm@10.8.0\r\n- Builder: -\r\n- User Config: experimental, hooks, ssr, devtools, nitro, vite, css, pwa, spaLoadingTemplate, app, modules, eslint, i18n\r\n- Runtime Modules: @nuxtjs/i18n@8.3.1, @pinia/nuxt@0.5.1, @nuxt/eslint@0.3.10, @hypernym/nuxt-anime@2.1.1, @vite-pwa/nuxt@0.7.0\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-bv3yea?file=pages%2Findex.vue\n\n### Describe the bug\n\nIn my application `layoutTransition` and `pageTransition` through `nuxt.config.ts` I have:\r\n```js\r\n app: {\r\n layoutTransition: {\r\n name: 'layout',\r\n mode: 'out-in',\r\n appear: true,\r\n },\r\n\r\n pageTransition: {\r\n name: 'page-trans',\r\n mode: 'out-in',\r\n appear: true,\r\n },\r\n },\r\n```\r\n\r\nI have 2 layout they are :\r\n- default.vue \r\n- tow.vue\r\n\r\nAnd pages:\r\n- index.vue (set default layout)\r\n- about.vue (set tow layout)\r\n\r\nWhen I do await $fetch on the `about.vue` page, the `onMounted` is executed twice, whether on the page itself or in the components in it.. \r\n\r\nThis happens when moving from the `index` page to `about`. However, when you enter this page directly, the problem does not appear.\r\n\r\n```js\r\nrouter.push('/about') \r\n```\r\n--------- or --------\r\n```vue\r\n\u003CNuxtLink to=\"/about\">go to /about\u003C/NuxtLink>\r\n```\r\n\r\nYou can view the project here : \r\nhttps://stackblitz.com/edit/github-bv3yea?file=pages%2Findex.vue\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3180,3181],{"name":3159,"color":3160},{"name":3182,"color":3183},"suspense","C70109",27364,"await with layoutTransition and pageTransition mounted executed twice In a different layout - nuxt 3","2025-03-12T10:19:55Z","https://github.com/nuxt/nuxt/issues/27364",0.63974947,{"description":3190,"labels":3191,"number":3193,"owner":3162,"repository":3162,"state":3163,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### 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_",[3192],{"name":3159,"color":3160},27442,"onMounted hook called twice during pageTransition with out-in mode","2024-11-14T14:50:13Z","https://github.com/nuxt/nuxt/issues/27442",0.666236,{"description":3199,"labels":3200,"number":3202,"owner":3162,"repository":3162,"state":3163,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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_",[3201],{"name":3159,"color":3160},28220,"Page Transition Bug","2024-10-17T18:04:01Z","https://github.com/nuxt/nuxt/issues/28220",0.66730547,{"description":3208,"labels":3209,"number":3211,"owner":3162,"repository":3162,"state":3163,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Environment\n\nNuxt project info: (copied to clipboard) nuxi 18:10:24\n\n- Operating System: Windows_NT\n- Node Version: v22.12.0\n- Nuxt Version: 4.0.0\n- CLI Version: 3.26.2\n- Nitro Version: 2.12.0\n- Package Manager: pnpm@10.13.1\n- Builder: -\n- User Config: compatibilityDate, devtools, experimental, modules, css, vite\n- Runtime Modules: @nuxt/icon@1.15.0, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.4.1\n- Build Modules: -\n\n\n### Reproduction\n\n1. Enable the experimental `viewTransition` feature in your Nuxt config:\n\n ```ts\n export default defineNuxtConfig({\n experimental: {\n viewTransition: true\n }\n })\n ```\n\n2. Run the Nuxt dev server.\n\n3. Navigate to a non-existent route, e.g. `/non-existent-page`, using:\n\n * A `\u003CNuxtLink to=\"/non-existent-page\" />`, or\n * `router.push(\"/non-existent-page\")` in script, or\n * Manually entering the URL in the browser address bar.\n\n4. Observe that:\n\n * The page seems stuck or blank for several seconds.\n * After a noticeable delay, `error.vue` finally renders with the 404 content.\n\n\n### Describe the bug\n\nWhen the experimental viewTransition feature is enabled in a Nuxt 3 project, navigating to a non-existent route (triggering a 404 error) causes a significant delay before the error page (error.vue) is rendered.\n\nDuring this delay, the page appears to freeze or remain blank for several seconds, giving the impression that the application is unresponsive. Once the delay passes, the expected 404 error content is displayed normally.\n\nThis issue does not occur when viewTransition is disabled.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3210],{"name":3159,"color":3160},32721,"Enabling ViewTransition causes long delay before rendering error.vue on navigation to non-existent routes","2025-07-22T10:17:16Z","https://github.com/nuxt/nuxt/issues/32721",0.6673274,{"description":3217,"labels":3218,"number":3220,"owner":3162,"repository":3162,"state":3163,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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",[3219],{"name":3159,"color":3160},25471,"Inconsistent pageTransition behavior with mixed layoutTransition","2024-06-30T11:06:02Z","https://github.com/nuxt/nuxt/issues/25471",0.6680986,{"description":3226,"labels":3227,"number":3232,"owner":3162,"repository":3162,"state":3233,"title":3234,"updated_at":3235,"url":3236,"score":3237},"\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)",[3228,3229],{"name":3159,"color":3160},{"name":3230,"color":3231},"2.x","d4c5f9",10873,"closed","Page mounted twice","2024-06-14T12:08:58Z","https://github.com/nuxt/nuxt/issues/10873",0.6481398,{"description":3239,"labels":3240,"number":3251,"owner":3162,"repository":3162,"state":3233,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### 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_",[3241,3244,3245,3248],{"name":3242,"color":3243},"3.x","29bc7f",{"name":3159,"color":3160},{"name":3246,"color":3247},"needs reproduction","FBCA04",{"name":3249,"color":3250},"closed-by-bot","ededed",23141,"3.7.1 pageTransition breaks","2023-09-20T01:47:41Z","https://github.com/nuxt/nuxt/issues/23141",0.6485494,{"description":3257,"labels":3258,"number":3261,"owner":3162,"repository":3162,"state":3233,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### 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_",[3259,3260],{"name":3242,"color":3243},{"name":3159,"color":3160},20318,"pageTransition breaks component rendering","2023-04-17T11:27:16Z","https://github.com/nuxt/nuxt/issues/20318",0.6498713,["Reactive",3267],{},["Set"],["ShallowReactive",3270],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fkmRRrY-Q-gajXnGUYGq5Fvix0tC4MX7niV_5Uk7n6uE":-1},"/nuxt/nuxt/23915"]