\n```\n\nI have to use `type=\"number\"` because we only allow numeric inputs here.\n\nPrior to adding the pin input, I used a simple input field and the schema portion was like this:\n\n```\n confirmationCode: z\n .string()\n .length(1, 'The code is required')\n .length(6, 'The code must be 6 digits long'),\n```\n\nBut when I switched to `u-pin-input`, that gave me the error \"Expected string, received array\", so I replaced it with this:\n\n```\n confirmationCode: z\n .array(z.coerce.string().length(1))\n .length(6, 'The code must be 6 digits long'),\n```\n\nThis works, but now I have a TypeScript error on the v-model: \n```\nType 'string' is not assignable to type 'number[]'.ts-plugin(2322)\nindex.d.ts(5532, 3): The expected type comes from property 'modelValue' which is declared here on type '{ readonly \"onUpdate:modelValue\"?: (value: number[]) => any; readonly onBlur?: (payload: Event) => any; readonly onChange?: (payload: Event) => any; readonly onComplete?: (value: number[]) => any; ... 19 more ...; otp?: boolean; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'\n```\n\nAny additional adjustments I tried ended with further complications, so I figured it'd be better to ask than spend more time on hacky solutions that may introduce unintended scenarios.",[3183,3186],{"name":3184,"color":3185},"question","d876e3",{"name":3187,"color":3188},"v3","49DCB8",4779,"nuxt","ui","open","What's the correct way to type u-pin-input otp values in Zod?","2025-08-18T12:14:35Z","https://github.com/nuxt/ui/issues/4779",0.74242926,{"description":3198,"labels":3199,"number":3207,"owner":3190,"repository":3191,"state":3192,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.19.5\n- Nuxt Version: 3.19.2\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.6\n- Package Manager: npm@11.6.0\n- Builder: -\n- User Config: css, app, modules, sanctum, echo, i18n, fileStorage, imports, vite, compatibilityDate, ssr\n- Runtime Modules: @nuxt/ui@3.3.4, @nuxtjs/i18n@9.5.6, nuxt-auth-sanctum@1.2.0, @vueuse/nuxt@12.8.2, nuxt-file-storage@0.3.0, @nuxtjs/device@3.2.4, nuxt-laravel-echo@0.2.7\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\n3.3.4\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/admiring-maria-w8g7j2\n\n### Description\n\nI can't pass numbers to `value-key`, otherwise the v-model value will be an array of objects, and I need an array of IDs (that's why I specify `value-key`). And when selecting elements further, I'll get a mixed array of objects and IDs:\n```\n[ { \"id\": \"10441\", \"name\": \"N-Joy community\" }, { \"id\": \"10591\", \"name\": \"Karaoke Room\" }, 10441 ]\n```\nAnd I'll get an error: ` [Vue warn]: Invalid prop: type check failed for prop \"value\". Expected String | Object, got Number with value 10441.`\n\nIt's very inconvenient to cast IDs to strings every time, which requires writing extra code. Especially considering that in 90% of cases, the `value-key` will be an id (integer).",[3200,3203,3204],{"name":3201,"color":3202},"bug","d73a4a",{"name":3187,"color":3188},{"name":3205,"color":3206},"triage","ffffff",5018,"UInputMenu behaves incorrectly if you specify an int in the value-key","2025-10-17T14:12:19Z","https://github.com/nuxt/ui/issues/5018",0.7567984,{"description":3213,"labels":3214,"number":3218,"owner":3190,"repository":3191,"state":3192,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.19.0, @nuxt/scripts@0.11.7, @nuxt/eslint@1.4.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/r7ryl3\n\n### Description\n\nI recently upgrade to NuxtUI 3.1.2 (from 3.0.1) and It's impossible (or I don't know) how to deal with custom type for `InputMenu`, I got some types issues on `label-key`, `v-model`, `items`, `slots` as you can see in my reproduction.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3215,3216,3217],{"name":3201,"color":3202},{"name":3187,"color":3188},{"name":3205,"color":3206},4182,"Custom type with InputMenu","2025-05-19T12:22:28Z","https://github.com/nuxt/ui/issues/4182",0.7692938,{"description":3224,"labels":3225,"number":3226,"owner":3190,"repository":3227,"state":3192,"title":3228,"updated_at":3229,"url":3230,"score":3231},"My icon file directory is nested, which means I'm creating multiple `customCollections`, like this: \n\n\nIs there a simpler way to write it?",[],316,"icon","Local custom nested folder usage issues","2025-03-16T06:02:57Z","https://github.com/nuxt/icon/issues/316",0.7737014,{"description":3233,"labels":3234,"number":3237,"owner":3190,"repository":3191,"state":3192,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Environment\n\n- Operating System: Darwin\n- Node Version: v24.5.0\n- Nuxt Version: 4.1.2\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.5\n- Package Manager: pnpm@10.15.0\n- Builder: -\n- User Config: compatibilityDate, ssr, alias, typescript, nitro, vite, modules, i18n, css, hooks, icon, runtimeConfig, $development, $test\n- Runtime Modules: @nuxt/icon@2.0.0, @nuxt/ui@4.0.0, @nuxtjs/i18n@10.1.0, nuxt-auth-utils@0.5.24\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\n4.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/epic-shamir-l5ccfm\n\n### Description\n\nThe code as simple as this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport * as z from \"zod\"\nimport { reactive } from \"vue\"\n\nconst fields = reactive({\n // In UI, the file may be selected or not.\n file: null as File | null,\n})\n\nconst schema = z.object({\n // But the form is only considered valid when the file is selected.\n file: z.file(),\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cu-form :state=\"fields\" :schema=\"schema\">\n \u003Cu-file-upload v-model=\"fields.file\" />\n \u003C/u-form>\n\u003C/template>\n```\n\nTriggers type error:\n\n```\nType '{ file: { readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer: () => Promise\u003CArrayBuffer>; slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob; stream: () => ReadableSt...' is not assignable to type 'Partial\u003C{ file: File; }>'\n```\n\nExpected: it's allowed to have a form with a schema that requires a file to be selected.\n\n### Additional context\n\nIn fact, I believe this is a much broader problem. Why is the `state` typed as `Partial\u003CInferInput\u003CS>> ` in the first place? The type of the fields does not always match the schema. Basically, that's the point of schema in the first place, to perform validation — and not only value, but also the type. Consider number input value:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport * as z from \"zod\"\n\nconst fields = reactive({\n // Type used by \u003Cinput v-model=\"...\" type=\"number\">\n // It saves empty string for non-numbers.\n foo: \"\" as number | \"\",\n})\n\nconst schema = z.object({\n // But we need the actual number for the input data.\n foo: z.number(),\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cu-form :state=\"fields\" :schema=\"schema\">\n \u003Cinput v-model=\"fields.foo\" type=\"number\" />\n \u003C/u-form>\n\u003C/template>\n```\n\nThis leads to similar type error:\n\n```\nType '{ foo: number | \"\"; }' is not assignable to type 'Partial\u003C{ foo: number; }>'.\n Types of property 'foo' are incompatible.\n Type 'number | \"\"' is not assignable to type 'number | undefined'.\n Type 'string' is not assignable to type 'number'.\n```\n\nAs I see it, `state` should be untyped/unknown.\n\n### Logs\n\n```shell-script\n\n```",[3235,3236],{"name":3201,"color":3202},{"name":3205,"color":3206},5204,"UFile (and others!) type error when used with schema validation","2025-10-10T06:07:16Z","https://github.com/nuxt/ui/issues/5204",0.77377075,{"description":3243,"labels":3244,"number":3255,"owner":3190,"repository":3191,"state":3256,"title":3257,"updated_at":3258,"url":3259,"score":3260},"### Description\n\nThis feature request proposes that the InputNumber component be enhanced with leading and trailing slot support. \n\nCurrently, components such as **Input**, **InputMenu**, **Select**, and **SelectMenu** already offer these slots for inserting custom content. For consistency across the UI library and to provide developers with a uniform customization experience, it is imperative that InputNumber is updated to include both leading and trailing slots. \n\n### Additional context\n\n_No response_",[3245,3248,3249,3250,3253],{"name":3246,"color":3247},"enhancement","a2eeef",{"name":3187,"color":3188},{"name":3205,"color":3206},{"name":3251,"color":3252},"closed-by-bot","ededed",{"name":3254,"color":3252},"stale",4201,"closed","[InputNumber] Add support for leading & trailing slots","2025-09-28T02:10:15Z","https://github.com/nuxt/ui/issues/4201",0.74358684,{"description":3262,"labels":3263,"number":3266,"owner":3190,"repository":3191,"state":3256,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, fonts, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.3.1, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.2.0, @nuxtjs/i18n@9.5.4, nuxt-security@2.2.0, @nuxt/ui@3.1.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/sharp-christian-kzdxt9?file=%2Fapp%2Fpages%2Findex.vue\n\n### Description\n\nStarting from v3.1.2, using the [built-in v-model-modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) produces type errors. They are still working tho, so its only a type issue.\n\nReproduction:\n1. Open provided link\n2. Run `pnpx nuxi typecheck`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n➜ workspace git:(master) ✗ pnpx nuxi typecheck\nPackages: +1\n+\nProgress: resolved 1, reused 1, downloaded 0, added 1, done\nℹ Nuxt Icon server bundle mode is set to local 11:09:23 AM\n✔ Nuxt Icon discovered local-installed 2 collections: lucide, simple-icons 11:09:25 AM\nℹ Running with compatibility version 4 nuxt 11:09:25 AM\napp/pages/index.vue:8:22 - error TS2353: Object literal may only specify known properties, and 'modelModifiers' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly \"onUpdate:modelValue\"?: ((payload: number) => any) | undefined; ... 24 more ...; modelValue?: number | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.\n\n8 \u003CUInput v-model.number=\"myNumber\" type=\"number\" />\n ~~~~~~~\n\napp/pages/index.vue:9:22 - error TS2353: Object literal may only specify known properties, and 'modelModifiers' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly \"onUpdate:modelValue\"?: ((payload: string) => any) | undefined; ... 24 more ...; modelValue?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.\n\n9 \u003CUInput v-model.lazy=\"myText\" />\n ~~~~~\n\n\nFound 2 errors in the same file, starting at: app/pages/index.vue:8\n\n\n ERROR Process exited with non-zero status (2) 11:09:41 AM\n\n at R._waitForOutput (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/chunks/main.mjs:508:13)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Object.run (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/chunks/typecheck.mjs:91:9)\n at async runCommand$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1767:16)\n at async runCommand$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1758:11)\n at async runMain$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1896:7) \n\n\n\n ERROR Process exited with non-zero status (2)\n```",[3264,3265],{"name":3201,"color":3202},{"name":3187,"color":3188},4166,"Built-in v-model modifiers produce type errors with v3.1.2","2025-05-22T12:51:25Z","https://github.com/nuxt/ui/issues/4166",0.74503934,{"description":3272,"labels":3273,"number":3278,"owner":3190,"repository":3191,"state":3256,"title":3279,"updated_at":3280,"url":3281,"score":3282},"### Description\r\n\r\nHi 👋🏻 \r\n\r\nI started using NuxtUI and realized one more thing that can be improved. Right now, For `v-model` of tabs component index (number) is used.\r\n\r\nIf we want to get the key of active tab for making API req then we have to do something like below:\r\n```ts\r\nconst activeTabKey = items[itemsModel.value]!.key\r\n\r\n// With this feature implemented we can directly use `itemsModel.value`\r\n```\r\n\r\nInstead, if we can allow using `key` then:\r\n- I'll be more readable\r\n- If we change the order of the tabs (in items array) it doesn't affect the active tab\r\n\r\n### Additional context\r\n\r\nWe can also introduce this change in v3.",[3274,3275,3276,3277],{"name":3246,"color":3247},{"name":3205,"color":3206},{"name":3251,"color":3252},{"name":3254,"color":3252},2061,"Allow using tab item key as value for v-model","2025-06-18T09:06:22Z","https://github.com/nuxt/ui/issues/2061",0.74849993,{"description":3284,"labels":3285,"number":3290,"owner":3190,"repository":3191,"state":3256,"title":3291,"updated_at":3292,"url":3293,"score":3294},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v20.19.2`\n- Nuxt Version: `4.1.2`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.6`\n- Package Manager: `npm@9.2.0`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`, `css`\n- Runtime Modules: `@nuxt/ui@4.0.0-alpha.2`, `nuxt-auth-utils@0.5.25`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.0.0-alpha.x\n\n### Version\n\nv4.0.0-alpha.2\n\n### Reproduction\n\n-\n\n### Description\n\nAs the title says, you can't use \"number\" as a input type without TypeScript yelling at you.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3286,3287,3288],{"name":3201,"color":3202},{"name":3205,"color":3206},{"name":3289,"color":3188},"v4",5005,"AuthFormField does not support \"number\" as a valid type","2025-09-25T16:56:32Z","https://github.com/nuxt/ui/issues/5005",0.7486743,{"description":3296,"labels":3297,"number":3301,"owner":3190,"repository":3190,"state":3256,"title":3302,"updated_at":3303,"url":3304,"score":3305},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.6.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.12.1`\n- Builder: `-`\n- User Config: `compatibilityDate`, `components`, `css`, `devtools`, `devServer`, `experimental`, `hooks`, `ignore`, `imports`, `modules`, `runtimeConfig`, `$development`, `$production`, `$env`, `ssr`, `vite`, `eslint`, `googleFonts`, `icon`, `primevue`\n- Runtime Modules: `@formkit/auto-animate/nuxt@0.8.2`, `@nuxt/eslint@1.4.1`, `@nuxt/icon@1.13.0`, `@nuxt/image@1.10.0`, `@nuxtjs/color-mode@3.5.2`, `@nuxtjs/google-fonts@3.2.0`, `@pinia/nuxt@0.11.1`, `@primevue/nuxt-module@4.3.5`, `@vueuse/nuxt@13.3.0`, `pinia-plugin-persistedstate/nuxt@4.3.0`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/confident-water-h3prwy\n\n### Describe the bug\n\nMy `nuxt.config.ts` has the following:\n\n```ts\n{\n runtimeConfig: {\n public: {\n userId: \"default\",\n userPIN: \"default\",\n },\n },\n}\n```\n\nLooking at `.nuxt/types/schema.d.ts`, it is correctly typed:\n\n```ts\n interface PublicRuntimeConfig {\n userId: string,\n\n userPIN: string,\n }\n```\n\n1. Run the reproduction. Both `userId` and `userPIN` are indeed strings.\n2. Uncomment the lines in `.env`. `userId` has now become a number.\n\n### Additional context\n\nAttempted workarounds: \n- Surrounding the value in `.env` with single or double quotes (e.g. FOO=\"1234\") makes no difference, the value in `runtimeConfig` still ends up as a number.\n- Using `FOO=\"'1234'\"` does force the value to be a string, but includes the single quotes, so that is not desirable either.\n- Ultimately I had to write a plugin that ran first and coerced the relevant values in `runtimeConfig.public` to strings.\n\nI'm guessing that `JSON.stringify` is being used to parse the values received from `.env`, which causes anything number-like to end up as a number.\n\nThis bug seriously limits the utility of typing `runtimeConfig`.\n\n### Logs\n\n```shell-script\n\n```",[3298],{"name":3299,"color":3300},"pending triage","E99695",32375,"runtimeConfig parser converts number-like .env values to a number, even when typed as a string","2025-06-13T09:47:06Z","https://github.com/nuxt/nuxt/issues/32375",0.7518715,["Reactive",3307],{},["Set"],["ShallowReactive",3310],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fklZUzmTWnnTHGsdHvA0Eawyhi0o4Dcl9f-eQaiQ2fHg":-1},"/nuxt/ui/3751"]