\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.",[2001],{"name":2002,"color":2003},"question","d876e3",2462,"UInput with type='file', how to validate with Zod?","2025-03-10T01:51:18Z","https://github.com/nuxt/ui/issues/2462",0.69422114,{"description":2010,"labels":2011,"number":2012,"owner":1991,"repository":2013,"state":1993,"title":2014,"updated_at":2015,"url":2016,"score":2017},"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.69884294,{"description":2019,"labels":2020,"number":2028,"owner":1991,"repository":1992,"state":1993,"title":2029,"updated_at":2030,"url":2031,"score":2032},"### 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```",[2021,2024,2027],{"name":2022,"color":2023},"bug","d73a4a",{"name":2025,"color":2026},"v3","49DCB8",{"name":1988,"color":1989},3579,"Type error in app config `compoundVariants`","2025-03-16T14:04:52Z","https://github.com/nuxt/ui/issues/3579",0.6988597,{"description":2034,"labels":2035,"number":2038,"owner":1991,"repository":1992,"state":1993,"title":2039,"updated_at":2040,"url":2041,"score":2042},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.8.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: modules, plugins, css, colorMode, tiptap, runtimeConfig, nitro, routeRules, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.20.0, @pinia/nuxt@0.5.4, @vueuse/nuxt@11.1.0, nuxt-tiptap-editor@2.0.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n```\n\u003Cscript setup lang=\"ts\">\nenum DiscountType {\n Fixed = 0,\n Percentage = 1\n}\n\nconst types = [\n {\n label: \"€\",\n value: DiscountType.Fixed\n },\n {\n label: \"%\",\n value: DiscountType.Percentage\n }\n]\nconst type = ref\u003CDiscountType>(DiscountType.Fixed)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSelectMenu v-model=\"type\" :options=\"types\" value-attribute=\"value\" />\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```",[2036,2037],{"name":2022,"color":2023},{"name":1988,"color":1989},3132,"SelectMenu label not displayed for falsy values","2025-01-17T15:36:46Z","https://github.com/nuxt/ui/issues/3132",0.71099126,{"description":2044,"labels":2045,"number":2047,"owner":1991,"repository":2013,"state":1993,"title":2048,"updated_at":2049,"url":2050,"score":2051},"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",[2046],{"name":2002,"color":2003},160,"how to disable svg caching","2024-12-21T19:58:04Z","https://github.com/nuxt/icon/issues/160",0.71291196,{"description":2053,"labels":2054,"number":2058,"owner":1991,"repository":1992,"state":1993,"title":2059,"updated_at":2060,"url":2061,"score":2062},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello everyone, I’d like to discuss the possibility of setting `props` by default from `AppConfig`. Currently, it’s very convenient that we can configure the theme through the config. It would be great to have a similar option for props. Previously, @benjamincanac mentioned [here](https://github.com/nuxt/ui/issues/1289#issuecomment-2480556540) that this is not currently planned.\n\nMy proposal is simple: wrap all `withDefaults` in our own implementation. This way, we can define props without making significant changes to the code.\n\n## What it could look like\n\nLet’s look at the `Accordion.vue` component. At the moment, its props look like this:\n```ts\nconst props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nLet’s assume our wrapper is called `withUiDefaults`. Then the code would look like this:\n```diff\n-const props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n+const props = withUiDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nThe implementation of `withUiDefaults` is quite simple:\n```ts\nfunction withUiDefaults(props, defaults) {\n const defaultFromConfig = {}\n\n return withDefaults(props, {\n ...defaults,\n ...defaultFromConfig\n })\n}\n``` \n\n## Issues I See\n\n1) **Typing `AppConfig` might be challenging** \n We would need to somehow generate types based on the components. \n **My opinion:** I think we can retrieve this using `vue-component-meta` during the UI build stage. So, in my opinion, this isn’t a significant problem.\n\n2) **Developers might set `modelValue` or other critical props by default** \n **My opinion:** In such cases, we can log a warning to the console. Additionally, developers should understand which props they are overriding. We won’t be able to cover all edge cases, but I don’t think we need to.\n\n### Additional context\n\n_No response_",[2055,2056,2057],{"name":1985,"color":1986},{"name":2025,"color":2026},{"name":1988,"color":1989},2662,"Override default props from `AppConfig`","2024-11-17T08:30:46Z","https://github.com/nuxt/ui/issues/2662",0.7222582,{"description":2064,"labels":2065,"number":2066,"owner":1991,"repository":2013,"state":1993,"title":2067,"updated_at":2068,"url":2069,"score":2070},"The latest version v1.11.0 does not properly resolve the auto imported type of `Icon`\n\nWith the previous v1.10.3 - the auto imported `Icon` component shows a type error if missing props and also shows available props in the VS Code context window:\n\n\n\nWith v1.11.0 - the `Icon` component does not show any type errors if missing props and the available props are not displayed by VS Code:\n\n\n\nUsing dependencies:\n\n```json\n{\n \"@nuxt/icon\": \"1.11.0\",\n \"nuxt\": \"^3.16.0\",\n \"vue\": \"^3.5.13\",\n \"vue-router\": \"^4.5.0\"\n}\n```\n\nWith latest nuxt config:\n\n```ts\nexport default defineNuxtConfig({\n compatibilityDate: '2024-11-01',\n devtools: { enabled: true },\n modules: ['@nuxt/icon']\n})\n```",[],373,"Auto Import Types Not Resolving in latest v1.11.0","2025-03-19T00:11:46Z","https://github.com/nuxt/icon/issues/373",0.7247905,{"description":2072,"labels":2073,"number":2078,"owner":1991,"repository":2079,"state":2080,"title":2081,"updated_at":2082,"url":2083,"score":2084},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.20.2\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@3.6.1\r\n- Builder: -\r\n- User Config: devtools, build, modules, fonts, colorMode, i18n, logLevel, nitro, sentry, runtimeConfig\r\n- Runtime Modules: nuxt-zod-i18n@latest, @nuxtjs/i18n@8.3.1, @nuxt/ui@^2.15.2, @nuxt/test-utils/module@3.12.1, @nuxt/fonts@latest, @vueuse/nuxt@10.9.0\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nJust create a simple component with :\r\n\r\n```\r\n\u003Cscript lang=\"ts\" setup>\r\nconst error = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nSimple test \r\n\r\n```\r\nit('mount', async () => {\r\n const component = await mountSuspended(TheFooter);\r\n expect(component.html()).toMatchSnapshot();\r\n });\r\n```\n\n### Describe the bug\n\n```\r\nTypeError: 'set' on proxy: trap returned falsish for property 'error'\r\n ❯ Proxy.clonedComponent.render ../../../node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:131:44\r\n 129| renderContext[key] = passedProps[key];\r\n 130| }\r\n 131| return render.call(this, renderContext, ...args);\r\n | ^\r\n 132| } : void 0,\r\n 133| setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0\r\n ❯ renderComponentRoot ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:885:16\r\n ❯ ReactiveEffect.componentUpdateFn [as fn] ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5969:46\r\n ❯ ReactiveEffect.run ../../../node_modules/@vue/reactivity/dist/reactivity.cjs.js:181:19\r\n ❯ instance.update ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6100:16\r\n ❯ setupRenderEffect ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6110:5\r\n ❯ ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1639:9\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2074,2075],{"name":2022,"color":2023},{"name":2076,"color":2077},"pending triage","5D08F5",835,"test-utils","closed","Test fail if component contain const error = ref(false);","2024-05-08T21:48:21Z","https://github.com/nuxt/test-utils/issues/835",0.6659438,{"description":2086,"labels":2087,"number":2090,"owner":1991,"repository":2091,"state":2080,"title":2092,"updated_at":2093,"url":2094,"score":2095},"(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",[2088],{"name":2022,"color":2089},"ff281a",1455,"nuxt.com","query parameters on module page result in hydration mismatch","2025-03-24T22:03:27Z","https://github.com/nuxt/nuxt.com/issues/1455",0.70694685,["Reactive",2097],{},["Set"],["ShallowReactive",2100],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"AvDApmoeF-fDKtyb2lwHJJNukItryDnpOMdHgZLT2BY":-1},"/nuxt/nuxt.com/1857"]