\n \u003C/template>\n\n \u003Ctemplate #panel>\n \u003Cdiv class=\"flex h-full content-center pt-[130px]\">\n \u003CUNavigationTree id=\"navtree\" :links=\"links\" default-open />\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Workaround \nFor classes: split links in multiple UHeaderLinks with custom ui prop.\n\n\n\n```vue\n\u003Ctemplate #center>\n \u003Cdiv class=\"flex flex-row flex-nowrap gap-5\">\n \u003CUHeaderLinks\n :links=\"linksA\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003CUHeaderLinks\n :links=\"linksB\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n inactive: 'hover:text-primary text-red-500 italic',\n default: {\n popover: {\n ui: {\n wrapper: 'text-red-500 italic',\n },\n },\n },\n }\"\n />\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2867,2870,2873],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"pro","5BD3CB",{"name":2874,"color":2875},"triage","ffffff",2306,"nuxt","ui","open","HeaderLinks: properties class and icon has no effects","2025-02-17T00:12:08Z","https://github.com/nuxt/ui/issues/2306",0.74195325,{"description":2885,"labels":2886,"number":2890,"owner":2877,"repository":2878,"state":2879,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nHow can i use [Zod](https://zod.dev/) to validate an [UInput file field](https://ui.nuxt.com/components/input#type)? \n\nLet's say you have the following code:\n(I found the example over [here](https://blog.stackademic.com/upgrade-your-full-stack-form-validation-with-zod-and-react-hook-form-in-next-js-107b014628a3).)\n\n```vue\n\u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\">\n\n \u003CUFormGroup name=\"picture\" label=\"Picture\">\n \u003CUInput v-model=\"state.picture\" type=\"file\" @change=\"onChangeFile\"/>\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.",[2887],{"name":2888,"color":2889},"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.7496929,{"description":2896,"labels":2897,"number":2904,"owner":2877,"repository":2878,"state":2905,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Description\n\nIs there a way to prevent popovers from closing when clicking outside the popover?",[2898,2899,2901],{"name":2888,"color":2889},{"name":2900,"color":2875},"wontfix-v2",{"name":2902,"color":2903},"v3","49DCB8",2245,"closed","Popover close-prevented","2024-11-10T09:20:02Z","https://github.com/nuxt/ui/issues/2245",0.68802893,{"description":2911,"labels":2912,"number":2917,"owner":2877,"repository":2878,"state":2905,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Environment\n\nThe website - https://ui.nuxt.com/getting-started\n\n### Version\n\nmain\n\n### Reproduction\n\nhttps://ui.nuxt.com/getting-started\n\n### Description\n\nNone of the children pages on the nuxt ui site have worked since updating to version 1.4.1 from the 1.3 edge version. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2913,2914],{"name":2868,"color":2869},{"name":2915,"color":2916},"documentation","0075ca",2237,"Couldn't resolve component \"default\" at \"/:slug\"","2024-10-02T14:22:51Z","https://github.com/nuxt/ui/issues/2237",0.69560564,{"description":2923,"labels":2924,"number":2929,"owner":2877,"repository":2878,"state":2905,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\n2.18.6\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/aloulouamine/nuxt-ui-select-menu-issue\n\n### Description\n\nSelectMenu with paginated search has an issue with default count placeholder.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2925,2926],{"name":2868,"color":2869},{"name":2927,"color":2928},"duplicate","cfd3d7",2313,"SelectMenu paginated search count issue","2024-10-06T17:49:40Z","https://github.com/nuxt/ui/issues/2313",0.70448226,{"description":2935,"labels":2936,"number":2937,"owner":2877,"repository":2938,"state":2905,"title":2939,"updated_at":2940,"url":2941,"score":2942},"With the release of `v1.10` we should be able to use arbitrary icon names by setting `normalizeIconName` option to `false`, however it does not seem to work.\n\nI followed the documentation, but my local collection icons witn non-convential names failing to load.\n\nMy module config:\n```ts\n modules: ['@nuxt/icon'],\n icon: {\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/my-icons',\n normalizeIconName: false, // \u003C-- this\n },\n ],\n },\n```\n\nBut when I'm trying to use `assets/my-icons/FooBar.svg` as `\u003CIcon name=\"my-icon:FooBar\" />`, I'm getting the warning\n```\n[Icon] failed to load icon my-icon:FooBar\n```\n\n`\u003CIcon name=\"my-icon:foo-bar\" />` also fails to load, which is expected as normalize is disabled.\n\nReproduction link: [stackblitz](https://stackblitz.com/edit/github-zgzqz3vo?file=app.vue)\n\nSetup: Nuxt v3.14.1592, nuxt-icon v1.10.1.",[],322,"icon","new custom collection option `normalizeIconName: false` does not work as expected","2024-12-16T07:04:54Z","https://github.com/nuxt/icon/issues/322",0.7123056,{"description":2944,"labels":2945,"number":2946,"owner":2877,"repository":2938,"state":2905,"title":2947,"updated_at":2948,"url":2949,"score":2950},"After installing an `@iconify-json/*` package (`@iconify-json/mdi` in my scenario), the following error gets spit out when the `/api/_nuxt_icon/:collection` endpoint is called\r\n\r\n\r\n\r\nIt seems to be caused by the dynamic import missing the json import attribute on line 120 of `module.ts` https://github.com/nuxt/icon/blob/85a0e7b940725561f35656d75a99179f88cecef8/src/module.ts#L120 \r\n\r\nAdding `{ with: { type: 'json' } }` as a second parameter resolves the error for me:\r\n\r\n```js\r\nimport('@iconify-json/${collection}/icons.json', { with: { type: 'json' } }).then(m => m.default)`\r\n```",[],186,"Locally installed `@iconify-json/*` packages result in 'needs an import attribute of type \"json\"' error","2024-07-15T15:35:07Z","https://github.com/nuxt/icon/issues/186",0.71874624,{"description":2952,"labels":2953,"number":2958,"owner":2877,"repository":2878,"state":2905,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.12.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.20.0\n- Build Modules: -\n\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n`npx nuxi@latest init new-project`\n\nruns fine, then:\n\n`cd new-project`\n`npx nuxi@latest module add ui`\n\nresults in\n```\nInvalid module \"..mjs\" is not a valid package name imported from /Users/user/Sites/new-project\n...\nExperimentalWarning: CommonJS module /Users/user/Sites/new-project/nuxt-ui-app/.nuxt/nuxtui-tailwind.config.cjs is loading ES Module /Users/user/Sites/new-project/nuxt-ui-app/node_modules/@nuxt/ui/dist/runtime/utils/colors.js using require().\n```\n\n\n### Description\n\nNot sure why the most basic vanilla default install results in this error",[2954,2955],{"name":2868,"color":2869},{"name":2956,"color":2957},"upstream","78bddb",2935,"Installing nuxt ui on top of default latest nuxt install throws error","2025-03-07T07:47:03Z","https://github.com/nuxt/ui/issues/2935",0.72260386,{"description":2964,"labels":2965,"number":2970,"owner":2877,"repository":2878,"state":2905,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### 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_",[2966,2969],{"name":2967,"color":2968},"enhancement","a2eeef",{"name":2902,"color":2903},3298,"Enhance NuxtLink to open in Modal using a \"modal\" property","2025-03-08T12:21:53Z","https://github.com/nuxt/ui/issues/3298",0.74069536,{"description":2976,"labels":2977,"number":2978,"owner":2877,"repository":2938,"state":2905,"title":2979,"updated_at":2980,"url":2981,"score":2982},"Since this commit 36e38c32f8f1f61570080e4e95f51cf249229a1a (I guess), when I open pm2 logs, I get a lot of console.log from nuxt icon\n\n\nIs there a way to disable it?",[],299,"Disable console.log","2024-11-19T01:11:23Z","https://github.com/nuxt/icon/issues/299",0.7433164,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fTIcNv3g6gioM8tuAfyTHbksVtbfJHVrbPI-KVtVW8rw":-1},"/nuxt/ui/2371"]