\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3018,3021,3024],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",3307,"nuxt","ui","open","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.7072451,{"description":3036,"labels":3037,"number":3043,"owner":3028,"repository":3029,"state":3030,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.17.4\nNitro Version: 2.11.12\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Description\n\nHi,\nWhen I use the mouseenter and mouseleave or mouseover and mouseout events, the following error appears and the events don't work:\n\n\"[Vue warn]: Extraneous non-emits event listeners (mouseenter, mouseleave) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the emits option.\"\n\nWhat should I do? Can you help me?\n",[3038,3041,3042],{"name":3039,"color":3040},"bug","d73a4a",{"name":3022,"color":3023},{"name":3025,"color":3026},4268,"Extraneous non-emits event listeners (mouseenter, mouseleave) on UDashboardSidebar component","2025-06-01T11:15:46Z","https://github.com/nuxt/ui/issues/4268",0.718869,{"description":3049,"labels":3050,"number":3051,"owner":3028,"repository":3052,"state":3030,"title":3053,"updated_at":3054,"url":3055,"score":3056},"I've been having an issue with this module, where the fetching of font files sometimes fails during the production build. I haven't been able to create a reliable reproduction yet—it seems to happen at random.\n\nThe build is done in GitHub CI, where a Docker image is built, using Node version 18.\n\nThis is the error log from the problematic deployment:\n```\n#25 20.31 [@nuxt/fonts] ERROR Could not fetch metadata for Red Hat Display from google. fetch failed\n#25 20.31 \n#25 20.31 at Object.fetch (node:internal/deps/undici/undici:11372:11)\n#25 20.31 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n#25 20.31 at async getFontDetails$5 (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:550:12)\n#25 20.31 at async cachedData (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:474:20)\n#25 20.31 at async Object.resolveFontFaces (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:511:14)\n#25 20.31 at async resolveFontFaceWithOverride (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:1395:26)\n#25 20.31 at async addFontFaceDeclaration (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:940:22)\n#25 20.31 at async Promise.all (index 0)\n#25 20.31 at async transformCSS (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:1013:5)\n#25 20.31 at async Object.transform (/opt/project/node_modules/.pnpm/@nuxt+fonts@0.8.0_ioredis@5.4.1_magicast@0.3.5_rollup@4.20.0_vite@5.4.3_@types+node@22.5.5_sa_d6a46d5cxhijk7lxvuwfjdzkcm/node_modules/@nuxt/fonts/dist/module.mjs:1025:17)\n#25 20.31 \n#25 20.31 \n#25 20.31 [@nuxt/fonts] WARN Could not produce font face declaration from google for font family Red Hat Display.\n#25 20.31 \n#25 42.48 ℹ ✓ 1387 modules transformed.\n```\n\nHas anyone else come across this issue? Wouldn't it be better to exit rather than continue with the build if the font fetch fails?",[],356,"fonts","Fonts sometimes missing in production build","2024-12-05T16:49:07Z","https://github.com/nuxt/fonts/issues/356",0.7197873,{"description":3058,"labels":3059,"number":3062,"owner":3028,"repository":3063,"state":3064,"title":3065,"updated_at":3066,"url":3067,"score":3068},"Following @Flosciante reviews here https://github.com/nuxtlabs/nuxt.com/pull/802, we need to remove listener on unMounted, we can achieve this easily with VueUse `useEventListener` which does that automatically: https://vueuse.org/core/useEventListener/#useeventlistener.",[3060],{"name":3019,"color":3061},"1ad6ff",804,"nuxt.com","closed","[Home] Replace `window.addEventListener` with `useEventListener`","2023-09-05T08:18:37Z","https://github.com/nuxt/nuxt.com/issues/804",0.6678163,{"description":3070,"labels":3071,"number":3075,"owner":3028,"repository":3028,"state":3064,"title":3076,"updated_at":3077,"url":3078,"score":3079},"I have scroll event listeners in one of the components that I am using on particular Page. The problem is this event listeners is triggered even after I navigate out of this page (where I am using this component). How to fix it? I got console full of errors. \r\n\r\n```js\r\ncreated () {\r\n if (process.browser) {\r\n window.addEventListener('scroll', this.parallax)\r\n }\r\n },\r\n destroyed () {\r\n if (process.browser) {\r\n window.removeEventListener('scroll', this.parallax)\r\n }\r\n }\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/c1945\">#c1945\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3072],{"name":3073,"color":3074},"2.x","d4c5f9",2206,"Event listener doesn't remove when route to other page","2023-01-18T15:54:59Z","https://github.com/nuxt/nuxt/issues/2206",0.68669456,{"description":3081,"labels":3082,"number":3087,"owner":3028,"repository":3029,"state":3064,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### Description\n\nHow can I customize component styles in v3?\nI learned from `https://ui3.nuxt.dev/getting-started/theme` that styles can be customized in `app.config.ts` For example:\n```ts\nexport default defineAppConfig({\n uiPro: {\n header: {\n slots: {\n root: 'bg-[var(--ui-bg)]/75 backdrop-blur border-b border-[var(--ui-border)] sticky top-0 z-50',\n container: 'flex items-center justify-between gap-3 h-[var(--ui-header-height)]',\n left: 'lg:flex-1 flex items-center gap-1.5',\n center: 'hidden lg:flex',\n right: 'flex items-center justify-end lg:flex-1 gap-1.5',\n title: 'shrink-0 font-bold text-xl text-[var(--ui-text-highlighted)] flex items-end gap-1.5',\n toggle: 'lg:hidden',\n content: 'lg:hidden',\n overlay: 'lg:hidden',\n header: '',\n body: 'p-4 sm:p-6 overflow-y-auto'\n },\n variants: {\n toggleSide: {\n left: {\n toggle: '-ms-1.5'\n },\n right: {\n toggle: '-me-1.5'\n }\n }\n }\n }\n }\n})\n```\nHowever, after testing this approach, it doesn’t seem to work. So I’d like to ask specifically how to modify the style of an entire component in v3.\nFor instance, I want to customize the style of `UHeader`\nPlease forgive me if this is a silly question. English is not my native language, so I might have missed some details mentioned elsewhere.",[3083,3086],{"name":3084,"color":3085},"question","d876e3",{"name":3022,"color":3023},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.6896091,{"description":3093,"labels":3094,"number":3101,"owner":3028,"repository":3028,"state":3064,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Environment\r\n\r\nNuxt 3.7.3 as well as 3.5 (other versions not tested)\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-aeewhc?file=pages%2Findex.vue\r\n\r\nor paste this in your page.vue:\r\n```js\r\n\u003Cscript setup>\r\nonMounted(() => {\r\n window.addEventListener('load', (event) => {\r\n console.log('page is fully loaded');\r\n });\r\n});\r\n\u003C/script>\r\n```\r\n\r\n### Describe the bug\r\n\r\nIt appears that when we use pages catalog we don't have access to load event listeners inside onmounted, like DOMContentLoaded. Scroll event works fine.\r\n\r\nWhen I remove pages folder and stick to app.vue only, event listener works as expected and fires when page is loaded.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3095,3098],{"name":3096,"color":3097},"3.x","29bc7f",{"name":3099,"color":3100},"pending triage","E99695",23281,"Can't register listeners inside onMounted (DOMContentLoaded / window.load events)","2023-09-21T07:55:52Z","https://github.com/nuxt/nuxt/issues/23281",0.69023067,{"description":3107,"labels":3108,"number":3110,"owner":3028,"repository":3029,"state":3064,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nDoes anyone know how to increase the width of the modal in `UModal` tag? Thanks in advance!\n\n\n",[3109],{"name":3084,"color":3085},2747,"How do I increase the width of the modal in UModal tag","2024-12-05T12:47:38Z","https://github.com/nuxt/ui/issues/2747",0.691529,{"description":3116,"labels":3117,"number":3120,"owner":3028,"repository":3028,"state":3064,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Environment\n\nProduction\n\n### Reproduction\n\nI'm getting deprecation warnings about the `unload` event listeners. Upon further investigation it seems that there's an unload event listener triggered on each page when looking at the inspecter in Chrome\n\n### Describe the bug\n\nNuxt JS is throwing core code deprecation warnings:\r\n\r\n> ReportingObserver [deprecation]: Unload event listeners are deprecated and will be removed\r\n\r\nI think this might be something related to core code that may need to be addressed as this is going to be fully deprecated at Q4 2024,.\n\n### Additional context\n\n\r\n\r\n\n\n### Logs\n\n_No response_",[3118,3119],{"name":3099,"color":3100},{"name":3073,"color":3074},27154,"ReportingObserver [deprecation]: Unload event listeners are deprecated and will be removed","2024-06-30T09:21:39Z","https://github.com/nuxt/nuxt/issues/27154",0.7021019,{"description":3126,"labels":3127,"number":3130,"owner":3028,"repository":3029,"state":3064,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Description\n\nHi,\n\nI just tried upgrading to `v3` but I noticed that the `Meter` component is unfortunately missing in this version and the migration guide also doesn't mention anything regarding that component which currently prevents me from upgrading to v3 . [This issue](https://github.com/nuxt/ui/issues/1841) mentions that the component was still pending migration at some point in the beginning of 2024 besides some other components.\n\nIs the meter component still expected to arrive in v3 sometime soon? It would be quite unfortunate if this handy component would be stripped out of NuxtUI.\n",[3128,3129],{"name":3084,"color":3085},{"name":3022,"color":3023},3808,"Meter component missing in v3","2025-04-08T17:16:45Z","https://github.com/nuxt/ui/issues/3808",0.7027677,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNZIMvOVLvOsRtJ0ATrCOgyDuoAzOdIjBpgqju0JbGWY":-1},"/nuxt/nuxt.com/1370"]