\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.",[2908],{"name":2909,"color":2910},"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.71814424,{"description":2917,"labels":2918,"number":2922,"owner":2877,"repository":2878,"state":2879,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### 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_",[2919,2920,2921],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},2872,"[v3 docs]: example for nested pages with UTabs","2024-12-16T09:46:36Z","https://github.com/nuxt/ui/issues/2872",0.7200428,{"description":2928,"labels":2929,"number":2932,"owner":2877,"repository":2878,"state":2879,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Description\n\nHello. How can i use provide in programmatically modal usage?",[2930,2931],{"name":2909,"color":2910},{"name":2871,"color":2872},2987,"Provide in modal programmatically usage","2024-12-31T05:16:08Z","https://github.com/nuxt/ui/issues/2987",0.72564846,{"description":2938,"labels":2939,"number":2953,"owner":2877,"repository":2877,"state":2879,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.15.1`\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.7.0`\r\n- Builder: `-`\r\n- User Config: `compatibilityDate`, `devtools`, `extends`, `alias`, `devServer`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/fabianwohlfart/test__nuxt-layer-default-import\n\n### Describe the bug\n\nThe moment i start my app, when the `app.vue` is inside the layer not the main folder, the imported `slugify` throws an error in the console.\r\n\r\n```\r\nSyntaxError: The requested module '/_nuxt/node_modules/slugify/slugify.js?v=a1686878' does not provide an export named 'default'\r\n```\n\n### Additional context\n\nThis only happens in dev mode.\r\n\r\nDo I have to somehow tell vite to optimize deps from this directory aswell?\n\n### Logs\n\n_No response_",[2940,2943,2946,2947,2950],{"name":2941,"color":2942},"good first issue","fbca04",{"name":2944,"color":2945},"dx","C39D69",{"name":2897,"color":2898},{"name":2948,"color":2949},"vite","3574D1",{"name":2951,"color":2952},"🍰 p2-nice-to-have","0E8A16",28631,"Default imports from layers on another directory fails","2024-11-19T11:52:04Z","https://github.com/nuxt/nuxt/issues/28631",0.7284271,{"description":2959,"labels":2960,"number":2963,"owner":2877,"repository":2878,"state":2964,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Description\n\nNuxt UI should have the potential to open native links in a Nuxt UI Modal by simply adding a certain `modal` parameter in [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link).\n\n`\u003CNuxtLink to=\"/about\" modal>About page shown in modal but can also be opened natively (e.g. new tab)\u003C/NuxtLink>`\n\nThe link should still be a native link with progressive enhancement, so _if users would like to open the URL in a new tab, they can do_! If not, it will open the content in a modal.\n\nThat would be great DX and UX! 🎉\n\nThe `modal` property is just one possible solution, maybe there's even a better one using a native HTML property like `rel=\"modal\"`, we should discuss that.\n\nIn future versions there might be further control parameters to override the defaults for\n\n- modal size\n- modal style\n- modal opacity\n- ...\n\nBut let's start simple.\n\nSomething similar was done here, but I think this should really be part of Nuxt UI or even Nuxt Core.\nhttps://nuxt-pages-plus.pages.dev/components/plus-modal-link\n\n### Additional context\n\n_No response_",[2961,2962],{"name":2868,"color":2869},{"name":2871,"color":2872},3298,"closed","Enhance NuxtLink to open in Modal using a \"modal\" property","2025-03-08T12:21:53Z","https://github.com/nuxt/ui/issues/3298",0.700514,{"description":2970,"labels":2971,"number":2974,"owner":2877,"repository":2878,"state":2964,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Description\n\nHow can i format the code with built-in features of the project?\nI use vs code + prettier and get eslint errors (see image), different formatting.\n\n",[2972,2973],{"name":2909,"color":2910},{"name":2871,"color":2872},3249,"Formatting code.","2025-02-06T10:49:16Z","https://github.com/nuxt/ui/issues/3249",0.7144095,{"description":2980,"labels":2981,"number":2985,"owner":2877,"repository":2878,"state":2964,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### Description\n\nBreadcrumb uses Link (and LinkBase) to implement the item rendering and navigation. Link (through LinkBase) in itself supports `onClick` event/prop. Now, passing `onClick` to the breadcrumb item does not go all the way through to the LinkBase, and thus prevents the fine-grained control of the Breadcrumb component.\n\nThe usage would look something like this:\n```\n\u003Ctemplate>\n \u003CUBreadcrumb :items=\"items\" />\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[2982,2983,2984],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.7161289,["Reactive",2991],{},["Set"],["ShallowReactive",2994],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fvPDZvuDdS9jqTlNfV9tbXrAY431gKM9MXt74jpSEvCo":-1},"/nuxt/ui/2636"]