\n\u003C/template>\n```\n\nSelectMenu does not display the label associated to the falsy value \"0\":\n\n\nThe list is populated with both values:\n\n\nThe label associated to the truthy value \"1\" is displayed as expected:\n\n\n### Description\n\nAll falsy values are not displayed anymore since v2.20.0 due to the rework of the computed `label` in the SelectMenu component.\n\nHere is the definition of this computed in `/src/runtime/components/form/SelectMenu.vue`:\n```\nconst 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\n**The component should treat `0`, `\"\"` and `false` as \"acceptable\" labelled values.**\n\nI believe the first condition should be either :\n`if(props.modelValue == null) return null` \nOr:\n`if(props.modelValue === null || props.modelValue === undefined) return null` \n\n### Additional context\n\nI will try to find some time to create a pull request if this is accepted as an issue. Not sure I can manage to do it short-term though.\n\n### Logs\n\n```shell-script\n\n```",[1984,1987],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"triage","ffffff",3132,"nuxt","ui","open","SelectMenu label not displayed for falsy values","2025-01-17T15:36:46Z","https://github.com/nuxt/ui/issues/3132",0.717182,{"description":1999,"labels":2000,"number":2001,"owner":1991,"repository":2002,"state":1993,"title":2003,"updated_at":2004,"url":2005,"score":2006},"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.71876603,{"description":2008,"labels":2009,"number":2013,"owner":1991,"repository":2002,"state":1993,"title":2014,"updated_at":2015,"url":2016,"score":2017},"How can I disable icon caching? I'm doing svg animation and I need hmr when changing an svg file.\r\n\r\nhttps://stackblitz.com/edit/nuxt-icon-playground-mjfbfn?file=assets%2Ficons%2Fnuxt-icon.svg\r\nTry changing the fill attribute of the svg file and save it",[2010],{"name":2011,"color":2012},"question","d876e3",160,"how to disable svg caching","2024-12-21T19:58:04Z","https://github.com/nuxt/icon/issues/160",0.72900593,{"description":2019,"labels":2020,"number":2022,"owner":1991,"repository":1992,"state":1993,"title":2023,"updated_at":2024,"url":2025,"score":2026},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nHow can i use [Zod](https://zod.dev/) to validate an [UInput file field](https://ui.nuxt.com/components/input#type)? \n\nLet's say you have the following code:\n(I found the example over [here](https://blog.stackademic.com/upgrade-your-full-stack-form-validation-with-zod-and-react-hook-form-in-next-js-107b014628a3).)\n\n```vue\n\u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\">\n\n \u003CUFormGroup name=\"picture\" label=\"Picture\">\n \u003CUInput v-model=\"state.picture\" type=\"file\" @change=\"onChangeFile\"/>\n \u003C/UFormGroup>\n\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n\n\u003C/UForm>\n```\n\n```ts\n\u003Cscript setup lang=\"ts\">\n import { z } from 'zod';\n\n const state = reactive({\n picture: undefined,\n })\n\n const schema = z.object({\n picture: z.custom\u003CFileList>()\n .transform((val) => {\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n })\n .superRefine((file, ctx) => {\n if (!(file instanceof File)) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n fatal: true,\n message: 'Not a file',\n });\n return z.NEVER;\n }\n if (file.size > 5 * 1024 * 1024) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'Max file size allowed is 5MB',\n });\n }\n if (\n !['image/jpeg', 'image/png', 'image/webp', 'image/jpg'].includes(\n file.type\n )\n ) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'File must be an image (jpeg, jpg, png, webp)',\n });\n }\n })\n });\n\n type Schema = z.infer\u003Ctypeof schema>;\n\n async function onSubmit (event: FormSubmitEvent\u003CSchema>) {\n console.log(event.data);\n }\n\u003C/script>\n```\n\nAs aspected the following onChange function logs a FileList\n\n```ts\nfunction onChangeFile(event: Event) {\n console.log(event)\n}\n```\n\nBut when I log val in the transform function of Zod\n\n```ts\n.transform((val) => {\n console.log(val);\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n})\n```\n\nI get a string like this:\n\n```\nC:\\fakepath\\Screenshot 2024-10-25 at 10.26.36.png\n```\n\nCan someone please help me out, i'm looking for a few days now for a solution.",[2021],{"name":2011,"color":2012},2462,"UInput with type='file', how to validate with Zod?","2025-03-10T01:51:18Z","https://github.com/nuxt/ui/issues/2462",0.73307765,{"description":2028,"labels":2029,"number":2034,"owner":1991,"repository":1992,"state":1993,"title":2035,"updated_at":2036,"url":2037,"score":2038},"### 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",[2030,2033],{"name":2031,"color":2032},"enhancement","a2eeef",{"name":1988,"color":1989},2710,"[CommandPalette] Make the `hold` prop of ComboboxOptions configurable","2024-12-06T22:38:02Z","https://github.com/nuxt/ui/issues/2710",0.7385231,{"description":2040,"labels":2041,"number":2047,"owner":1991,"repository":1992,"state":1993,"title":2048,"updated_at":2049,"url":2050,"score":2051},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, extends, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-qsqtmc?file=app.vue\n\n### Description\n\nLandingFAQ being built on top Accordion, when an item has a specified \"slot\" property, it should allow to display custom content in a corresponding slot. In my reproduction, you can see i have an faq item with a slot property equal to \"risks\". When using \u003Ctemplate #risks> risks \u003C/template> to show a specific content for that item, it works well in the accordion but is ignored in the LandingFAQ where the content property is shown instead.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2042,2043,2046],{"name":1985,"color":1986},{"name":2044,"color":2045},"pro","5BD3CB",{"name":1988,"color":1989},2057,"LandingFAQ component in Pro ignores the \"slot\" property of an item","2024-09-10T20:23:57Z","https://github.com/nuxt/ui/issues/2057",0.7413854,{"description":2053,"labels":2054,"number":2055,"owner":1991,"repository":2056,"state":1993,"title":2057,"updated_at":2058,"url":2059,"score":2060},"I've been using the new Nuxt website for a few months right now and wanted to provide some UX feedback based on my developer usage. For context I find myself using the docs multiple times a day.\n\n1. When searching the docs the text input field gets blocked from rendering which means there is a disconnect with what you're typing and what is displayed. I don't think the search results need to be instant but what you're typing in the text input should not be blocked. For example in the recording below I am constantly typing but it's really choppy and I finished typing a full 10 seconds before my typed text is actually completely displayed.\n\n\n\n2. The animations for the menus are cool but the artificial delay trips me up multiple times a day if I'm moving \"too fast\". I know where I want to go but frequently find myself needing to slow down or try again to get to the menu that I want because of the delay.\n\n\n\n_All if this feedback is in contrast to the previous website which I didn't have nearly as much friction using when navigation around and didn't feel like I was be throttled when navigating through the docs. If this was only a marketing page that would be fine but since it's also developer documentation I think it should be a bit more responsive._",[],1857,"nuxt.com","Laggy search and navigation feedback","2025-04-15T11:39:18Z","https://github.com/nuxt/nuxt.com/issues/1857",0.7480744,{"description":2062,"labels":2063,"number":2064,"owner":1991,"repository":2002,"state":1993,"title":2065,"updated_at":2066,"url":2067,"score":2068},"Nuxt Icon could not parse the SVG content for icon star \n\nlike this Svg\n`\u003Csvg class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\">\n\t\u003Cpath d=\"M31.652 93.206h33.401c1.44 2.418 3.077 4.663 4.93 6.692h-38.33v-6.692zm0-10.586h28.914a44.8 44.8 0 0 1-1.264-6.688h-27.65v6.688zm0-17.27H59.39c.288-2.286.714-4.532 1.34-6.687H31.65v6.687h.003zm53.913 44.84v5.85c0 2.798-2.095 5.075-4.667 5.075h-70.07c-2.576 0-4.663-2.277-4.663-5.075V31.26l23.22-20.96v22.25H17.16v6.688h18.39V6.688h45.348c2.576 0 4.667 2.277 4.667 5.066v20.009c1.987-.675 4.053-1.128 6.17-1.445v-18.56C91.738 5.28 86.874 0 80.902 0H31.15L0 28.118v87.917c0 6.48 4.859 11.759 10.832 11.759h70.07c5.974 0 10.837-5.27 10.837-11.759v-4.41c-2.117-.312-4.183-.765-6.17-1.435h-.004zM23.279 58.667h-7.96v6.688h7.96v-6.688zm-7.956 41.23h7.96v-6.691h-7.96v6.692zm7.956-23.96h-7.96v6.687h7.96v-6.688zm89.718-15.042l-4.896-4.07-12.447 17.613-11.19-9.305-3.762 5.311 16.091 13.38 16.204-22.929zM128 70.978c0-18.632-13.97-33.782-31.147-33.782-17.168 0-31.135 15.155-31.135 33.782 0 18.628 13.97 33.783 31.135 33.783 17.172 0 31.143-15.15 31.143-33.783H128zm-6.17 0c0 14.933-11.203 27.1-24.981 27.1-13.77 0-24.987-12.158-24.987-27.1 0-14.941 11.195-27.099 24.987-27.099 13.778 0 24.982 12.158 24.982 27.1z\"/>\n\u003C/svg>`",[],382,"Some local SVGs cannot be loaded","2025-03-30T07:43:06Z","https://github.com/nuxt/icon/issues/382",0.74957544,{"description":2070,"labels":2071,"number":2074,"owner":1991,"repository":2056,"state":2075,"title":2076,"updated_at":2077,"url":2078,"score":2079},"(reported on discord) you can see by hard-reloading https://nuxt.com/modules?q=svg, for example.\r\n\r\nprobably similar to https://github.com/nuxt/nuxt.com/issues/1417",[2072],{"name":1985,"color":2073},"ff281a",1455,"closed","query parameters on module page result in hydration mismatch","2025-03-24T22:03:27Z","https://github.com/nuxt/nuxt.com/issues/1455",0.667915,{"description":2081,"labels":2082,"number":2087,"owner":1991,"repository":1992,"state":2075,"title":2088,"updated_at":2089,"url":2090,"score":2091},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\n### Environment\n\n* Operating System: Linux\n* Node Version: v20.15.1\n* Nuxt Version: 3.14.1592\n* Package Manager: npm@10.7.0\n* Nuxt UI: v3.0.0-alpha.x\n\n### Description\nHello, I have the following configurations; \n\n#### assets/css/main.css\n```css\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n@theme {\n /* Font Family Extend */\n --font-display: 'Work Sans', sans-serif;\n --font-content: 'Roboto', sans-serif;\n --font-condensed: 'Roboto Condensed', sans-serif;\n\n\n /* Color Extend */\n --color-brand-50: #fef4ee;\n --color-brand-100: #fcdbc5;\n --color-brand-200: #facaae;\n --color-brand-300: #f6a57b;\n --color-brand-400: #f27545;\n --color-brand-500: #ee5221;\n --color-brand-600: #df3917;\n --color-brand-700: #b92915;\n --color-brand-800: #932219;\n --color-brand-900: #772017;\n --color-brand-950: #400d0a;\n}\n\n:root {\n --ui-primary: var(--color-brand-500);\n}\n```\n\nand my nuxt.config.ts file; \n```ts\nexport default defineNuxtConfig({\n // ....\n modules: ['@nuxt/ui', '@pinia/nuxt'],\n css: ['~/assets/css/main.css', '~/assets/scss/common.scss'],\n vite: {\n css: {\n preprocessorOptions: {\n scss: { api: 'modern-compiler' }\n }\n }\n },\n // ....\n});\n```\nWith the configurations defined as above when i set ssr:false in my nuxt.config.ts, my custom color called 'brand' is not applied to components and the default green is used from the tailwind. With ssr: true everything is ok with `npm run dev`. I also tried to set the color 'brand' in app.config.ts \n\n```ts\nexport default defineAppConfig({\n ui:{\n colors: {\n primary: 'brand'\n }\n }\n});\n``` \nwith this setting again everything works but this time ts complains about `Type '\"brand\"' is not assignable to type 'Color | undefined'.ts(2322)`. \n\nI did not find a true way to set colors from extended tailwindcss color palette. Thanks in advance for any help.\n\n\nThe following screenshot; ssr: false and primary color defined on ```:root {}``` \n\n\n\nThe following screenshot; ssr: true and primary color defined on ```:root {}``` \n\n\n\n\n \nThe following screenshot; ssr: false and primary color defined on 'appconfig' but this time I have the following error from ts\n\n\n\n\n\n\nEdit 1: \n> [!IMPORTANT]\n> I also tried to extend on a types/colors.d.ts file the `tailwindcss/colors` namespace to add my custom color but no chance\n\n```ts\nimport colors from 'tailwindcss/colors'\n\n\ndeclare module 'tailwindcss/colors' {\n const colors = colors | 'brand'\n export default colors;\n}\n```\n\n",[2083,2084],{"name":2011,"color":2012},{"name":2085,"color":2086},"v3","49DCB8",2869,"Use a custom color instead of the predefined Tailwind colors with ssr false","2024-12-16T09:47:16Z","https://github.com/nuxt/ui/issues/2869",0.719557,["Reactive",2093],{},["Set"],["ShallowReactive",2096],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"uoJt4Qld-HgGu6EAgMvy2RIUBU7k0If7UUa13avgfdM":-1},"/nuxt/test-utils/787"]