\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.",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"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.8018664,{"description":3152,"labels":3153,"number":3160,"owner":3144,"repository":3161,"state":3146,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.13.2\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, future, experimental, ssr, typescript, routeRules, hooks, runtimeConfig, extends, modules, sourcemap, ui, postcss, tailwindcss, vite, nitro, components, css, imports, content, ogImage, i18n\r\n- Runtime Modules: @nuxt/test-utils/module@3.14.2, @pinia/nuxt@0.5.4, @nuxt/ui@2.18.4, @nuxtjs/i18n@8.5.3, @nuxt/fonts@0.7.2, @vueuse/nuxt@11.0.3, @nuxt/eslint@0.5.7, nuxt-eslint-auto-explicit-import@0.0.2, @nuxt/image@1.8.0, @nuxtjs/fontaine@0.4.3, @nuxt/content@2.13.2, @codecov/nuxt-plugin@1.0.1, @nuxtjs/seo@2.0.0-rc.21\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-gu1sj1-si6cpn?file=server%2Futils%2Fexample-util.nuxt.spec.ts&startScript=start\r\n\r\nRun -> `npm run test`\r\n\r\n### Describe the bug\r\n\r\nAfter some recent dependancy upgrades around Nuxt I'm getting the `[nuxt] instance unavailable` error on tests that call functions in `server/utils` that use `useRuntimeConfig`.\r\n\r\nSee the reproduction link for an example. Thanks.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3154,3157],{"name":3155,"color":3156},"bug","d73a4a",{"name":3158,"color":3159},"pending triage","5D08F5",949,"test-utils","[nuxt] instance is not available in server utils unit tests with useRuntimeConfig()","2024-09-18T07:15:06Z","https://github.com/nuxt/test-utils/issues/949",0.8196923,{"description":3167,"labels":3168,"number":3169,"owner":3144,"repository":3170,"state":3146,"title":3171,"updated_at":3172,"url":3173,"score":3174},"Hello,\n\nI'm using NuxtUI with Iconify and four collections: Material Symbols, Heroicons, let's icon and Simple Icons.\n\n\n\n\nHowever, after installing these collections and building my project, the generated packages are several megabytes in size. These packages take up about 80% of my project size, which heavily impacts performance.\n\n\n\n\n\n\ntotal size of my project :\n\n\n\nI’d like to:\n\nImport only the specific icons I use from these collections instead of including everything.\nKnow if there’s a built-in way to achieve this in Iconify/nuxt-icon or any recommended approach.\n\n",[],341,"icon","Reduce Iconify Package Size in NuxtUI – Import Only Needed Icons","2025-02-18T20:16:51Z","https://github.com/nuxt/icon/issues/341",0.8263849,{"description":3176,"labels":3177,"number":3178,"owner":3144,"repository":3170,"state":3179,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v21.7.1\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: bun@1.1.0\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.12.1, nuxt-icon@0.6.10\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nGitHub repo here: https://github.com/kbrgmn/nuxt-content-icon-reproduction (as the browser freezes/crashes, stackblitz does not work well here)\r\n\r\nVery minimal reproduction:\r\n- a single page `[...slug].vue`:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CContentDoc/>\r\n\u003C/template>`)\r\n```\r\n- 2 components\r\n\r\nthe first of which is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"heroicons:information-circle\"/>\r\n\u003C/template>\r\n```\r\n\r\nthe second component is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>Different component here\u003C/p>\r\n \u003Cdiv>\r\n \u003Cslot/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n- 1 single simple content markdown page using the two components:\r\n```md\r\n# Issue reproduction\r\n\r\nFirst component (icon):\r\n::ComponentWithIcon\r\n::\r\n\r\n::SecondComponent\r\nWe have some more content here\r\n- nsetetur sadipscing elitr,\r\n::\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen the page is visited (in dev mode with `bun dev`), it completely freezes up (both Firefox and Chrome), \r\nwith no text being selectable, developer console not opening if it hasn't already been opened or opening blank, browser not even closing properly, and this warning is printed hundreds of times repeatedly in the console:\r\n```\r\nAvoid app logic that relies on enumerating keys on a component instance.\r\nThe keys will be empty in production mode to avoid performance overhead.\r\n```\r\n(the reproduction does not have a single \u003Cscript> tag in the whole repository)\r\n\r\nHowever, this issue does not occur when a production build is being done with `bun run build`.\r\n**When the first component (the nuxt-icon) is removed, the issue does not occur.**\r\n\r\n### Logs\r\n\r\nNo warnings / errors are outputted in the terminal where `nuxt dev` is run.\r\n",[],150,"closed","Freezes up in Nuxt Content","2024-06-26T21:21:31Z","https://github.com/nuxt/icon/issues/150",0.75573677,{"description":3185,"labels":3186,"number":3187,"owner":3144,"repository":3170,"state":3179,"title":3188,"updated_at":3189,"url":3190,"score":3191},"I am using nuxt/icon as part of nuxt/ui (v3 alpha), and I am getting constant warnings about failing to load icons:\n```\n[Icon] failed to load icon `lucide:refresh-cw`\n```\nThis is coming up in my console 8+ times for a single page load, for example. I'm also facing an issue where upon using a new icon I've never loaded before, it won't load or appear at all, with the same warning occuring. It takes fully restarting the Nuxt app for the icon to then appear and become \"loadable\", however I am still facing this warning with the `refresh-cw` icon.\n\nI have the icon collection installed locally and it is detected upon load:\n```bash\nℹ Nuxt Icon server bundle mode is set to local 21:37:28\n✔ Nuxt Icon discovered local-installed 1 collections: lucide 21:37:31\nℹ Nuxt Icon client bundle consist of 8 icons with 1.73KB(uncompressed) in size\n```\nAnd I searched other issues, and have tried the following in my nuxt.config.ts as well to little help:\n```ts\n icon: {\n clientBundle: {\n scan: true,\n sizeLimitKb: 256\n }\n }\n```\nI feel like at this point it's a bug with nuxt/icon, or something is up with nuxt/ui that is causing these issues. Hoping for some help with this or to get it fixed if it is a bug.",[],339,"Constant \"failed to load icon\" warnings even with locally installed collection","2025-02-28T06:56:28Z","https://github.com/nuxt/icon/issues/339",0.7644012,{"description":3193,"labels":3194,"number":3195,"owner":3144,"repository":3170,"state":3179,"title":3196,"updated_at":3197,"url":3198,"score":3199},"I didn't quite understand that iconifyApiOptions in the document is only used to provide CDN for the default official api, or it can provide its own icon.\r\n\r\nFor example:\r\nFirst, I made sure that my custom API was written according to the official version and can be accessed normally.\r\n\r\nhttps://localhost:3000/fal.json?icons=house\r\n\r\nHowever, when I set the options below, it didn't work. Only when publicApiFallback:false is set will it work properly.\r\n\r\n```js\r\niconifyApiOptions: {\r\n url: 'http://localhost:3000',\r\n publicApiFallback: true,\r\n},\r\n```\r\n\u003CIcon name=\"fal:house\" /> // not working\r\n\r\n-------------\r\n\r\nFinally, when I was writing this question, I took a look at the nuxt-icon source code and found this snippet.\r\n```\r\n if (appConfig.nuxtIcon?.iconifyApiOptions?.publicApiFallback) {\r\n addAPIProvider('custom', {\r\n resources: [appConfig.nuxtIcon?.iconifyApiOptions.url],\r\n index: 0\r\n })\r\n return\r\n }\r\n```\r\n\u003CIcon name=\"@custom:fal:house\" /> // it works fine",[],153,"iconifyApiOptions custom API not working","2024-05-09T12:34:33Z","https://github.com/nuxt/icon/issues/153",0.7789507,{"description":3201,"labels":3202,"number":3210,"owner":3144,"repository":3145,"state":3179,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\nAt the moment InputNumber does not react in any way to the presence of ButtonGroup.\n\n\n\n### Additional context\n\n_No response_",[3203,3206,3207],{"name":3204,"color":3205},"enhancement","a2eeef",{"name":3141,"color":3142},{"name":3208,"color":3209},"triage","ffffff",4155,"InputNumber ButtonGroup support","2025-05-15T12:30:59Z","https://github.com/nuxt/ui/issues/4155",0.7855459,{"description":3216,"labels":3217,"number":3220,"owner":3144,"repository":3145,"state":3179,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Description\n\nHi,\n\nit would be nice to have the option to disable the behaviour that the numbers increase or decrease when the buttons are pressed. Because even if I disable the component it doesn't stops. \n\n```js\n\u003CUInputNumber\n :disabled=\"loadingDec || loadingInc\"\n :min=\"0\"\n :max=\"10\"\n v-model=\"quantity\"\n variant=\"soft\"\n size=\"xl\"\n >\u003Ctemplate #decrement>\n \u003CUButton\n :loading=\"loadingDec\"\n variant=\"link\"\n :icon=\"quantity \u003C= 1 ? 'i-heroicons-trash' : 'i-lucide-minus'\"\n @click=\"loadingDec = true\"\n @mousedown=\"onMousedown()\"\n :ui=\"{\n base: `${iconHoverColor} text-gray-500 disabled:text-gray-500 cursor-pointer`,\n }\"\n />\n \u003C/template>\n \u003Ctemplate #increment>\n \u003CUButton\n :loading=\"loadingInc\"\n variant=\"link\"\n icon=\"i-lucide-plus\"\n @click=\"loadingInc = true\"\n :ui=\"{\n base: 'text-gray-500 hover:text-[var(--ui-color-primary-500)] disabled:text-gray-500 cursor-pointer',\n }\"\n />\n \u003C/template>\n \u003C/UInputNumber>\n````\n\nbest,\ngregor\n\n### Additional context\n\n_No response_",[3218,3219],{"name":3204,"color":3205},{"name":3141,"color":3142},3159,"option to disable on press behaviour for increment/decrement for inputNumber component","2025-05-14T15:41:35Z","https://github.com/nuxt/ui/issues/3159",0.7924448,{"description":3226,"labels":3227,"number":3228,"owner":3144,"repository":3229,"state":3179,"title":3230,"updated_at":3231,"url":3232,"score":3233},"`@nuxt/font` is fetching CSS files from Adobe Typekit. However, for fonts with East Asian languages, it is unable to fetch the CSS extensions.\r\n\r\nhttps://github.com/nuxt/fonts/blob/22ae0b124095a8381971d1bf531ceff3eed53024/src/providers/adobe.ts#L109\r\n\r\nBelow is the difference in the Adobe fonts screen:\r\n\r\nInter Variable ( css file include )\r\n\r\n\r\nPretendard ( javascript file include )\r\n\r\n\r\nEast Asian characters (especially CJK) seem to have a large size, so Adobe can't import the entire font by default or all characters. \r\n\r\n\r\n\r\nIf you look at the actual API being called, you'll see that East Asian languages don't come with css files.\r\n - [dpj7fny.js](https://use.typekit.net/dpj7fny.js) - a js file is output\r\n - [dpj7fny.css](https://use.typekit.net/dpj7fny.css) - 412 precondition failed\r\n\r\nCan you add support for these areas? \r\nIf not, you can update the documentation to avoid confusing Asian users.\r\n\r\nIn the logs, it looks like this, making it difficult to determine the cause.\r\n\r\n\r\n\r\nReference:\r\n1. Adobe fonts docs: https://helpx.adobe.com/kr/fonts/using/dynamic-subsetting.html\r\n2. Test font (Pretendard): https://fonts.adobe.com/fonts/pretendard\r\n\r\n",[],105,"fonts","Adobe font provider does not support dynamic subset","2024-04-01T14:38:00Z","https://github.com/nuxt/fonts/issues/105",0.8072894,{"description":3235,"labels":3236,"number":3239,"owner":3144,"repository":3240,"state":3179,"title":3241,"updated_at":3242,"url":3243,"score":3244},"We should have the scroll to top when the aside is changing.\n\nHint: what about having a `key` for the aside based on the docs section (get-started, guide, api, etc.)\n\nhttp://volta.s3.fr-par.scw.cloud/Clean_Shot_2023_01_09_at_12_49_33_0cd5e3b722.mp4\n",[3237],{"name":3155,"color":3238},"ff281a",1137,"nuxt.com","[Aside] Scroll to top is missing when changing docs sections","2023-09-05T08:18:51Z","https://github.com/nuxt/nuxt.com/issues/1137",0.81290483,["Reactive",3246],{},["Set"],["ShallowReactive",3249],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmEUZVmRdnwa74GN7dD_RdXY636BMM0-ROHyXmPIRmxY":-1},"/nuxt/fonts/173"]