\n```",[3139],{"name":3140,"color":3141},"question","d876e3",4849,"nuxt","ui","open","Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.72542584,{"description":3151,"labels":3152,"number":3159,"owner":3143,"repository":3144,"state":3145,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nIt's currently not possible to disable trailing icons globally or in items for items with children. \nI would like to implement a new prop: disableTrailingIcon(s).\n\nShould this prop appear in NavigationMenuItem too?\n\n### Additional context\n\n_No response_",[3153,3156],{"name":3154,"color":3155},"enhancement","a2eeef",{"name":3157,"color":3158},"triage","ffffff",4847,"[NavigationMenu] disabling trailing Icons globally and/or in NavigationMenuItems.","2025-08-29T20:09:39Z","https://github.com/nuxt/ui/issues/4847",0.72833747,{"description":3165,"labels":3166,"number":3171,"owner":3143,"repository":3144,"state":3145,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### 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_",[3167,3168],{"name":3154,"color":3155},{"name":3169,"color":3170},"v3","49DCB8",3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.7397668,{"description":3177,"labels":3178,"number":3180,"owner":3143,"repository":3181,"state":3145,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### 🆒 Your use case\r\n\r\nOut-of-the-box Nuxt Scripts won't provide any significant performance gains for most people, the only performance improvement is loading third-party scripts as Nuxt app hydrates, instead of beforehand, which may help with reducing blocking time.\r\n\r\nWe provide some options that can solve these performance issues for third-party scripts through [delaying scripts until they're needed](https://scripts.nuxt.com/docs/guides/script-triggers) or [Facade components](https://scripts.nuxt.com/docs/guides/facade-components).\r\n\r\nHowever, some users will _need_ to load these scripts as quickly as possible without slowing down the Nuxt app hydration. This is the ideal use case for web workers (Partytown).\r\n\r\nRelated https://github.com/nuxt/scripts/issues/56\r\n\r\n### 🆕 The solution you'd like\r\n\r\nWe should be able to provide a simple flag to the `useScript` composable that will offload it to the webworker, no other functionality should change.\r\n\r\nUnder the hood, this will use Partytown. We will either integrate directly with https://github.com/nuxt-modules/partytown or write bespoke code.\r\n\r\n```ts\r\nuseScript('/script.js', {\r\n webworker: true,\r\n})\r\n```\r\n\r\nAll other functionality should work the same.\r\n\r\n### 🔍 Alternatives you've considered\r\n\r\n_No response_\r\n\r\n### ℹ️ Additional info\r\n\r\n_No response_",[3179],{"name":3154,"color":3155},182,"scripts","Add web worker support (Partytown)","2024-12-11T11:46:50Z","https://github.com/nuxt/scripts/issues/182",0.7446877,{"description":3187,"labels":3188,"number":3189,"owner":3143,"repository":3190,"state":3145,"title":3191,"updated_at":3192,"url":3193,"score":3194},"According to the [Vue-Iconify Docs](https://iconify.design/docs/icon-components/vue/transform.html#rotation) one can pass a `rotate` and `flip` Prop to transform the Icon, to display it in different orientations.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"ic:round-double-arrow\" size=\"26\" :rotate=\"flip && '2'\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst flip = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nWhile this works fine with nuxt-icon during development, it breaks in a Prod build. The transformations no longer get applied.\r\n\r\nIt would be great if nuxt-icon could also support these props, if possible. I'm open to help with this issue if someone could give me some pointers where to start.",[],138,"icon","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.7454774,{"description":3196,"labels":3197,"number":3201,"owner":3143,"repository":3144,"state":3145,"title":3202,"updated_at":3203,"url":3204,"score":3205},"### Description\n\n```\n\u003CUButton\n label=\"Github\"\n to=\"https://github.com/nuxt/ui/\"\n rel=\"noopener noreferrer\"\n/>\n```\nCurrently, `UButton` doesn't have a `rel` attribute, which is required for ... you know.\n\nAlso for some reason, it's already having `target=\"_blank\"` without me even adding it to the element (?)\n\n### Additional context\n\n_No response_",[3198,3199,3200],{"name":3154,"color":3155},{"name":3169,"color":3170},{"name":3157,"color":3158},4611,"Support for `rel` attributes for `\u003CUButton to=\"\"/>`","2025-07-27T05:16:45Z","https://github.com/nuxt/ui/issues/4611",0.74985784,{"description":3207,"labels":3208,"number":3212,"owner":3143,"repository":3144,"state":3213,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Description\n\nVisually equal `UNavigationMenu` has a `badge` prop but `UTabs` is missing this feature\n\n\u003Cimg width=\"685\" height=\"55\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/889b4d58-fecf-4358-9501-8adfa8609133\" />\n\n### Additional context\n\nOriginally implemented within #2627 but missing in v3\n\nYes it can be done be using a slot, but it would provide great DX to have the prop. ",[3209,3210,3211],{"name":3154,"color":3155},{"name":3169,"color":3170},{"name":3157,"color":3158},4548,"closed","Add badge option to UTabs","2025-07-21T14:55:28Z","https://github.com/nuxt/ui/issues/4548",0.7020338,{"description":3219,"labels":3220,"number":3229,"owner":3143,"repository":3144,"state":3213,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Description\n\nIt would be super helpful to have an optional `\u003Cspan>` inside some interactive components like the close button in `\u003CUSlideover>` or icon buttons like `\u003CUButton>` so we can target it with css to increase the touch area for mobile devises without messing up the visual layout\n\nI just watched this video from the TailwindCreator and he speaks about this topic here: https://www.youtube.com/watch?v=soFSSkf4oVY\n\n### why\ncurrently it's not really possible without workarounds\nfor example when I use something like this\n\n```vue\n\u003CUButton\n icon=\"i-lucide-menu\"\n color=\"white\"\n variant=\"ghost\"\n aria-label=\"Open menu\"\n class=\"md:hidden\"\n :ui=\"{ leadingIcon: 'size-7!' }\"\n @click=\"open = true\"\n/>\n```\n\nlooks clean but I can't increase the touch target to 48x48 unless I manually recreate the button content and wrap the icon with a span\nsame with the close button in `\u003CUSlideover>`\nthere's no way to make it more thumb-friendly out of the box\n\n### idea\nmaybe you could include an optional invisible span inside those components\nposition absolute\ncentered\nwe could then style it using `:ui`\nlike\n\n```js\n:ui=\"{ touch: 'size-12' }\"\n```\n\nor even a simple `touchTarget: true` option that adds a 48x48 span behind the icon\n\n### benefits\nbetter usability on mobile\nkeeps component usage clean\nno need for negative margins or layout hacks\nworks nicely with `pointer: coarse` media query\n\nthanks for all your great work with nuxt ui\nwould love to see this added\n\n\n\n### EDIT 1\n\nTo create the same button effect like in the video:\n\n \u003CUButton\n color=\"white\"\n variant=\"ghost\"\n aria-label=\"Open menu\"\n class=\"relative flex items-center justify-center p-0 md:hidden\"\n @click=\"open = true\"\n >\n \u003Cspan class=\"absolute size-12 pointer-coarse:hidden\"/>\n \u003CUIcon name=\"lucide:menu\" class=\"text-white size-7\" />\n \u003C/UButton>\n\nI think it's important that NuxtUI focus on the target touch recommendation of at least 44px x 44px ",[3221,3222,3223,3224,3227],{"name":3154,"color":3155},{"name":3169,"color":3170},{"name":3157,"color":3158},{"name":3225,"color":3226},"closed-by-bot","ededed",{"name":3228,"color":3226},"stale",3912,"Add optional touch target span inside interactive components like \u003CUSlideover> close button and \u003CUButton> icons","2025-08-12T02:12:40Z","https://github.com/nuxt/ui/issues/3912",0.70931447,{"description":3235,"labels":3236,"number":3241,"owner":3143,"repository":3144,"state":3213,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Description\n\nUse case: Dynamically loaded icons are forbidden, be it by security requirements or by a requirement to always work offline. Icons are instead defined as Vue components, be it with custom icon components, or by using [`unplugin-icons`](https://github.com/unplugin/unplugin-icons).\n\nIn case of a [`UButton`](https://ui.nuxt.com/components/button), I think you can just use `leading` and `trailing` slots. But I do not think there is a simple way of just replacing an icon in case of [`USlideover`](https://ui.nuxt.com/components/slideover)'s `closeIcon` -- there is only a slot named `close`.\n\n### Additional context\n\n_No response_",[3237,3238,3239],{"name":3154,"color":3155},{"name":3157,"color":3158},{"name":3240,"color":3170},"v4",4728,"Allow passing components as icons instead of strings","2025-09-01T10:04:35Z","https://github.com/nuxt/ui/issues/4728",0.73583686,{"description":3247,"labels":3248,"number":3252,"owner":3143,"repository":3144,"state":3213,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Description\n\nIn case we need to pass an image URL to any component with icons (for example `Button`), we currently need to use slots when they are available (which is not always the case, for example the input icon of `CommandPalette`). It would be helpful if the `Icon` component could accept an URL and use `#build/ui-image-component` instead.\n\nExample use case: allowing users to upload/set their own icons.\n\n\n\n### Additional context\n\n_No response_",[3249,3250,3251],{"name":3154,"color":3155},{"name":3169,"color":3170},{"name":3157,"color":3158},4030,"Allow image url for icons","2025-05-15T14:39:30Z","https://github.com/nuxt/ui/issues/4030",0.737779,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCYKKuHOjddPi4QJbPtn0R2DGbHV7oRPMEwDf4WB24wU":-1},"/nuxt/ui/4501"]