` like this:\n\n```vue\n\u003Ctemplate>\n \u003CNuxtLoadingIndicator />\n \u003CAppNavbar />\n \u003Cdiv class=\"h-32\" />\n \u003CUContainer>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UContainer>\n \u003Cdiv class=\"h-32\" />\n \u003CAppFooter />\n\u003C/template>\n```\nmy index page on page/\n\n```vue\n \u003Ctemplate>\n \u003Cmain class=\"min-h-screen\">\n \u003Cdiv class=\"space-y-24\">\n \u003CHomeIntro />\n \u003CHomePremiumService />\n \u003CHomeWork />\n \u003CHomeSocialLinks />\n \u003CHomeFeaturedProjects />\n \u003CHomeFeaturedArticles />\n \u003CHomeTestimonials />\n \u003CHomeContactCTA />\n \u003C/div>\n \u003C/main>\n\u003C/template>\n```\n\nI’ve created a video demonstrating the issue I'm encountering with Nuxt. The video shows the flashing behavior when navigating between pages, even though I have set up transitions as expected.\n\nhttps://github.com/user-attachments/assets/50acdc47-bb18-4f89-b186-f6f220cd731c\n\nEven though the transition is defined, navigation causes a brief white screen before the new content appears. It seems like the layout or components are unmounted/re-mounted unexpectedly.\n\n## What I’ve tried\n\n- Using static assets (`\u003CNuxtImg>`) with placeholder and blur.\n- Moving layout elements inside Nuxt layouts.\n- Ensuring no SSR hydration errors.\n- Checked for large images or fonts causing flashes.\n- Tried with `nuxt@3.8.1`, but got package warnings on `glob@7.x`.\n\n## Possible cause\n\nIt seems like `\u003CNuxtPage />` renders **before** layout is fully hydrated, or there's a delay with dynamic components (like `useSeoMeta`, runtime config, or `\u003CNuxtImg>`). \nMaybe the `transition` hook isn't synced with the component load.\n\n## Questions\n\n- Is this a known issue with page transitions in Nuxt 3?\n- Should layout or page transitions be handled differently to avoid this kind of visual glitch?\n- Any workaround for a smoother visual transition without flicker?\n\nThanks in advance 🙏\n",[3031,3032],{"name":3019,"color":3020},{"name":3033,"color":3034},"needs reproduction","FBCA04",32053,"💥 Nuxt Page Transition causes a Flash / Blank when navigating — possible layout/rendering issue","2025-05-09T14:47:20Z","https://github.com/nuxt/nuxt/issues/32053",0.66580665,{"description":3041,"labels":3042,"number":3051,"owner":3022,"repository":3022,"state":3052,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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_",[3043,3046,3047,3048],{"name":3044,"color":3045},"3.x","29bc7f",{"name":3019,"color":3020},{"name":3033,"color":3034},{"name":3049,"color":3050},"closed-by-bot","ededed",23141,"closed","3.7.1 pageTransition breaks","2023-09-20T01:47:41Z","https://github.com/nuxt/nuxt/issues/23141",0.6522213,{"description":3058,"labels":3059,"number":3065,"owner":3022,"repository":3022,"state":3052,"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_",[3060,3063],{"name":3061,"color":3062},"bug","d73a4a",{"name":3064,"color":3034},"🔨 p3-minor",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.6574829,{"description":3071,"labels":3072,"number":3075,"owner":3022,"repository":3022,"state":3052,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### 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_",[3073,3074],{"name":3044,"color":3045},{"name":3019,"color":3020},20318,"pageTransition breaks component rendering","2023-04-17T11:27:16Z","https://github.com/nuxt/nuxt/issues/20318",0.6596719,{"description":3081,"labels":3082,"number":3084,"owner":3022,"repository":3022,"state":3052,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### 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_",[3083],{"name":3064,"color":3034},19814,"Page transitions are applied multiple times","2025-05-28T23:13:41Z","https://github.com/nuxt/nuxt/issues/19814",0.66400546,{"labels":3090,"number":3093,"owner":3022,"repository":3022,"state":3052,"title":3094,"updated_at":3095,"url":3096,"score":3097},[3091,3092],{"name":3044,"color":3045},{"name":3061,"color":3062},12630,"Nuxt Page Transition Property Not Working","2023-01-19T16:07:59Z","https://github.com/nuxt/nuxt/issues/12630",0.66537464,{"description":3099,"labels":3100,"number":3103,"owner":3022,"repository":3022,"state":3052,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: vite\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-qjv6tr-vvemyr?file=app.vue\n\n### Describe the bug\n\nHi! 💚\r\nI'd tried to use page transition with a vue3 component library that has an anchor tag as a link but it seems not working.\r\nPage transition works only with NuxtLink, the anchor tag does not trigger page transition.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3101,3102],{"name":3044,"color":3045},{"name":3019,"color":3020},22112,"Page transition not working with anchor tag","2023-07-17T08:26:30Z","https://github.com/nuxt/nuxt/issues/22112",0.6654352,{"description":3109,"labels":3110,"number":3113,"owner":3022,"repository":3022,"state":3052,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `app`, `css`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-5ork11?file=pages/about.vue\n\n### Describe the bug\n\nWhen you quickly move through the pages back and forth, back and forth, the page breaks and is no longer rendered, the following error pops up in the console:\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3111,3112],{"name":3044,"color":3045},{"name":3019,"color":3020},15703,"Page transition animation error","2023-01-19T18:20:14Z","https://github.com/nuxt/nuxt/issues/15703",0.66742826,{"description":3119,"labels":3120,"number":3125,"owner":3022,"repository":3022,"state":3052,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### 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_",[3121,3122],{"name":3019,"color":3020},{"name":3123,"color":3124},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.669043,["Reactive",3131],{},["Set"],["ShallowReactive",3134],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwRnDbrw8awR3QakOS4POMgtAFZbgs3zfyCZ-lre1EYY":-1},"/nuxt/ui/4379"]