` 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_",[3042,3045],{"name":3043,"color":3044},"3.x","29bc7f",{"name":3019,"color":3033},24754,"closed","`\u003CTransition appear>` breaks click event listener","2023-12-15T10:09:43Z","https://github.com/nuxt/nuxt/issues/24754",0.6595021,{"labels":3053,"number":3064,"owner":3022,"repository":3022,"state":3047,"title":3065,"updated_at":3066,"url":3067,"score":3068},[3054,3055,3058,3061],{"name":3043,"color":3044},{"name":3056,"color":3057},"bug","d73a4a",{"name":3059,"color":3060},"vite","3574D1",{"name":3062,"color":3063},"upstream","E8A36D",12050,"Don't work with class-style component","2023-01-19T15:54:28Z","https://github.com/nuxt/nuxt/issues/12050",0.7044137,{"description":3070,"labels":3071,"number":3076,"owner":3022,"repository":3077,"state":3047,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Description\n\nHi,\n\nhere in the first form in nuxtui2\nhttps://ui.nuxt.com/components/form \nthe behaviour is that the input field is validated after the blur. If there is an error and I correct it, the error is fixed immediately.\n\nIn v3 the behaviour is different. I have seen the prop validateOn so I can change it to blur, but not like first onBlur and then onInput like in v2.\n\nbest,\ngregor",[3072,3073],{"name":3056,"color":3057},{"name":3074,"color":3075},"v3","49DCB8",3006,"ui","How can I get the same form validation behaviour as in v2?","2025-01-06T17:48:11Z","https://github.com/nuxt/ui/issues/3006",0.7057482,{"description":3083,"labels":3084,"number":3088,"owner":3022,"repository":3022,"state":3047,"title":3089,"updated_at":3090,"url":3091,"score":3092},"Hi,\r\n\r\ntransition Invalid\r\n```\r\n layout: 'greenBackgroundWhiteBlockDown',\r\n name: 'login',\r\n```\r\n\r\ntransition valid\r\n```\r\n name: 'login',\r\n```\r\n\r\n\r\ngreenBackgroundWhiteBlockDown.vue\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"login\">\r\n \u003Cul :class=\"[{ loading: loading }, 'bg-bubbles']\">\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003Cli>\u003C/li>\r\n \u003C/ul>\r\n \u003Cdiv class=\"container\">\r\n \u003Cnuxt/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\r\n\u003Cscript>\r\n export default {\r\n data () {\r\n return {\r\n loading: false,\r\n };\r\n },\r\n mounted () {\r\n console.log(this);\r\n },\r\n };\r\n\u003C/script>\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1118\">#c1118\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3085],{"name":3086,"color":3087},"2.x","d4c5f9",1267,"transition will Invalid when i set layout","2023-01-18T15:41:00Z","https://github.com/nuxt/nuxt/issues/1267",0.7064521,{"description":3094,"labels":3095,"number":3098,"owner":3022,"repository":3077,"state":3047,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.19.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.3\n- Builder: -\n- User Config: compatibilityDate, future, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.10\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/zhcndoc/zhcndoc\n\n### Description\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n WARN [vite:css][postcss] Lexical error on line 1: Unrecognized text. 15:18:30\n\n Erroneous area:\n1: infinity * 1px\n^..^\n1117| }\n1118| .rounded-full {\n1119| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n1120| }\n1121| .rounded-s {\n```",[3096,3097],{"name":3056,"color":3057},{"name":3074,"color":3075},3063,"Postcss warning appears when building","2025-01-14T04:16:48Z","https://github.com/nuxt/ui/issues/3063",0.70772976,{"description":3104,"labels":3105,"number":3107,"owner":3022,"repository":3022,"state":3047,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### 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```",[3106],{"name":3019,"color":3033},30969,"Transition do not work around slot in layout","2025-02-22T20:06:51Z","https://github.com/nuxt/nuxt/issues/30969",0.70834,{"description":3113,"labels":3114,"number":3117,"owner":3022,"repository":3022,"state":3047,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### Version\r\n\r\n[v1.4.0](https://github.com/nuxt.js/releases/tag/v1.4.0)\r\n\r\n### Reproduction link\r\n\r\n[https://fork-glider.glitch.me/](https://fork-glider.glitch.me/)\r\n\r\n### Steps to reproduce\r\n\r\n- Go to the link provided https://fork-glider.glitch.me/\r\n\r\nI use `vue-styled-components` for my styles but instead of being rendered properly, they flash the unstyled component before.\r\n\r\nLive example here: https://fork-glider.glitch.me/\r\nSource: https://glitch.com/edit/#!/fork-glider\r\n\r\nMy component looks like:\r\n\r\n```\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Capp-title>Welcome!\u003C/app-title>\r\n \u003Crouter-link to=\"/about\">About page\u003C/router-link>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import styled from 'vue-styled-components';\r\n\r\n const Title = styled.h1`\r\n font-size: 36px;\r\n color: red;\r\n `;\r\n\r\n export default {\r\n components: {\r\n \"app-title\": Title\r\n }\r\n };\r\n\u003C/script>\r\n```\r\n\r\nHere is a quick gif reproducing the issue:\r\n\r\n\r\n### What is expected ?\r\n\r\n- Title shows styled size and color\r\n\r\n### What is actually happening?\r\n\r\n- Title flashes original size and color before changing to styled one.\r\n\r\n(As this problem is not happening while using plain css, I am wondering if the issue has to do with the run-time of the `script` tag. 🤔)\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\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/c7294\">#c7294\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3115,3116],{"name":3019,"color":3033},{"name":3086,"color":3087},3479,"Unstyled css flashes while using vue-styled-components","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3479",0.70859486,{"description":3123,"labels":3124,"number":3126,"owner":3022,"repository":3022,"state":3047,"title":3127,"updated_at":3128,"url":3129,"score":3130},"OS: Win 10 latest;\r\nChrome: 60.0.3112.113 64bit;\r\ntemplate: nuxt/koa;\r\n\r\nSorry, My English...\r\nWhen the transparency is switched, the page flashes unexpectedly.(At this time range -> transition: opacity 0.5s)\r\n\r\nI'll upload screenshots later.\r\n\r\nIf I delete the code:\r\n```css\r\n.page-enter-active,\r\n.page-leave-active {\r\n transition: opacity 0.5s\r\n}\r\n\r\n.page-enter,\r\n.page-leave-active {\r\n opacity: 0\r\n}\r\n```\r\nCannot be reproduced that.\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1402\">#c1402\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3125],{"name":3086,"color":3087},1570,"Chrome bug? nuxt bug?","2023-01-18T15:41:59Z","https://github.com/nuxt/nuxt/issues/1570",0.70948815,["Reactive",3132],{},["Set"],["ShallowReactive",3135],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJuDL0uSrjgp-bOmYniaCDzFtHqISbh7OHNssql7gtyw":-1},"/nuxt/ui/3292"]