\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n pageTransition: {\n name: 'rb-slide',\n mode: 'out-in'\n }\n})\n\u003C/script>\n```\n\nIt's a single node, but for some reason, Nuxt counts it as non-single.\n\nThe reason why both the file `/pages/admin.vue` and the folder `/pages/admin/...` exist is that I want some settings like `middleware: ['auth']` to be applied to the entire subset of routes. Otherwise, I have to repeatedly define it in every `/pages/admin/index.vue`, `/pages/admin/profile.vue`, etc file. Please suggest a better way of doing this if there's any.\n\nThe template of the entry point, `/pages/admin.vue` should be just empty, it should not add any additional div wrapper or whatever.\n \n\n### Reproduction\n\nHere's the repro: https://github.com/Kasheftin/nuxt-non-element-root.\nJust click on any link on the index page.\n\n### Describe the bug\n\nWhile going from one page to any other page, the following warning appears:\n```\n[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated. \n at \u003CBaseTransition onAfterLeave= [ƒ] mode=\"out-in\" appear=false ... > \n at \u003CTransition onAfterLeave= [ƒ] name=\"rb-slide\" mode=\"out-in\" > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CAdmin onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C null > > \n```\n\nIt should not do it in case the page consists of just a single `\u003Ctemplate>\u003Cnuxt-page />\u003C/template>` template.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3139,3142],{"name":3140,"color":3141},"workaround available","11376d",{"name":3143,"color":3144},"pending triage","E99695",31810,"nuxt","open","`\u003CNuxtPage>` does not render single root element when transition is enabled","2025-04-16T14:05:51Z","https://github.com/nuxt/nuxt/issues/31810",0.65148824,{"description":3153,"labels":3154,"number":3164,"owner":3146,"repository":3165,"state":3147,"title":3166,"updated_at":3167,"url":3168,"score":3169},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://github.com/nuxt-ui-pro/dashboard\nhttps://dashboard-template.nuxt.dev/\n\n### Description\n\nI'm getting the following warning in the console: `Added non-passive event listener to a scroll-blocking 'touchstart' event.`\n\nI'm using a few heavily altered components from the Nuxt UI Pro Dashboard template. I thought it was something I did and started on a reproduction, but you can see the same warning pop up in the template itself, no reproduction needed: https://dashboard-template.nuxt.dev/\n\nI think I have narrowed it down to the `DashboardSideBar`. Removing that component in my project also removes the warning.\n\nI've had no luck trying to fix it, but it might be similar to this bug that was fixed long ago: https://github.com/nuxt/ui/issues/1512\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3155,3158,3161],{"name":3156,"color":3157},"bug","d73a4a",{"name":3159,"color":3160},"v3","49DCB8",{"name":3162,"color":3163},"triage","ffffff",4580,"ui","DashboardSideBar: Added non-passive event listener to a scroll-blocking 'touchstart' event.","2025-07-23T16:15:53Z","https://github.com/nuxt/ui/issues/4580",0.7146782,{"description":3171,"labels":3172,"number":3174,"owner":3146,"repository":3146,"state":3147,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v16.19.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.4.0\r\n- Builder: -\r\n- User Config: devtools, modules, sanity, css, supabase, app, vite\r\n- Runtime Modules: @nuxtjs/supabase@1.1.6, @nuxtjs/sanity@1.8.3\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/elisabetperez/nuxt-layouts\r\n\n\n### Describe the bug\n\nHello, I'm developing a project with Nuxt 3 and Vue 3 and I'm experiencing an issue with layout transitions: they're not working and the page stays blank. \r\nI created a Stackblitz for you to check the issue I'm experiencing: https://stackblitz.com/~/github.com/elisabetperez/nuxt-layouts\r\n\r\n\n\n### Additional context\n\nI've got two layouts: full and sidenav. I've got two pages too: index.vue and library.vue. Each of them has the name of the layout they need defined in definePageMeta. In addition to this, nuxt.config.ts has the layoutTransition defined and the style of the transition is defined in app.vue just like the documentation states. What am I missing? Thanks!\n\n### Logs\n\n_No response_",[3173],{"name":3143,"color":3144},25748,"Layout transition is not working","2024-06-30T11:05:47Z","https://github.com/nuxt/nuxt/issues/25748",0.7155298,{"labels":3180,"number":3185,"owner":3146,"repository":3146,"state":3186,"title":3187,"updated_at":3188,"url":3189,"score":3190},[3181,3184],{"name":3182,"color":3183},"3.x","29bc7f",{"name":3143,"color":3144},14201,"closed","Component inside \u003CTransition> renders non-element root","2023-01-19T17:42:46Z","https://github.com/nuxt/nuxt/issues/14201",0.63932854,{"description":3192,"labels":3193,"number":3195,"owner":3146,"repository":3146,"state":3186,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Environment\n\nNuxt project info: \n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-87qe6yfc?file=layouts%2Fdefault.vue\n\n### Describe the bug\n\nWrapping the `\u003Cslot />` with a `Transition` in a layout results in a `non-element root node` error.\n\n**Layout:** \n```vue\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CNavbar />\n \u003Cdiv class=\"my-ml\">\n \u003CTransition name=\"fade\" mode=\"out-in\"> \u003C!--- from here --->\n \u003Cslot /> \n \u003C/Transition> \u003C!--- to here --->\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\n\n**Page:** \n```vue\n\u003Ctemplate>\n \u003Cdiv class=\"border\">Single node slot\u003C/div> \u003C!--- root node is single --->\n\u003C/template>\n```\n\n**Error:**\n```error\nruntime-core.esm-bundler.js:51 \n[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated. \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage key=\"_default0\" > \n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \n at \u003CTransition name=\"fade\" mode=\"out-in\" > \n at \u003CDefault ref=Ref\u003C Proxy(Object) > > \n at \u003CAsyncComponentWrapper ref=Ref\u003C Proxy(Object) > > \n at \u003CLayoutLoader key=\"default\" layoutProps= Object name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= Object key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\n### Additional context\n\nI want keep the navbar steady and animate only the content of the page on the right with a nice fade.\n\n### Logs\n\n```shell-script\n\n```",[3194],{"name":3143,"color":3144},30969,"Transition do not work around slot in layout","2025-02-22T20:06:51Z","https://github.com/nuxt/nuxt/issues/30969",0.667405,{"labels":3201,"number":3204,"owner":3146,"repository":3146,"state":3186,"title":3205,"updated_at":3206,"url":3207,"score":3208},[3202,3203],{"name":3182,"color":3183},{"name":3156,"color":3157},12172,"nuxt-link [Vue warn]: Component inside \u003CTransition>","2023-01-19T16:04:18Z","https://github.com/nuxt/nuxt/issues/12172",0.6754041,{"labels":3210,"number":3211,"owner":3146,"repository":3146,"state":3186,"title":3205,"updated_at":3212,"url":3213,"score":3214},[],12257,"2023-01-19T16:00:23Z","https://github.com/nuxt/nuxt/issues/12257",0.6759521,{"labels":3216,"number":3217,"owner":3146,"repository":3146,"state":3186,"title":3205,"updated_at":3218,"url":3219,"score":3214},[],12286,"2023-01-19T16:02:56Z","https://github.com/nuxt/nuxt/issues/12286",{"labels":3221,"number":3226,"owner":3146,"repository":3146,"state":3186,"title":3227,"updated_at":3228,"url":3229,"score":3230},[3222,3225],{"name":3223,"color":3224},"documentation","5319e7",{"name":3182,"color":3183},13402,"Slot can't be root-element in layouts","2023-01-19T16:54:59Z","https://github.com/nuxt/nuxt/issues/13402",0.68160766,{"description":3232,"labels":3233,"number":3238,"owner":3146,"repository":3146,"state":3186,"title":3239,"updated_at":3240,"url":3241,"score":3242},"## Description\n\nHi, I’m working on a Nuxt 3 project deployed on Vercel. I’m experiencing an unwanted **white flash** or **layout flicker** on navigation between pages, especially when using `\u003CNuxtLink>` inside the navbar. The transition feels broken or unpolished.\n\nI already use default Nuxt page transitions like this:\n\n```css\n.page-enter-active,\n.page-leave-active {\n transition: all 0.4s;\n}\n.page-enter-from,\n.page-leave-to {\n opacity: 0;\n filter: blur(1rem);\n}\n```\nMy app layout includes the navbar and footer outside of `\u003CNuxtPage />` 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",[3234,3235],{"name":3143,"color":3144},{"name":3236,"color":3237},"needs reproduction","FBCA04",32053,"💥 Nuxt Page Transition causes a Flash / Blank when navigating — possible layout/rendering issue","2025-09-04T08:34:44Z","https://github.com/nuxt/nuxt/issues/32053",0.6822271,["Reactive",3244],{},["Set"],["ShallowReactive",3247],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJoyrNz4V3IuUwDaviMlFNT1NNsSoZS_Wef_yRR4JRa8":-1},"/nuxt/ui/4952"]