\n`\nMake pages taller than screen height\nChange page using nuxt link\n\n### Describe the bug\n\n[Reproduction / Stackblitz](https://stackblitz.com/edit/nuxt-starter-h8che3l8?file=pages%2Findex.vue,pages%2Fd.vue,pages%2Fc.vue,pages%2Fb.vue,pages%2Fa.vue,app.vue,nuxt.config.ts)\n\nPage scroll to top before page transition is triggered making the page jump before shifting.\n\nThis issue only occurs when using the NuxtPage transition props alone without setting \n`app:{pageTransition: true,}` in nuxt config\n\nhttps://github.com/user-attachments/assets/6ba83d07-f5e2-48c2-b0cf-fcc458ed567e\n\n### Additional context\n\n\n### **Nuxt Config (`nuxt.config.ts`)**\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n devtools: { enabled: false },\n compatibilityDate: '2025-04-02',\n app: {\n // pageTransition: true,\n },\n});\n```\n\n\n\n### **App (`app.vue`)**\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003CNuxtPage\n :transition=\"{\n name: 'page-fade',\n mode: 'out-in',\n }\"\n />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\n/* FADE */\n.page-fade-enter-active,\n.page-fade-leave-active {\n transition: opacity 0.45s ease-in-out;\n}\n\n.page-fade-enter-from,\n.page-fade-leave-to {\n opacity: 0;\n}\n\u003C/style>\n```",[2945,2946,2949],{"name":2922,"color":2936},{"name":2947,"color":2948},"🔨 p3-minor","FBCA04",{"name":2950,"color":2951},"possible regression","B90A42",31650,"Page scroll to top before transition has started using NuxtPage transition","2025-05-30T14:38:46Z","https://github.com/nuxt/nuxt/issues/31650",0.71978074,{"description":2958,"labels":2959,"number":2964,"owner":2925,"repository":2925,"state":2965,"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_",[2960,2963],{"name":2961,"color":2962},"3.x","29bc7f",{"name":2922,"color":2936},24754,"closed","`\u003CTransition appear>` breaks click event listener","2023-12-15T10:09:43Z","https://github.com/nuxt/nuxt/issues/24754",0.6595021,{"labels":2971,"number":2982,"owner":2925,"repository":2925,"state":2965,"title":2983,"updated_at":2984,"url":2985,"score":2986},[2972,2973,2976,2979],{"name":2961,"color":2962},{"name":2974,"color":2975},"bug","d73a4a",{"name":2977,"color":2978},"vite","3574D1",{"name":2980,"color":2981},"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":2988,"labels":2989,"number":2994,"owner":2925,"repository":2995,"state":2965,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### 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",[2990,2991],{"name":2974,"color":2975},{"name":2992,"color":2993},"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":3001,"labels":3002,"number":3006,"owner":2925,"repository":2925,"state":2965,"title":3007,"updated_at":3008,"url":3009,"score":3010},"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>",[3003],{"name":3004,"color":3005},"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":3012,"labels":3013,"number":3016,"owner":2925,"repository":2995,"state":2965,"title":3017,"updated_at":3018,"url":3019,"score":3020},"### 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```",[3014,3015],{"name":2974,"color":2975},{"name":2992,"color":2993},3063,"Postcss warning appears when building","2025-01-14T04:16:48Z","https://github.com/nuxt/ui/issues/3063",0.70772976,{"description":3022,"labels":3023,"number":3025,"owner":2925,"repository":2925,"state":2965,"title":3026,"updated_at":3027,"url":3028,"score":3029},"### 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```",[3024],{"name":2922,"color":2936},30969,"Transition do not work around slot in layout","2025-02-22T20:06:51Z","https://github.com/nuxt/nuxt/issues/30969",0.7083399,{"description":3031,"labels":3032,"number":3035,"owner":2925,"repository":2925,"state":2965,"title":3036,"updated_at":3037,"url":3038,"score":3039},"### 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>",[3033,3034],{"name":2922,"color":2936},{"name":3004,"color":3005},3479,"Unstyled css flashes while using vue-styled-components","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3479",0.70859486,["Reactive",3041],{},["Set"],["ShallowReactive",3044],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJuDL0uSrjgp-bOmYniaCDzFtHqISbh7OHNssql7gtyw":-1},"/nuxt/ui/3292"]