\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```",[1995,1998],{"name":1996,"color":1997},"bug","d73a4a",{"name":1999,"color":2000},"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.66145307,{"description":2008,"labels":2009,"number":2015,"owner":1985,"repository":2002,"state":1987,"title":2016,"updated_at":2017,"url":2018,"score":2019},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@11.1.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, @vueuse/nuxt@13.0.0, @nuxtjs/i18n@9.3.1, nuxt-security@2.2.0, @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wonderful-violet-jrsqy9\n\n### Description\n\nI get a type error when using an array of strings for the `variant` key inside of `compoundVariants´:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n select: {\n compoundVariants: [\n {\n color: \"primary\",\n variant: [\"outline\", \"subtle\"],\n class: \"data-[state='open']:ring\",\n },\n ],\n },\n },\n});\n```\n\n```\napp/app.config.ts:11:11 - error TS2322: Type 'string[]' is not assignable to type 'string'.\n\n11 variant: [\"outline\", \"subtle\"],\n ~~~~~~~\n```\n\nIt does work tho, so its only a type issue I think.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2010,2011,2014],{"name":1996,"color":1997},{"name":2012,"color":2013},"v3","49DCB8",{"name":1999,"color":2000},3579,"Type error in app config `compoundVariants`","2025-03-16T14:04:52Z","https://github.com/nuxt/ui/issues/3579",0.6731127,{"description":2021,"labels":2022,"number":2023,"owner":1985,"repository":2024,"state":1987,"title":2025,"updated_at":2026,"url":2027,"score":2028},"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.6901472,{"description":2030,"labels":2031,"number":2041,"owner":1985,"repository":2042,"state":1987,"title":2043,"updated_at":2044,"url":2045,"score":2046},"Hey, firstly thank you for making this plugin, it looks very useful :)\r\n\r\nRunning this module seems to run the whole nuxt environment, including the plugins, and we have a plugin that makes a api call. We normally just mock the module where we import the api function but it doesn't seem to work in this case. For example:\r\n```\r\n// somePlugin.ts\r\nimport { fetchProducts } from \"~/service/products\";\r\n\r\nexport default defineNuxtPlugin(async () => {\r\n const products = fetchProducts();\r\n // do something with the products\r\n});\r\n```\r\n\r\n```\r\n// SomeComponent.nuxt.spec.js\r\nimport { describe, it, expect, vi } from \"vitest\";\r\nimport { shallowMount } from \"@vue/test-utils\";\r\nimport SomeComponent from \"../SomeComponent.vue\";\r\n\r\n// trying to mock the products service so that the real api doesn't get called during the plugins\r\nvi.mock(\"~/service/products\");\r\n\r\ndescribe(\"SomeComponent\", async () => {\r\n it(\"Is a Vue instance\", () => {\r\n const wrapper = shallowMount(SomeComponent);\r\n expect(wrapper.vm).toBeTruthy();\r\n });\r\n});\r\n```\r\n\r\nI assume these mocks only work for the component that we are testing and not for the plugins in the nuxt environment for example. Do you have a suggestion about how to solve this?",[2032,2035,2038],{"name":2033,"color":2034},"documentation","0075ca",{"name":2036,"color":2037},"enhancement","a2eeef",{"name":2039,"color":2040},"vitest-environment","b60205",544,"test-utils","mocking plugins used within nuxt","2024-07-23T12:17:21Z","https://github.com/nuxt/test-utils/issues/544",0.70068085,{"description":2048,"labels":2049,"number":2050,"owner":1985,"repository":2024,"state":1987,"title":2051,"updated_at":2052,"url":2053,"score":2054},"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.7031525,{"description":2056,"labels":2057,"number":2060,"owner":1985,"repository":2002,"state":1987,"title":2061,"updated_at":2062,"url":2063,"score":2064},"### 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",[2058,2059],{"name":2036,"color":2037},{"name":1999,"color":2000},2710,"[CommandPalette] Make the `hold` prop of ComboboxOptions configurable","2024-12-06T22:38:02Z","https://github.com/nuxt/ui/issues/2710",0.70629925,{"description":2066,"labels":2067,"number":2070,"owner":1985,"repository":2002,"state":2071,"title":2072,"updated_at":2073,"url":2074,"score":2075},"### 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```",[2068,2069],{"name":1996,"color":1997},{"name":2012,"color":2013},3513,"closed","Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.6621641,{"description":2077,"labels":2078,"number":2083,"owner":1985,"repository":2002,"state":2071,"title":2084,"updated_at":2085,"url":2086,"score":2087},"### 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```",[2079,2082],{"name":2080,"color":2081},"question","d876e3",{"name":2012,"color":2013},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.66290826,{"description":2089,"labels":2090,"number":2093,"owner":1985,"repository":2002,"state":2071,"title":2094,"updated_at":2095,"url":2096,"score":2097},"### 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_",[2091,2092],{"name":1996,"color":1997},{"name":2012,"color":2013},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.66909873,["Reactive",2099],{},["Set"],["ShallowReactive",2102],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"RFp5g91fjkVd04KVSdHsTd2q41KXPASju9u7bk_mHqM":-1},"/nuxt/test-utils/835"]