\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.",[1984],{"name":1985,"color":1986},"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.73636425,{"description":1996,"labels":1997,"number":2007,"owner":1988,"repository":1989,"state":1990,"title":2008,"updated_at":2009,"url":2010,"score":2011},"### 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_",[1998,2001,2004],{"name":1999,"color":2000},"enhancement","a2eeef",{"name":2002,"color":2003},"v3","49DCB8",{"name":2005,"color":2006},"triage","ffffff",2872,"[v3 docs]: example for nested pages with UTabs","2024-12-16T09:46:36Z","https://github.com/nuxt/ui/issues/2872",0.73672926,{"description":2013,"labels":2014,"number":2019,"owner":1988,"repository":1989,"state":1990,"title":2020,"updated_at":2021,"url":2022,"score":2023},"### Environment\n\nDocumentation error.\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nNot applicable\n\n### Description\n\nUnder this [subheading](https://ui.nuxt.com/components/form#input-events), there is a link to a file [here](https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/FormExampleElements.vue) but it does not have the key `validate-on` on any of the components. I believe that it should be there.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2015,2018],{"name":2016,"color":2017},"bug","d73a4a",{"name":2005,"color":2006},2812,"[docs] UForm's validate-on example is incorrect","2024-11-30T18:18:23Z","https://github.com/nuxt/ui/issues/2812",0.73978543,{"description":2025,"labels":2026,"number":2027,"owner":1988,"repository":2028,"state":1990,"title":2029,"updated_at":2030,"url":2031,"score":2032},"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,"icon","[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.7414081,{"description":2034,"labels":2035,"number":2038,"owner":1988,"repository":1989,"state":1990,"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":2016,"color":2017},{"name":2005,"color":2006},3132,"SelectMenu label not displayed for falsy values","2025-01-17T15:36:46Z","https://github.com/nuxt/ui/issues/3132",0.7417523,{"description":2044,"labels":2045,"number":2048,"owner":1988,"repository":1989,"state":2049,"title":2050,"updated_at":2051,"url":2052,"score":2053},"### 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```",[2046,2047],{"name":2016,"color":2017},{"name":2002,"color":2003},3513,"closed","Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7015425,{"description":2055,"labels":2056,"number":2059,"owner":1988,"repository":2060,"state":2049,"title":2061,"updated_at":2062,"url":2063,"score":2064},"(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",[2057],{"name":2016,"color":2058},"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.7117463,{"description":2066,"labels":2067,"number":2071,"owner":1988,"repository":1989,"state":2049,"title":2072,"updated_at":2073,"url":2074,"score":2075},"### Environment\n\n- Operating System: Windows 10 \n- Node Version: v22.10.0 \n- Nuxt Version: 3.16.0 \n- CLI Version: 3.22.5 \n- Nitro Version: 2.11.5 \n- Package Manager: pnpm@9.15.7 \n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, meta, ssr, runtimeConfig, ui \n- Runtime Modules: @nuxt/ui@3.0.0-beta.3, @nuxt/icon@1.10.3, @nuxt/fonts@0.11.0, @vueuse/nuxt@12.8.2\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt UI 3.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n\u003CUInput\n v-model=\"translation\"\n ref=\"translationField\" \n />\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2068,2069,2070],{"name":2016,"color":2017},{"name":2002,"color":2003},{"name":2005,"color":2006},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.71263254,{"description":2077,"labels":2078,"number":2081,"owner":1988,"repository":1989,"state":2049,"title":2082,"updated_at":2083,"url":2084,"score":2085},"### 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_",[2079,2080],{"name":2016,"color":2017},{"name":2002,"color":2003},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.7250881,{"description":2087,"labels":2088,"number":2089,"owner":1988,"repository":1988,"state":2049,"title":2090,"updated_at":2091,"url":2092,"score":2093},"The previous and next links at the bottom of documentation pages disappear when navigating to other pages. As far as I know, this only occurs when Nuxt links to a page without a trailing slash when the server 301s to one with a trailing slash.\r\n\r\n**Reproduction:**\r\n\r\n1. Visit https://v3.nuxtjs.org/docs/directory-structure/components/\r\n2. Use the sidebar or previous/next links to visit the `assets` or `composables` page\r\n\r\n\r\n\r\n3. Observe that the previous and next links are no longer present\r\n\r\n\r\n\r\n**Behavior with a URL that 404s instead of 301s:**\r\n\r\n1. Visit https://v3.nuxtjs.org/docs/directory-structure/package/\r\n2. Use the sidebar or previous/next links to visit the `nuxt.config.ts` page\r\n3. Observe that the previous and next links are still present. Refresh the page manually to make them disappear",[],12019,"[Doc] PagePrevNext not rendering on page change in production","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12019",0.7296227,["Reactive",2095],{},["Set"],["ShallowReactive",2098],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"mciOUKB0aM_OXxRucm0W28ez116JgclN369n_epr5d0":-1},"/nuxt/ui/3527"]