\r\n \u003C/Transition>\r\n \u003C/router-view>\r\n\u003C/template>\r\n```\r\n\r\nAfter testing a bit, I think the correct syntax should be this as explained in the [docs](https://nuxt.com/docs/getting-started/transitions#transition-with-nuxtpage) for global transition but its not working. Is my syntax incorrect ?\r\n\r\n`app.vue` :\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst onBeforeLeave = (el) => {}\r\nconst onLeave = (el, done) => {}\r\nconst onEnter = (el, done) => {}\r\nconst onAfterEnter = (el) => {}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtPage\r\n :transition=\"{\r\n mode: 'out-in',\r\n css: false,\r\n onBeforeLeave,\r\n onLeave,\r\n onEnter,\r\n onAfterEnter,\r\n }\"\r\n />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n`errors` :\r\n\r\n",[3209,3210,3211],{"name":3194,"color":3195},{"name":3181,"color":3182},{"name":3212,"color":3213},"⛔️ can be closed","484893",18941,"Global Javascript transition","2023-02-28T11:55:27Z","https://github.com/nuxt/nuxt/issues/18941",0.71576095,{"description":3220,"labels":3221,"number":3223,"owner":3184,"repository":3184,"state":3201,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### 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```",[3222],{"name":3181,"color":3182},30969,"Transition do not work around slot in layout","2025-02-22T20:06:51Z","https://github.com/nuxt/nuxt/issues/30969",0.7159791,{"labels":3229,"number":3236,"owner":3184,"repository":3184,"state":3201,"title":3237,"updated_at":3238,"url":3239,"score":3240},[3230,3233],{"name":3231,"color":3232},"enhancement","8DEF37",{"name":3234,"color":3235},"2.x","d4c5f9",6028,"Layout transitions (layoutTransition) javascript hooks","2024-06-14T16:10:02Z","https://github.com/nuxt/nuxt/issues/6028",0.7216345,{"labels":3242,"number":3245,"owner":3184,"repository":3184,"state":3201,"title":3246,"updated_at":3247,"url":3248,"score":3249},[3243,3244],{"name":3194,"color":3195},{"name":3181,"color":3182},14201,"Component inside \u003CTransition> renders non-element root","2023-01-19T17:42:46Z","https://github.com/nuxt/nuxt/issues/14201",0.724559,{"description":3251,"labels":3252,"number":3254,"owner":3184,"repository":3184,"state":3201,"title":3255,"updated_at":3256,"url":3257,"score":3258},"Hello 👋,\r\n\r\nI am trying to port my \"vue syntax transition\" to a more \"nuxt friendly\" solution. For now I have :\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst onBeforeLeave = (el) => {}\r\nconst onLeaver = (el, done) => {}\r\nconst onEnter = (el, done) => {}\r\nconst onAfterEnter = (el) => {}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Crouter-view v-slot=\"{ Component }\">\r\n \u003CTransition\r\n mode=\"out-in\"\r\n :css=\"false\"\r\n @before-leave=\"onBeforeLeave\"\r\n @leave=\"onLeave\"\r\n @enter=\"onEnter\"\r\n @after-enter=\"onAfterEnter\"\r\n >\r\n \u003Ccomponent :is=\"Component\" />\r\n \u003C/Transition>\r\n \u003C/router-view>\r\n\u003C/template>\r\n```\r\n\r\nthat is working quite well. however, the following config coming from [the doc](https://v3.nuxtjs.org/getting-started/transitions#javascript-hooks) doesn't seems to work in `app.vue`:\r\n\r\n```js\r\n\u003Cscript setup lang=\"ts\">\r\ndefinePageMeta({\r\n pageTransition: {\r\n name: 'custom-flip',\r\n mode: 'out-in',\r\n onBeforeEnter: (el) => {\r\n console.log('Before enter...')\r\n },\r\n onEnter: (el, done) => {},\r\n onAfterEnter: (el) => {}\r\n }\r\n})\r\n\u003C/script>\r\n```",[3253],{"name":3194,"color":3195},15208,"Global transition with JS hooks","2023-01-19T17:46:14Z","https://github.com/nuxt/nuxt/issues/15208",0.72503793,{"description":3260,"labels":3261,"number":3269,"owner":3184,"repository":3184,"state":3201,"title":3270,"updated_at":3271,"url":3272,"score":3273},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.3\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/v-for-layout?file=layouts%2Fdefault.vue\r\n\r\n### Describe the bug\r\n\r\nWhen navigate to a route with a different layout, **and there's a `v-for` with a `ref()`** list inside the page, then return a vue warn and a error.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n\r\nUncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')\r\n at parentNode (chunk-MNWBZQKJ.js:82:30)\r\n at ReactiveEffect.componentUpdateFn [as fn] (chunk-3Q27KRJ5.js:5823:11)\r\n at ReactiveEffect.run (chunk-BOVKDABU.js?v=1765f250:181:19)\r\n at instance.update (chunk-3Q27KRJ5.js:5860:52)\r\n at callWithErrorHandling (chunk-3Q27KRJ5.js:213:32)\r\n at flushJobs (chunk-3Q27KRJ5.js:411:9)\r\n```\r\n",[3262,3263,3266],{"name":3194,"color":3195},{"name":3264,"color":3265},"bug","d73a4a",{"name":3267,"color":3268},"🔨 p3-minor","FBCA04",21544,"v-for doesn't work on change layout","2023-06-23T10:02:04Z","https://github.com/nuxt/nuxt/issues/21544",0.7269256,{"labels":3275,"number":3278,"owner":3184,"repository":3184,"state":3201,"title":3279,"updated_at":3280,"url":3281,"score":3282},[3276,3277],{"name":3181,"color":3182},{"name":3234,"color":3235},6788,"Leave transitions are broken on child routes","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/6788",0.7282475,{"description":3284,"labels":3285,"number":3288,"owner":3184,"repository":3184,"state":3201,"title":3289,"updated_at":3290,"url":3291,"score":3292},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\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, vite\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-s3ebia?file=app.vue,components%2FFullscreenBackground.vue\r\n\r\n### Describe the bug\r\n\r\nI was making a background for a modal component when I noticed a strange behaviour with the `\u003CTransition />` component, specifically when the `appear` prop is set.\r\n\r\nIt seems that the click event listener on an element inside `\u003CTransition appear>` isn't being properly handled.\r\nSteps to reproduce:\r\n1. open the reproduction\r\n2. click on the semi-transparent fullscreen div\r\n3. *nothing happens* even though it should have set its visibility to `false`\r\n\r\n1. remove `appear` from the `\u003CTransition>` component in `FullscreenBackground.vue`\r\n2. repeat the same steps & now the click is properly handled\r\n\r\n### Additional context\r\n\r\nI've tried and I couldn't reproduce the same issue in Vue, so I assume it could be a bug in Nuxt.\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3286,3287],{"name":3194,"color":3195},{"name":3181,"color":3182},24754,"`\u003CTransition appear>` breaks click event listener","2023-12-15T10:09:43Z","https://github.com/nuxt/nuxt/issues/24754",0.7289679,["Reactive",3294],{},["Set"],["ShallowReactive",3297],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9aibGbuHE9FLa4dQrjRQGXSt-FkNQ6JJUWWAJrggS6g":-1},"/nuxt/ui/4149"]