\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_",[3019,3022,3025],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"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.7319206,{"description":3037,"labels":3038,"number":3043,"owner":3029,"repository":3030,"state":3044,"title":3045,"updated_at":3046,"url":3047,"score":3048},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.18.1\n- Nuxt Version: 3.15.1\n- CLI Version: 3.19.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, css, compatibilityDate, app, ui, image\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.11, @nuxtjs/seo@2.0.3, @nuxt/image@1.9.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nnuxt/ui@3.0.0-alpha.11\n\n### Reproduction\n\nlayouts\\default.vue:\n\u003Ctemplate>\n \u003CUApp>\n \u003CNuxtPage />\n \u003CCustomFooter />\n \u003C/UApp>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nuseHead({\n htmlAttrs: {\n lang: \"he\",\n dir: \"rtl\",\n },\n});\n\u003C/script>\n\npage/index.vue\n\u003Ctemplate>\n ...\n \u003CButtonConnect />\n...\n\u003C/template>\n\ncomponents\\ButtonConnect.vue\n\u003Ctemplate>\n \u003CUNavigationMenu :items=\"links\" class=\"xl:px-64\"> \u003C/UNavigationMenu>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst links = ref([\n [\n {\n label: \"עליי\",\n icon: \"mdi-account\",\n },\n {\n label: \"מה אני עושה?\",\n icon: \"mdi-heart-pulse\",\n },\n {\n label: \"למי זה מתאים?\",\n icon: \"mdi-format-list-bulleted\",\n },\n {\n label: \"צור קשר\",\n icon: \"mdi-chat\",\n },\n {\n label: \"שאלות ותשובות\",\n icon: \"mdi-frequently-asked-questions\",\n },\n ],\n [\n {\n label: \"וואטסאפ\",\n icon: \"mdi-whatsapp\",\n },\n {\n label: \"מייל\",\n icon: \"mdi-email\",\n },\n {\n label: \"טלפון\",\n icon: \"mdi-phone\",\n },\n ],\n]);\n\n\n\u003C/script>\n\n\n### Description\n\nWhen using the NavigationMenu component from Nuxt UI in an RTL layout, the component does not render correctly. Specifically, the following issues were observed:\n\nThe menu items are not aligned to the right as expected in RTL mode.\nDropdowns and submenus open in the wrong direction (to the left instead of the right).\nThe component does not fully respect the dir=\"rtl\" attribute applied at the \u003Chtml> level.\n\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3039,3042],{"name":3040,"color":3041},"bug","d73a4a",{"name":3023,"color":3024},3140,"closed","NavigationMenu does not properly support RTL layouts","2025-01-25T13:13:37Z","https://github.com/nuxt/ui/issues/3140",0.70427436,{"description":3050,"labels":3051,"number":3060,"owner":3029,"repository":3030,"state":3044,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Environment\n\n- **Nuxt:** 3.20.0\n- **Nuxt UI:** 3.0.0-alpha.10\n- **Node.js:** v22.10.0\n- **Browser:** Chrome 132.0.6834.83\n- **OS:** macOS 14.5(23F79)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\n```\n\u003Cscript setup lang=\"ts\">\nimport { range } from 'lodash';\nimport { ref } from 'vue';\n\nconst value = ref(range(100)); // 100 sliders\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSlider v-model=\"value\" />\n\u003C/template>\n```\n\n### Description\n\nWhen using the `USlider` component to render more than 100 `SliderThumbs`, the following error occurs:\n\n```\nUncaught (in promise) Maximum recursive updates exceeded in component \u003CSliderThumb>.\n```\n\nThis error seems to happen due to recursive reactive updates when the number of slider thumbs exceeds a certain limit.\n\n**Steps to Reproduce:**\n\n1. Create a Nuxt 3 project.\n2. Install Nuxt UI 3.\n3. Add the following code to a component:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { range } from 'lodash';\nimport { ref } from 'vue';\n\nconst value = ref(range(100)); // 100 sliders\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSlider v-model=\"value\" />\n\u003C/template>\n```\n\n4. Run the project and attempt to render the component.\n\n**Expected Result:**\nThe `USlider` component should render more than 100 `SliderThumbs` without any errors.\n\n**Actual Result:**\nThe following error is shown in the browser console, and the application fails to work properly:\n\n```\nUncaught (in promise) Maximum recursive updates exceeded in component \u003CSliderThumb>.\n```\n\n### Additional context\n\n- This issue seems to be caused by recursive reactive updates within the `USlider` component.\n- No documented limitations regarding the number of `SliderThumbs` were found in the Nuxt UI 3 documentation.\n\n### Logs\n\n```shell-script\n\n```",[3052,3053,3054,3055,3058],{"name":3040,"color":3041},{"name":3023,"color":3024},{"name":3026,"color":3027},{"name":3056,"color":3057},"closed-by-bot","ededed",{"name":3059,"color":3057},"stale",3174,"`USlider`: Maximum recursive updates exceeded with more than 100 SliderThumbs","2025-06-18T09:02:27Z","https://github.com/nuxt/ui/issues/3174",0.7087406,{"description":3066,"labels":3067,"number":3072,"owner":3029,"repository":3030,"state":3044,"title":3073,"updated_at":3074,"url":3075,"score":3076},"### Description\n\nI have a personal project that I upgrade from version 2 to 3. I noticed when doing this the UInput no longer expands to the div container.\n\nIn version 2 the parent container is:\n\n```\n\u003CUFormGroup>\n \u003CUInput />\n\u003C/UFormGroup>\n```\n\n```\n\u003Cdiv class=“relative”>\n \u003Cinput>…\n\u003C/div>\n```\n\nHowever in version 3 it is\n\n```\n\u003CUFormField>\n \u003CUInput />\n\u003C/UFormField >\n```\n\n```\n\u003Cdiv class=“relative inline-flex items-center”>\n \u003Cinput>…\n\u003C/div>\n```\n\nThis is causing the `\u003Cinput>` to not expand to the full width of the parent container. Is there a way to edit this in Nuxt UI 3 to make it fully expand to the parent container?\n\n",[3068,3071],{"name":3069,"color":3070},"question","d876e3",{"name":3023,"color":3024},3955,"UInput not flexing when upgrading from v2 to v3","2025-04-22T14:14:04Z","https://github.com/nuxt/ui/issues/3955",0.72492516,{"description":3078,"labels":3079,"number":3081,"owner":3029,"repository":3030,"state":3044,"title":3082,"updated_at":3083,"url":3084,"score":3085},"### Description\r\n\r\nis there an intellisense / autocomplete options for NuxtUI components? i dont see any tooltip thing here when i type...\r\n\r\n",[3080],{"name":3069,"color":3070},2177,"is there no INTELLISENSE / AUTO COMPLETE for typing?","2024-11-12T09:28:56Z","https://github.com/nuxt/ui/issues/2177",0.73009455,{"description":3087,"labels":3088,"number":3091,"owner":3029,"repository":3030,"state":3044,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### Environment\n\n-Macbook Apple M2 Pro, macOS 15.3\nOn your site, when you select a date in the select by double-clicking on the date, the popover breaks and the calendar flies to the top corner of the page.\n\nhttps://github.com/user-attachments/assets/a1fa58d1-1f82-464e-8af9-fe044a6cf65b\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nopen site https://ui3.nuxt.dev/components/calendar#as-a-datepicker and try to select date\n\n### Description\n\nwhen you select date my click on date and second click in this date will brake popover, and calendar move top top left corner\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3089,3090],{"name":3040,"color":3041},{"name":3023,"color":3024},3283,"Calendar as a Datepicker","2025-02-10T14:13:24Z","https://github.com/nuxt/ui/issues/3283",0.7308463,{"description":3097,"labels":3098,"number":3105,"owner":3029,"repository":3030,"state":3044,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: modules, compatibilityDate, devtools, css, ui, devServer, future, telemetry, hooks, eslint\n- Runtime Modules: @nuxt/eslint@0.6.2, @nuxt/ui-pro@3.0.1, nuxt-jsonld@2.1.0, @pinia/nuxt@0.10.1\n- Build Modules: -\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt v3.16.1\nui-pro v3.0.1\n\n### Reproduction\n\nWhen I add the following to my nuxt.config.ts:\n\n```ts\n{\n ui: {\n colorMode: false\n }\n}\n```\n\n...then `npx nuxi typecheck` fails with 8 errors.\n\n```\n[...snip]\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n18 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\n\nFound 8 errors in 8 files.\n\nErrors Files\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSwitch.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/content/ContentSearch.vue:89\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/DashboardSearch.vue:57\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10\n\n ERROR Process exited with non-zero status (2)\n```\n\n### Description\n\nI think that there probably needs to be a stub export set up in all cases? Or these files should not be gathered by the typechecking script?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3099,3100,3101,3104],{"name":3040,"color":3041},{"name":3023,"color":3024},{"name":3102,"color":3103},"pro","5BD3CB",{"name":3026,"color":3027},3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.73681444,{"description":3111,"labels":3112,"number":3115,"owner":3029,"repository":3116,"state":3044,"title":3117,"updated_at":3118,"url":3119,"score":3120},"**General**\n- [x] On both logo sliders, it shouldn't move while mouse over\n- [ ] Slide-in apparitions on scroll for images & texts in sections\n\n- [x] pb-10 is enough spacing between title of section & content\n- [x] I don't know if it's intended but every bold text in sections is \"Focus on the big picture\"\n\n**Hero**\n\n- [ ] Description should be => line-height: 170%\n\n- [x] [Lightmode] Gem aspect should be better\n- [x] @R-mooon => Increase mesh subdivision in blender in order to make gem angles even smoother + try compress hdr even more \n- [ ] [Mobile] @R-mooon will make a specific design [Edit : @Flosciante => see comments]\n\n**Sections**\n\n- [ ] [Darkmode] Description text should be one gray lighter\n\n**Framework**\n- [x] Play icon is missing over the video\n- [ ] [Darkmode] Overlay is too bright when modal is open\n\n**Projects**\n\n- [x] Cursor should be at end of content\n\n- [ ] Is it possible to make the animation in revert also ? I mean make \"droe\" & \"atinux\" deleting the content in order to make the animation infinite\n\n\n- [ ] [Darkmode] \"Read more\" on the card is too light \n\n**Community**\n\n- [x] See the nuxters have to look like the links in sections\n\n**Partners**\n\n- [ ] @R-mooon needs to rework some partners logo to make them display well\n\n**Newsletter**\n\n- [x] Less margin-top & more margin-bottom (should have nearly the same space up & down)\n\n- [ ] Update background gradient [Edit : Flo is gonna make a mouse interaction instead]\n\n**Suggestions**\n\n- [ ] Make this \"My account\" button follow content width (and the actual width being the max-w)\n- [ ] Why not making account name white and have a background color on hover, at the moment i find the right part of header very grey-ish, i feel like the name is disabled\n\n\n- [x] Try make logo banner fit inside container to see if it looks more consistent [Edit : Cancelled, tested and it looks worse than before]\n\n",[3113],{"name":3020,"color":3114},"1ad6ff",712,"nuxt.com","[Home] Design feedbacks","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/712",0.73930496,{"description":3122,"labels":3123,"number":3130,"owner":3029,"repository":3029,"state":3044,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: bun@1.0.26\r\n- Builder: -\r\n- User Config: extends, modules, runtimeConfig, pinia, image, routeRules, app, i18n, security\r\n- Runtime Modules: @nuxt/ui@^2.14.1\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-4rnoff-spccez?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nUsing tabs as shown in the docs throws multiple warnings:\r\n\r\n> [Vue warn] Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided. Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3124,3127],{"name":3125,"color":3126},"3.x","29bc7f",{"name":3128,"color":3129},"upstream","E8A36D",25943,"Tabs throw warning: Computed is still dirty after getter evaluation","2024-02-25T13:24:32Z","https://github.com/nuxt/nuxt/issues/25943",0.74007535,{"description":3136,"labels":3137,"number":3142,"owner":3029,"repository":3029,"state":3044,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### Environment\n\nchunk-AVXPPHYR.js?v=2403c5ec:1489 [Vue warn]: Hydration children mismatch on \u003Cdiv style=\"padding:50px;\" data-v-inspector=\"pages/about.vue:2:5\">…\u003C/div> \r\nServer rendered element contains more child nodes than client vdom. \r\n at \u003CAbout onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/about\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/about', hash: '', query: {…}, name: 'about', path: '/about', …} ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\n\n### Reproduction\n\nchunk-AVXPPHYR.js?v=2403c5ec:1489 [Vue warn]: Hydration children mismatch on \u003Cdiv style=\"padding:50px;\" data-v-inspector=\"pages/about.vue:2:5\">…\u003C/div> \r\nServer rendered element contains more child nodes than client vdom. \r\n at \u003CAbout onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/about\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/about', hash: '', query: {…}, name: 'about', path: '/about', …} ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\n\n### Describe the bug\n\nchunk-AVXPPHYR.js?v=2403c5ec:1489 [Vue warn]: Hydration children mismatch on \u003Cdiv style=\"padding:50px;\" data-v-inspector=\"pages/about.vue:2:5\">…\u003C/div> \r\nServer rendered element contains more child nodes than client vdom. \r\n at \u003CAbout onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/about\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/about', hash: '', query: {…}, name: 'about', path: '/about', …} ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n\r\n这个bug 有什么办法解决吗?请帮助我 非常感谢,在文档里面没有找到类似的说明\n\n### Additional context\n\nchunk-AVXPPHYR.js?v=2403c5ec:1489 [Vue warn]: Hydration children mismatch on \u003Cdiv style=\"padding:50px;\" data-v-inspector=\"pages/about.vue:2:5\">…\u003C/div> \r\nServer rendered element contains more child nodes than client vdom. \r\n at \u003CAbout onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/about\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/about', hash: '', query: {…}, name: 'about', path: '/about', …} ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C undefined > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n\n### Logs\n\n_No response_",[3138,3139],{"name":3125,"color":3126},{"name":3140,"color":3141},"pending triage","E99695",25383,"vue3+nuxt3 出现的bug","2024-01-23T08:06:26Z","https://github.com/nuxt/nuxt/issues/25383",0.7411016,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPJzoc5QKzuAtQsBi74_F0aTu83qmLCjPnoya8LvLE3k":-1},"/nuxt/ui/3347"]