\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",[2886,2887,2888],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2889,"color":2890},"⛔️ can be closed","484893",18941,"Global Javascript transition","2023-02-28T11:55:27Z","https://github.com/nuxt/nuxt/issues/18941",0.71576095,{"description":2897,"labels":2898,"number":2900,"owner":2877,"repository":2877,"state":2878,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### 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```",[2899],{"name":2871,"color":2872},30969,"Transition do not work around slot in layout","2025-02-22T20:06:51Z","https://github.com/nuxt/nuxt/issues/30969",0.7159791,{"labels":2906,"number":2913,"owner":2877,"repository":2877,"state":2878,"title":2914,"updated_at":2915,"url":2916,"score":2917},[2907,2910],{"name":2908,"color":2909},"enhancement","8DEF37",{"name":2911,"color":2912},"2.x","d4c5f9",6028,"Layout transitions (layoutTransition) javascript hooks","2024-06-14T16:10:02Z","https://github.com/nuxt/nuxt/issues/6028",0.7216345,{"labels":2919,"number":2922,"owner":2877,"repository":2877,"state":2878,"title":2923,"updated_at":2924,"url":2925,"score":2926},[2920,2921],{"name":2868,"color":2869},{"name":2871,"color":2872},14201,"Component inside \u003CTransition> renders non-element root","2023-01-19T17:42:46Z","https://github.com/nuxt/nuxt/issues/14201",0.724559,{"description":2928,"labels":2929,"number":2931,"owner":2877,"repository":2877,"state":2878,"title":2932,"updated_at":2933,"url":2934,"score":2935},"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```",[2930],{"name":2868,"color":2869},15208,"Global transition with JS hooks","2023-01-19T17:46:14Z","https://github.com/nuxt/nuxt/issues/15208",0.72503793,{"description":2937,"labels":2938,"number":2946,"owner":2877,"repository":2877,"state":2878,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### 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",[2939,2940,2943],{"name":2868,"color":2869},{"name":2941,"color":2942},"bug","d73a4a",{"name":2944,"color":2945},"🔨 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":2952,"number":2955,"owner":2877,"repository":2877,"state":2878,"title":2956,"updated_at":2957,"url":2958,"score":2959},[2953,2954],{"name":2871,"color":2872},{"name":2911,"color":2912},6788,"Leave transitions are broken on child routes","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/6788",0.7282475,{"description":2961,"labels":2962,"number":2965,"owner":2877,"repository":2877,"state":2878,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### 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_",[2963,2964],{"name":2868,"color":2869},{"name":2871,"color":2872},24754,"`\u003CTransition appear>` breaks click event listener","2023-12-15T10:09:43Z","https://github.com/nuxt/nuxt/issues/24754",0.7289679,{"description":2971,"labels":2972,"number":2978,"owner":2877,"repository":2877,"state":2878,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Version\n\n[v2.9.2](https://github.com/nuxt.js/releases/tag/v2.9.2)\n\n### Reproduction link\n\n[https://github.com/raWINce/nuxt-async-loading-client-side-hydration](https://github.com/raWINce/nuxt-async-loading-client-side-hydration)\n\n### Steps to reproduce\n\n- in a component render html that depends on the viewport (e.g. using [`vue-mq`](https://github.com/AlexandreBonaventure/vue-mq) with `v-if=\"$mq === 'lg'\"`)\n- include those components as an [async component](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components)\n- reload the page on a different viewport\n\n### What is expected ?\n\nDo not throw warning/errors after reloading the page (during client hydration).\n\nThe client hydration should work with async components, too, when using e.g. [nuxt-mq](https://www.npmjs.com/package/nuxt-mq)-dependent html.\n\n### What is actually happening?\n\nAfter reloading, the client hydration fails and throws `[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.`.\n\nIn a more complicated setup this leads to an error that crashes the entire app (i.e. all components that are rendered later in the DOM do not work). I did not have time to make an example for this case, though\n\n### Additional comments?\n\n- Wrapping the component within `no-ssr` solves the issue. This, however, is not a solution for me because I need the html to be rendered on the server, which is the reason for choosing nuxt in the first place\n- including the component without dynamic import also solves the issue. \n - this makes me think that viewport dependent html can work with nuxt\n - hence, this is probably not a `nuxt-mq` issue\n\n\n\n\n\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9765\">#c9765\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2973,2976,2977],{"name":2974,"color":2975},"stale","ffffff",{"name":2871,"color":2872},{"name":2911,"color":2912},6403,"Client hydration fails with async components and breakpoint dependent html","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6403",0.73218566,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9aibGbuHE9FLa4dQrjRQGXSt-FkNQ6JJUWWAJrggS6g":-1},"/nuxt/ui/4149"]