\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_",[3139,3142],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",3307,"nuxt","ui","open","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.7430734,{"description":3154,"labels":3155,"number":3161,"owner":3146,"repository":3147,"state":3148,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3156,3157,3158],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3159,"color":3160},"triage","ffffff",4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.7488688,{"description":3167,"labels":3168,"number":3172,"owner":3146,"repository":3146,"state":3148,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Describe the feature\n\nhttps://github.com/nuxt/nuxt/issues/20500\n\nhttps://github.com/nuxt/nuxt/pull/31039\n\nAdd a composable to check `href` in `nuxtLink.allowlist` and return a custom rel by `getCustomRel`.\n\nAnd `allowlist` is default by `nuxt.config/defaults.nuxtLink.allowlist`\n\nAnd `externalRelAttribute` is default by `nuxt.config/defaults.nuxtLink.externalRelAttribute`\n\nIf `href` in `allowlist`, `getCustomRel` will return the custom `externalRelAttribute`, if not will return the default set by `defaults.nuxtLink.externalRelAttribute`.\n\n```vue\n\u003Ctemplate>\n \u003CNuxtLink :rel=\"getCustomRel(href)\" to=\"https://nuxt.com\">test\u003C/NuxtLink>\n\u003C/template>\n\u003Cscript setup>\n const { allowlist, checkUrlInAllowlist, getCustomRel } = useLinkAllowlist({\n allowlist: ['nuxt.com', '.nuxt.com'],\n externalRelAttribute: 'noopener'\n })\n // checkUrlInAllowlist('https://nuxt.com') -> true\n // checkUrlInAllowlist('/test') -> false\n // getCustomRel('https://nuxt.com') -> noopener\n // getCustomRel('/test') -> undefined\n // getCustomRel('/test', { force: true }) -> noopener\n\n\u003C/script>\n```\n\nWhat do you think? Thank you for your feedback.❤\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3169],{"name":3170,"color":3171},"pending triage","E99695",31417,"Add useLinkAllowlist composable","2025-04-07T05:57:11Z","https://github.com/nuxt/nuxt/issues/31417",0.7572319,{"description":3178,"labels":3179,"number":3181,"owner":3146,"repository":3146,"state":3148,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Describe the feature\n\nIt would be nice to have ability to set `target` attribute to `_blank` for all external links by default. In my experience it's very common case. Prop `externalTargetAttribute` for `NuxtLink` which works same as existent `externalRelAttribute` prop could be easiest and convient solution.\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3180],{"name":3170,"color":3171},30393,"`externalTargetAttribute` prop for `NuxtLink`","2024-12-27T16:01:50Z","https://github.com/nuxt/nuxt/issues/30393",0.7663756,{"description":3187,"labels":3188,"number":3193,"owner":3146,"repository":3147,"state":3148,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Description\n\nDiscovering **Nuxt UI** and **Nuxt UI Pro** has been one of the highlights of 2024 for me. These libraries have saved me countless hours while delivering polished, tested, and consistent components that elevate the aesthetic and functional quality of my projects. I admire the exceptional work being done by @benjamincanac and the team, particularly with the ambitious mission of rewriting the library to embrace both TailwindCSS v4 and Reka UI within Nuxt UI v3.\n\nOne of the standout features in v3 has been the integration of **TanStack Tables** into the `UTable` component, adding to tables many new features and possibilities. However, after some usage in real-world scenarios, I’ve noticed a gap: a wider variety of input components.\n\nI know that v3 is still in alpha, but I’d like to propose a new initiative for a future release, which I’m calling \"**The Inputs Update**\". This RFP could focus on identifying and implementing input components that would further enhance the library’s usability and versatility.\n\nAdditionally, this aligns with a prior suggestion to categorize form-related components separately within the documentation (#3019).\n\n## New Components\n\n- [ ] **`UInputCurrency`**\nWhile `UInputNumber` provides basic formatting options, a dedicated `UInputCurrency` component would offer enhanced functionality for handling monetary inputs, especially in scenarios requiring localized formatting.\n\n _Related: #1704_\n\n- [ ] **`UInputColor`**\nCurrently, there is an [example](https://ui3.nuxt.dev/getting-started#as-a-color-chooser) in `UColorPicker`, but it feels verbose and lacks certain key features, such as a text input for users to paste HEX or RGB values. \u003Cbr>\u003Cimg width=\"168\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3c11e311-aaa0-4db1-995f-80b15f04ceb7\" />\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3189,3192],{"name":3190,"color":3191},"feature","A27AF6",{"name":3143,"color":3144},3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.7760905,{"description":3199,"labels":3200,"number":3204,"owner":3146,"repository":3147,"state":3205,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Description\n\nAt the moment InputNumber does not react in any way to the presence of ButtonGroup.\n\n\n\n### Additional context\n\n_No response_",[3201,3202,3203],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3159,"color":3160},4155,"closed","InputNumber ButtonGroup support","2025-05-15T12:30:59Z","https://github.com/nuxt/ui/issues/4155",0.7553331,{"labels":3211,"number":3226,"owner":3146,"repository":3146,"state":3205,"title":3227,"updated_at":3228,"url":3229,"score":3230},[3212,3214,3217,3220,3223],{"name":3140,"color":3213},"8DEF37",{"name":3215,"color":3216},"good first issue","fbca04",{"name":3218,"color":3219},"types","2875C3",{"name":3221,"color":3222},"3.x","29bc7f",{"name":3224,"color":3225},"dx","C39D69",15148,"Autocompletion for the `target` attribute of the `\u003CNuxtLink>` component","2023-01-19T17:45:16Z","https://github.com/nuxt/nuxt/issues/15148",0.75590503,{"description":3232,"labels":3233,"number":3236,"owner":3146,"repository":3147,"state":3205,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### Description\n\nWe'd like to use `data-testid` on our elements so we can target them in tests. But doing this for example:\n`\u003CUButton data-testid=\"test\" />`\nDoesn't result in the test id being applied.\n\nThis can probably be fixed by enabling (some more) fallthrough attributes.\nhttps://vuejs.org/guide/components/attrs\n\nThanks for the work on this project!\n\n### Additional context\n\n_No response_",[3234,3235],{"name":3140,"color":3141},{"name":3159,"color":3160},4679,"Allow Fallthrough Attributes","2025-08-17T13:45:19Z","https://github.com/nuxt/ui/issues/4679",0.75863695,{"description":3242,"labels":3243,"number":3247,"owner":3146,"repository":3147,"state":3205,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Description\n\nThe [popover](https://ui.nuxt.com/components/popover) uses the content of the default slot to create a trigger, but there is no way to provide a custom anchor. A `\u003Ctemplate #anchor>` slot for this purpose would be great.\n\n```html\n\u003CUFormField label=\"name\" name=\"name\">\n \u003CUPopover :open=\"isAutoCompleteOpen\">\n \u003Ctemplate #anchor>\n \u003CUInput v-model=\"state.name\" />\n \u003C/template>\n \u003Ctemplate #content>\n \u003CPlaceholder class=\"size-48 m-4 inline-flex\" />\n \u003C/template>\n \u003C/UPopover>\n\u003C/UFormField>\n```\n\nMy use case is building an autocomplete for a text input. The `InputMenu` is not suitable because the dropdown is too intrusive.\n\n### Additional context\n\n_No response_",[3244,3245,3246],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3159,"color":3160},4013,"Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.7589884,{"description":3253,"labels":3254,"number":3258,"owner":3146,"repository":3147,"state":3205,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Description\n\nWhen a dot is selected in the UCarousel component, we get no attribute in the element : \n\n- no data-selected\n- no aria-current for accessibility\n\nSince there is no dots/dot slot, we have no possibility to style these dots when selected or not. The only difference is the bg style being either bg-accented or bg-inverted, which is overwritten if we actually style the background.\n\nIs there any way to add these attributes ? At least for accessibility.\n\n### Additional context\n\n_No response_",[3255,3256,3257],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3159,"color":3160},4403,"UCarousel selected dot has no attribute","2025-07-07T10:09:58Z","https://github.com/nuxt/ui/issues/4403",0.7611316,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpXX9V4Je6vxocsmR535PAKOHtdl6QWjrRDgx_NNVRNM":-1},"/nuxt/ui/4611"]