\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2878,2881],{"name":2879,"color":2880},"bug","d73a4a",{"name":2882,"color":2883},"triage","ffffff",3583,"ui","Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.6577992,{"description":2891,"labels":2892,"number":2893,"owner":2868,"repository":2894,"state":2870,"title":2895,"updated_at":2896,"url":2897,"score":2898},"Hi, hope you're all doing well!\r\n\r\nI ran into an issue using `@nuxt/ui` which now uses `@nuxt/icon` under the hood (used to work when icon collection names could be specified as nuxt/ui module args even tho i had to add a ts-ignore as it wasn't referenced in the enum type), I am using a custom iconify collection i built which goes by\r\n```json filename=\"package.json\"\r\n\"@iconify-json/as\": \"npm:@my-org-name/my-icon-collection@^0.0.2\",\r\n```\r\nin my package.json which isn't referenced in\r\nhttps://github.com/nuxt/icon/blob/main/src/collection-names.ts\r\nthus making it uncompatible with `@nuxt/icon`.\r\nI think the issue comes from the usage of `collectionNames` there (as it seems we only values are only read if they are part of the underlying array):\r\nhttps://github.com/nuxt/icon/blob/cc14fe49b19fce023ba6f049984317492043c9ab/src/collections.ts#L72-L73\r\nWould it be possible further expand the compatibility to include custom collections? (and eventually check if these are installed print an error on the logger if it isn't the case)\r\n\r\nNOTE: It seems to work when using this configuration (note SSR isn't set to false which is a constraint I have)\r\n```ts filename=\"nuxt.config.ts\"\r\nicon: {\r\n serverBundle: {\r\n collections: [\r\n 'as'\r\n ]\r\n }\r\n}\r\n```\r\nbut it the specific project is using this piece of config\r\n```ts filename=\"nuxt.config.ts\"\r\n[...]\r\nssr: false, // SSR forced to false\r\nicon: {\r\n provider: 'server', // Tried with and without this\r\n serverBundle: {\r\n collections: [\r\n 'as'\r\n ]\r\n }\r\n}\r\n```\r\n\r\nSorry if it is a bit long, I tried my best to keep it pleasant to read though. Thank you in advance! :)\r\n",[],252,"icon","Custom collections aren't recognised","2024-09-10T10:57:04Z","https://github.com/nuxt/icon/issues/252",0.688374,{"description":2900,"labels":2901,"number":2906,"owner":2868,"repository":2885,"state":2870,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI have a use case where I'd like this value to be `false`. Would it be possible to make this configurable?\n\n### Additional context\n\nhttps://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue#L30",[2902,2905],{"name":2903,"color":2904},"enhancement","a2eeef",{"name":2882,"color":2883},2710,"[CommandPalette] Make the `hold` prop of ComboboxOptions configurable","2024-12-06T22:38:02Z","https://github.com/nuxt/ui/issues/2710",0.69360775,{"description":2912,"labels":2913,"number":2916,"owner":2868,"repository":2885,"state":2870,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @sidebase/nuxt-auth@0.9.4, @nuxt/image@1.8.1\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io\n\n\n### Description\n\nThis is the code from stackblitz, but it illustrates the problem (preview above). Basically, I am following the instructions for setting certain columns to have a maximum width, but UTable doesn't seem to be following them. If it's an implementation issue on my part, my apologies, but I've stared at this for a couple of days and I can't find any reason why I can't get the cell data to wrap.\n\n\u003Ctemplate>\n \u003CUContainer class=\"min-h-screen flex items-center\">\n \u003CUCard\n class=\"flex-1\"\n :ui=\"{\n background: 'bg-gray-50 dark:bg-gray-800/50',\n ring: 'ring-1 ring-gray-300 dark:ring-gray-700',\n divide: 'divide-y divide-gray-300 dark:divide-gray-700',\n header: { base: 'font-bold' },\n }\"\n >\n \u003Ctemplate #header> Welcome to the playground! \u003C/template>\n\n \u003Cp class=\"text-gray-500 dark:text-gray-400\">Try your components here!\u003C/p>\n \u003C/UCard>\n \u003CUTable :rows=\"data\" :columns=\"columns\">\n \u003C/UTable>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup>\nconst columns = [\n {\n key: \"name\",\n label: \"Name\",\n sortable: true,\n },\n {\n key: \"address\",\n label: \"Address\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },\n {\n key: \"description\",\n label: \"Description\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },];\n\n const data = [\n {\n name: \"Line 1 Name\",\n address: \"Line 1 - 123 Sesame Street, Anytown USA\",\n description: \"This is a relatively short description, but should probably wrap in any case.\"\n },\n {\n name: \"Line 2 Name\",\n address: \"Line 2 - a really really really really really really really really really really Loong address\",\n description: \"This is a really really really really really really really really really really really really really long description, and needs to be wrapped.\"\n}\n ]\n\u003C/script>\n\n\u003Cstyle>\nbody {\n @apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;\n}\n\u003C/style>\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2914,2915],{"name":2879,"color":2880},{"name":2882,"color":2883},2856,"UTable cell content refuses to wrap","2024-12-06T23:25:36Z","https://github.com/nuxt/ui/issues/2856",0.699205,{"description":2922,"labels":2923,"number":2924,"owner":2868,"repository":2894,"state":2870,"title":2925,"updated_at":2926,"url":2927,"score":2928},"Hello\nIn your playground where is a possibility to set `mode: css` and image span will have `--svg` variable which could be used as value for `mask-image`\nIn `getIconCss` method there is property `mode: mask` which can return this variable\nhttps://iconify.design/docs/libraries/utils/get-icon-css.html#geticoncss\n\nIn latest `@nuxt/icon` svg content in `mode: css` always uses as `background-image` value/\n\nCan you add property which allows to get `--svg` variable which could be used as value for `mask-image`?",[],367,"Use css icon data as mask-image","2025-03-12T12:15:51Z","https://github.com/nuxt/icon/issues/367",0.7015584,{"description":2930,"labels":2931,"number":2938,"owner":2868,"repository":2885,"state":2939,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[2932,2935],{"name":2933,"color":2934},"question","d876e3",{"name":2936,"color":2937},"v3","49DCB8",2772,"closed","@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.64947075,{"description":2945,"labels":2946,"number":2949,"owner":2868,"repository":2885,"state":2939,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2947,2948],{"name":2879,"color":2880},{"name":2936,"color":2937},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.66088635,{"description":2955,"labels":2956,"number":2959,"owner":2868,"repository":2885,"state":2939,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Environment\n\n\n\nI get this error anytime I try and use \u003CUInput /> even without any other code.\n\n### Version\n\nv3.0.0-alpha.5\n\n### Reproduction\n\n`\u003Ctemplate>\n \u003CUContainer>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Code\" name=\"Code\"\n >\u003CUInput v-model=\"state.code\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod';\nimport type { FormSubmitEvent } from '#ui/types';\n\nconst supabase = useSupabaseClient();\nconst toast = useToast();\n\n//Form\nconst schema = z.object({\n code: z.string().min(3),\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n code: undefined,\n});\n\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({\n title: 'Success',\n description: 'The form has been submitted.',\n color: 'success',\n });\n console.log(event.data);\n}\n\u003C/script>\n`\n\n### Description\n\nUInput causes an error\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2957,2958],{"name":2879,"color":2880},{"name":2936,"color":2937},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.6681934,{"description":2965,"labels":2966,"number":2968,"owner":2868,"repository":2885,"state":2939,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nThank you in advance for your help!\n\nWe’re using Nuxt UI Pro for styling in our application, which primarily uses a language other than English. When working with the `SelectMenu` component and enabling the `multiple` prop, the displayed value shows \"1 selected\" (or similar text like \"{x-number} selected\"). Instead, we’d like to display the actual selected value(s) of the SelectMenu, like when NOT using the `multiple` prop, if just one item is selected. And any more than that, we need to display the \"{x-number} selected\" it in our language, not English.\n\nDo I need to create a custom wrapper component for this, or is there a simpler way to customize the displayed text? I’m not that deep on frontend development and manipulating package classes in Nuxt 3, so I’d appreciate guidance on how to approach this issue.\n\nI’ve reviewed the source code here: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue but couldn’t figure out how to achieve this.\n\nI see the code where the const for the label is generated, but whats the best approach to change that for us?\n\n```\n const label = computed(() => {\n if (!props.modelValue) return null\n\n if (Array.isArray(props.modelValue) && props.modelValue.length) {\n return `${props.modelValue.length} selected`\n } else if (['string', 'number'].includes(typeof props.modelValue)) {\n return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue\n }\n\n return accessor(props.modelValue as Record\u003Cstring, any>, props.optionAttribute)\n })\n```\n\nAny advice or direction would be greatly appreciated!",[2967],{"name":2933,"color":2934},2867,"How can I change the \u003CUSelectMenu> to display the value of a selected item, instead of \"1 selected\" when adding the multiple prop","2024-12-09T11:50:53Z","https://github.com/nuxt/ui/issues/2867",0.6755013,["Reactive",2974],{},["Set"],["ShallowReactive",2977],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRFp5g91fjkVd04KVSdHsTd2q41KXPASju9u7bk_mHqM":-1},"/nuxt/test-utils/835"]