`\n\nit doesn't work that way\n\nI really ask for help!",[2884,2885],{"name":2868,"color":2869},{"name":2886,"color":2887},"v3","49DCB8",3098,"Table filtered, sorting fetch","2025-01-14T11:05:37Z","https://github.com/nuxt/ui/issues/3098",0.701881,{"description":2894,"labels":2895,"number":2903,"owner":2874,"repository":2875,"state":2876,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Description\n\nWhen adding `UButton` component with `ghost` or `link` variant inside a `UBanner` with `links` attribute, they remain displayed in black text, even if the banner has a dark background (e.g., primary color). Unlike the Banner close button, which has specific Tailwind classes that adapt it to dark mode (white text), these elements do not automatically adjust their colors.\n\n\n\n```html\n \u003CUBanner to=\"/guide-gouvernance-associative-crise\" icon=\"i-ph-books-duotone\" title=\"Guide Gouvernance Associative\" :actions=\"[{label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'ghost', size: 'md', trailingIcon: 'i-ph-arrow-right'}, {label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'link', size: 'md'}]\" close />\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_",[2896,2899,2900],{"name":2897,"color":2898},"enhancement","a2eeef",{"name":2886,"color":2887},{"name":2901,"color":2902},"triage","ffffff",3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.7072451,{"description":2909,"labels":2910,"number":2914,"owner":2874,"repository":2875,"state":2876,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Description\n\n### Feature Request: Add `variant` and `status-position` props to `UProgress` component\n\n#### Description\nI’m a junior developer, and I’ve been working on enhancing the flexibility of the `Progress` component by adding two new props: `variant` and `status-position`. These props allow for better customization, especially when using the `Progress` component in different design contexts.\n\n- **`variant`**: This prop allows you to choose between two styles for the progress bar: `linear` and `circular`. The `circular` variant provides a circular progress bar instead of the default linear style.\n \n- **`status-position`**: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:\n - `inside`: The status is displayed inside the circle (for the `circular` variant).\n - `outside`: The status is displayed outside the circle.\n\n#### Motivation\nThis update would help in using the `Progress` component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.\n\n#### What I've Done\nI’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the `variant` and `status-position` props to the `Progress` component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.\n\n#### Additional Notes\n- The `variant` prop accepts values `linear` or `circular`.\n- The `status-position` prop accepts values `inside` or `outside`.\n \nWould love to hear your thoughts on this approach!\n\n\n### Additional context\n\n[Reka UI : Progress Circular](https://reka-ui.com/examples/progress-circular)",[2911,2912,2913],{"name":2897,"color":2898},{"name":2886,"color":2887},{"name":2901,"color":2902},3728,"[UProgress]: Add `variant` and `status-position` props","2025-03-29T14:31:22Z","https://github.com/nuxt/ui/issues/3728",0.7089419,{"description":2920,"labels":2921,"number":2927,"owner":2874,"repository":2875,"state":2876,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### 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",[2922,2925,2926],{"name":2923,"color":2924},"bug","d73a4a",{"name":2886,"color":2887},{"name":2901,"color":2902},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":2933,"labels":2934,"number":2935,"owner":2874,"repository":2936,"state":2876,"title":2937,"updated_at":2938,"url":2939,"score":2940},"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":2942,"labels":2943,"number":2946,"owner":2874,"repository":2947,"state":2948,"title":2949,"updated_at":2950,"url":2951,"score":2952},"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.",[2944],{"name":2897,"color":2945},"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":2954,"labels":2955,"number":2959,"owner":2874,"repository":2874,"state":2948,"title":2960,"updated_at":2961,"url":2962,"score":2963},"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>",[2956],{"name":2957,"color":2958},"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":2965,"labels":2966,"number":2969,"owner":2874,"repository":2875,"state":2948,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### 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.",[2967,2968],{"name":2868,"color":2869},{"name":2886,"color":2887},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.6896091,{"description":2975,"labels":2976,"number":2983,"owner":2874,"repository":2874,"state":2948,"title":2984,"updated_at":2985,"url":2986,"score":2987},"### 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_",[2977,2980],{"name":2978,"color":2979},"3.x","29bc7f",{"name":2981,"color":2982},"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,["Reactive",2989],{},["Set"],["ShallowReactive",2992],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNZIMvOVLvOsRtJ0ATrCOgyDuoAzOdIjBpgqju0JbGWY":-1},"/nuxt/nuxt.com/1370"]