\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.",[2865],{"name":2866,"color":2867},"question","d876e3",2462,"nuxt","ui","open","UInput with type='file', how to validate with Zod?","2025-03-10T01:51:18Z","https://github.com/nuxt/ui/issues/2462",0.7212811,{"description":2877,"labels":2878,"number":2888,"owner":2869,"repository":2870,"state":2871,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### 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_",[2879,2882,2885],{"name":2880,"color":2881},"enhancement","a2eeef",{"name":2883,"color":2884},"v3","49DCB8",{"name":2886,"color":2887},"triage","ffffff",2662,"Override default props from `AppConfig`","2024-11-17T08:30:46Z","https://github.com/nuxt/ui/issues/2662",0.72463447,{"description":2894,"labels":2895,"number":2899,"owner":2869,"repository":2870,"state":2871,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### 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_",[2896,2897,2898],{"name":2880,"color":2881},{"name":2883,"color":2884},{"name":2886,"color":2887},2872,"[v3 docs]: example for nested pages with UTabs","2024-12-16T09:46:36Z","https://github.com/nuxt/ui/issues/2872",0.7302969,{"description":2905,"labels":2906,"number":2911,"owner":2869,"repository":2870,"state":2871,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### 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```",[2907,2910],{"name":2908,"color":2909},"bug","d73a4a",{"name":2886,"color":2887},3132,"SelectMenu label not displayed for falsy values","2025-01-17T15:36:46Z","https://github.com/nuxt/ui/issues/3132",0.73341215,{"description":2917,"labels":2918,"number":2922,"owner":2869,"repository":2869,"state":2871,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Reproduction\n\nPut a index.html into public \n\n### Describe the bug\n\nPublic files will override routes which is fine, but it should at least warn if the route exist\n",[2919],{"name":2920,"color":2921},"pending triage","E99695",31103,"index.html in public","2025-03-11T18:04:33Z","https://github.com/nuxt/nuxt/issues/31103",0.7357477,{"description":2928,"labels":2929,"number":2930,"owner":2869,"repository":2931,"state":2871,"title":2932,"updated_at":2933,"url":2934,"score":2935},"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.7375837,{"description":2937,"labels":2938,"number":2939,"owner":2869,"repository":2931,"state":2871,"title":2940,"updated_at":2941,"url":2942,"score":2943},"It would be nice if you could alias and entire collection instead of just an icon.\n\nRight now I do it this way.\n```ts\nconst createIconAliases = (newPrefix: string, iconifyJson: IconifyJSON) => {\n const exisitngPrefix = iconifyJson.prefix;\n const icons = Object.keys(iconifyJson.icons);\n\n return icons.reduce(\n (object, value) => {\n object[`${newPrefix}:${value}`] = `${exisitngPrefix}:${value}`;\n return object;\n },\n {} as Record\u003Cstring, string>,\n );\n};\n```",[],362,"[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.7424898,{"description":2945,"labels":2946,"number":2949,"owner":2869,"repository":2870,"state":2950,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Environment\n\n------------------------------\n- Operating System: Linux (via WSL so I'm on Windows)\n- Node Version: v22.14.0\n- Nuxt Version: -\n- CLI Version: 3.21.1\n- Nitro Version: -\n- Package Manager: pnpm@10.3.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha-12\n\n### Reproduction\n\non ui3.nuxt.dev and using a Windows computer, hit `ctrl+k` or `win+k` and nothing will happen.\n\n### Description\n\nIn the documentation, you say that the `meta` key is automatically converted to `ctrl` but it does not seems to be the case. (https://ui3.nuxt.dev/composables/define-shortcuts#:~:text=Shortcuts%20are%20automatically,.)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2947,2948],{"name":2908,"color":2909},{"name":2883,"color":2884},3318,"closed","Converting `meta` to `ctrl` in `defineShortcuts` does not works","2025-02-15T15:33:21Z","https://github.com/nuxt/ui/issues/3318",0.70605266,{"description":2956,"labels":2957,"number":2964,"owner":2869,"repository":2965,"state":2950,"title":2966,"updated_at":2967,"url":2968,"score":2969},"Hello,\r\n\r\nI have problems using nuxt fonts with Adobe as Provider (and tailwind for css)\r\n\r\n----\r\n\r\nThis ist the font I want to use and what postman shows me for the correct names:\r\n\r\n```\r\n\"families\": [\r\n {\r\n \"id\": \"some id\",\r\n \"name\": \"DIN 2014\",\r\n \"slug\": \"din-2014\",\r\n \"css_names\": [\r\n \"din-2014\"\r\n ],\r\n \"css_stack\": \"\\\"din-2014\\\",sans-serif\",\r\n \"variations\": [\r\n \"n4\",\r\n \"n6\",\r\n \"n7\"\r\n ]\r\n }\r\n ]\r\n }\r\n```\r\n\r\n----\r\n\r\nThis is how my tailwind.config.ts looks:\r\n\r\n```\r\nfontFamily: {\r\n custom: ['din-2014', 'sans-serif'],\r\n},\r\n```\r\n\r\n\r\n\r\nThis is how my nuxt.config.ts looks:\r\n\r\n```\r\nfonts: {\r\n families: [{ name: 'din-2014', provider: 'adobe' }],\r\n adobe: {\r\n id: ['some id'],\r\n },\r\n defaults: {\r\n weights: [400],\r\n styles: ['normal', 'italic'],\r\n subsets: [\r\n 'cyrillic-ext',\r\n 'cyrillic',\r\n 'greek-ext',\r\n 'greek',\r\n 'vietnamese',\r\n 'latin-ext',\r\n 'latin',\r\n ],\r\n fallbacks: {\r\n monospace: ['Tahoma'],\r\n },\r\n },\r\n },\r\n```\r\n\r\n----\r\n\r\nI get this warning with the above code:\r\n\r\n\r\n\r\n----\r\n\r\nI also tried other names like: \"DIN 2014\" or \"Din 2014\", but it seems like the font does not get through to the frontend of my nuxt application. \r\n\r\nPS: If I use the adobe cdn link everything works fine\r\n\r\nThank you for the help!\r\n\r\nnewbie\r\n",[2958,2961],{"name":2959,"color":2960},"provider","1161A4",{"name":2962,"color":2963},"needs reproduction","C94E53",221,"fonts","Problems with Adobe as provider","2024-08-21T07:50:11Z","https://github.com/nuxt/fonts/issues/221",0.7166079,{"description":2971,"labels":2972,"number":2975,"owner":2869,"repository":2976,"state":2950,"title":2977,"updated_at":2978,"url":2979,"score":2980},"(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",[2973],{"name":2908,"color":2974},"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.71690714,["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fImslvEqI7N62v2DpQeTzDM_xz73XruXBPnZuBUvQAgE":-1},"/nuxt/scripts/360"]