\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.",[2885],{"name":2874,"color":2875},2462,"UInput with type='file', how to validate with Zod?","2025-03-10T01:51:18Z","https://github.com/nuxt/ui/issues/2462",0.69956625,{"description":2892,"labels":2893,"number":2898,"owner":2863,"repository":2864,"state":2865,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### 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```",[2894,2897],{"name":2895,"color":2896},"bug","d73a4a",{"name":2860,"color":2861},3132,"SelectMenu label not displayed for falsy values","2025-01-17T15:36:46Z","https://github.com/nuxt/ui/issues/3132",0.7119523,{"description":2904,"labels":2905,"number":2906,"owner":2863,"repository":2877,"state":2865,"title":2907,"updated_at":2908,"url":2909,"score":2910},"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,"Custom collections aren't recognised","2024-09-10T10:57:04Z","https://github.com/nuxt/icon/issues/252",0.7206975,{"description":2912,"labels":2913,"number":2919,"owner":2863,"repository":2864,"state":2865,"title":2920,"updated_at":2921,"url":2922,"score":2923},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nUTabs documentation could benefit from an example of how to use it to display nested pages. An example use case could be a profile page with tabs for profile information and settings, where navigating through each would lead to a sub-page (profile information being in /profile, and settings being in /profile/settings)\n\n### Additional context\n\n_No response_",[2914,2915,2918],{"name":2857,"color":2858},{"name":2916,"color":2917},"v3","49DCB8",{"name":2860,"color":2861},2872,"[v3 docs]: example for nested pages with UTabs","2024-12-16T09:46:36Z","https://github.com/nuxt/ui/issues/2872",0.72674596,{"description":2925,"labels":2926,"number":2930,"owner":2863,"repository":2864,"state":2865,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### 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_",[2927,2928,2929],{"name":2857,"color":2858},{"name":2916,"color":2917},{"name":2860,"color":2861},2662,"Override default props from `AppConfig`","2024-11-17T08:30:46Z","https://github.com/nuxt/ui/issues/2662",0.7284067,{"description":2936,"labels":2937,"number":2942,"owner":2863,"repository":2943,"state":2944,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### 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_",[2938,2939],{"name":2895,"color":2896},{"name":2940,"color":2941},"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.6682955,{"description":2950,"labels":2951,"number":2956,"owner":2863,"repository":2864,"state":2944,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Description\n\nIf i try to define the position of the notification using the `ui` prop `\u003CUNotifications :ui=\"{position: 'top-0 right-0'}\" />`\r\nthe \"default\" configuration is applied as well (`bottom-0 end-0 `) this happens also if defining the position using the app.config.ts.. I'm assuming i'm doing it wrong.. please advice.. \r\n",[2952,2955],{"name":2953,"color":2954},"duplicate","cfd3d7",{"name":2874,"color":2875},2180,"Notification position","2024-09-11T14:08:24Z","https://github.com/nuxt/ui/issues/2180",0.69760513,{"description":2962,"labels":2963,"number":2966,"owner":2863,"repository":2967,"state":2944,"title":2968,"updated_at":2969,"url":2970,"score":2971},"(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",[2964],{"name":2895,"color":2965},"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.7070836,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAvDApmoeF-fDKtyb2lwHJJNukItryDnpOMdHgZLT2BY":-1},"/nuxt/nuxt.com/1857"]