\n\n### Description\n\nThe UInputTag element does not correctly render the error text for schema validation errors for pattern matching of the individual items within its array. \n\nIt works fine showing an error about the length of the array, but not about problems for the items within the array.\n\n\u003Cimg width=\"779\" height=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cf031108-314b-4fd5-9859-cd275b8d3410\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3019,3022,3025],{"name":3020,"color":3021},"bug","d73a4a",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"triage","ffffff",4573,"nuxt","ui","open","UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.6962983,{"description":3037,"labels":3038,"number":3042,"owner":3029,"repository":3030,"state":3031,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gallant-margulis-h6zfnn?file=%2Fapp%2Fpages%2Findex.vue%3A11%2C9&workspaceId=ws_F4rkTtdti87aBypib7R95k\n\n### Description\n\nI'm migrating from v2 to v3 and noticed my global Nuxt error handler no longer works when using v3 components. In the reproduction when I'm calling `throw createError()` on a Nuxt UI button the event doesn't propagate to my `error-handler.js` plugin, however it does when I call the same click handler on a regular `\u003Cbutton>` tag.\nWhen inspecting the console I can see the click handler attached to the Nuxt UI button throws `Uncaught (in promise) H3Error` whereas with a normal button it's not a promise.\nThis used to work just fine with v2 as per this reproduction: https://stackblitz.com/edit/nuxt-ui-ofbazd6t?file=app.vue,plugins%2Ferror-handler.js\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4237,"throw createError handling in v3 components","2025-05-27T18:04:58Z","https://github.com/nuxt/ui/issues/4237",0.7098994,{"description":3048,"labels":3049,"number":3053,"owner":3029,"repository":3030,"state":3031,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.9`\n- Package Manager: `pnpm@10.9.0`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `css`, `devServer`, `content`, `future`, `compatibilityDate`, `nitro`, `eslint`, `icon`, `llms`\n- Runtime Modules: `@nuxt/eslint@1.3.0`, `@nuxt/image@1.10.0`, `@nuxt/ui-pro@3.1.0`, `@nuxt/content@3.5.1`, `nuxt-og-image@5.1.2`, `nuxt-llms@0.1.2`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### UI Version\n\nv3.1.0\n\n### Safari Version\n\nv18.5 (20621.2.5.11.5)\n\n### Reproduction\n\n[https://github.com/saltytostitos/ui-docs-input-type-search](https://github.com/saltytostitos/ui-docs-input-type-search)\n\nRepro using UI Pro Docs Template [https://github.com/nuxt-ui-pro/docs/tree/main](https://github.com/nuxt-ui-pro/docs/tree/main)\n\n### Description\n\nInput/Select sizes do not match on Safari Desktop. \n\n\n\nThey seem to match on Chrome.\n\n\n\nAs shown, the Tailwind Only fields work correctly (using same css classes).\n\nObservations:\n- Oddly enough, when using ```\u003CUFormField />``` the ```type=\"text\"``` and ```\u003CUSelect />``` fields match heights, but the ```type=\"search\"``` is the outlier.\n- When NOT using ```\u003CUFormField />```, then the ```type=\"text\"``` field is the outlier. \n\n### Additional context\n\nAs rendered in Dev Tools:\n\n\n\nAfter removing ```type=\"search\"``` in dev tools.\n\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3050,3051,3052],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4014,"Input Fields on ```Safari``` has Mismatched Sizes","2025-04-29T04:28:11Z","https://github.com/nuxt/ui/issues/4014",0.7102624,{"description":3059,"labels":3060,"number":3066,"owner":3029,"repository":3030,"state":3031,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### Description\n\nWhile using NuxtUI (which is awesome btw \u003C3 ) , I understood that you can set the `\"required\"` prop to any form element on itself directly without using it in a `\u003CUFormField>`. And that's great because you don't always need a label or you can set it as required without having the asterisk on it's label.\n\nBut I think that when you set `\"required\"` **directly** on the `\u003CUFormField>`, it's child should be required too (and having `\"required\" `in the DOM too) as I don't see any reason it shouldn't ; and also it's repetitve to set it to both components. Correct me if I am missing something or if there's a reason for it !\n\n\n### Additional context\n\n[Here is an example on the NuxtUI website ](https://ui.nuxt.com/components/form-field#label) where a \u003CUFormField> is required but it's \u003CUInput> child is not set required in the DOM :\n\u003Cimg width=\"779\" height=\"298\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/5d37f843-b915-4e9e-af08-ee662244388f\" />\nThe input rendered in the DOM :\n\u003Cimg width=\"428\" height=\"128\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3be31e65-187f-48cb-8ea5-b5a1cb7286dc\" />",[3061,3064,3065],{"name":3062,"color":3063},"enhancement","a2eeef",{"name":3023,"color":3024},{"name":3026,"color":3027},4529,"Setting required=\"true\" on a \u003CUFormField> should also set it's child required to true","2025-07-15T12:21:20Z","https://github.com/nuxt/ui/issues/4529",0.7112189,{"description":3072,"labels":3073,"number":3076,"owner":3029,"repository":3030,"state":3077,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.0\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, css, build, supabase, content, pinia, devtools, debug, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui-pro@3.1.0, @vueuse/nuxt@13.1.0, @nuxt/content@3.5.1, @nuxt/icon@1.12.0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.6, @nuxt/test-utils@3.17.2, @nuxtjs/supabase@1.5.0, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CUForm :state=\"state\" class=\"w-1/2 p-4\">\n \u003CUFormField v-for=\"(item, index) in items\" :key=\"index\" :label=\"index\" :name=\"index\">\n \u003CUColorPicker v-if=\"index == 'color'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUSlider v-if=\"index == 'range' && typeof item == 'number'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />\n \u003CUInput v-else :type=\"index\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003Cpre class=\"w-1/2 bg-gray-200 p-4 leading-14\"> {{ state }} \u003C/pre>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\nconst state = ref({}) // ISSUE: Default values are not loaded in the v-model\nconst items = {\n number: 50,\n reset: true, // ISSUE: UInput is not supporting boolean values for v-model\n submit: true, // ISSUE: UInput is not supporting boolean values for v-model\n search: \"search\",\n date: \"2025-04-25\",\n text: \"text\",\n color: \"#ccffcc\",\n button: true, // ISSUE: UInput is not supporting boolean values for v-model\n checkbox: false, // ISSUE: UInput is not supporting boolean values for v-model\n \"datetime-local\": \"2025-04-25T10:49:31\",\n email: \"nobody@gmail.com\",\n file: \"\",\n hidden: \"hidden\",\n image: \"image.svg\",\n month: \"2025-04\",\n password: \"topsecret\",\n radio: true, // ISSUE: UInput is not supporting boolean values for v-model\n range: 50, // Default value is displayed but not loaded in the v-model\n tel: \"0612345678\",\n time: \"10:49:31\",\n url: \"www.chatgpt.com\",\n week: \"2025-W16\"\n}\n// const state = reactive(items) // Workaround for default-value\n\u003C/script>\n```\n\n### Description\n\nI made a small comparison between `UInput` and other components like `UColorPicker` and `USlider` and I stumbled on a couple of issues.\n* `default-value` is not displayed except for `range` and `USlider`\n* `default-value` is never initialized in the `v-model`\n* Booleans are not supported in the `v-model` and I was therefore not able to make them reactive.\n\nWorkaround is to load the default value via the `state`, but that requires an additional step and is therefore not ideal for dynamic forms\n`const state = reactive(items)`\n\nWorkaround for working with booleans, but I am not sure how to apply the `v-model` yet🤔\n`\u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />`\n\n\n### Additional context\n\nDefault values via `default-value`\n\nDefault value via `state`\n\n\n### Logs\n\n```shell-script\n\n```",[3074,3075],{"name":3020,"color":3021},{"name":3023,"color":3024},3983,"closed","Default values are not loaded in the v-model","2025-06-30T13:04:54Z","https://github.com/nuxt/ui/issues/3983",0.66849226,{"description":3083,"labels":3084,"number":3089,"owner":3029,"repository":3030,"state":3077,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI'm using the FormGroup component, and I've set the error to true, however unless it contains a non-empty text value the error slot won't render. Is this intentional or a bug? I would tend to think it's the latter.\n\n```\n\u003CUFormGroup :error=\"true\">\n \u003Ctemplate #error>\n \u003Cdiv>I will not render\u003C/div>\n \u003Ctemplate>\n\u003C/UFormGroup>\n```\n\n```\n\u003CUFormGroup :error=\"true && 'some error'\">\n \u003Ctemplate #error>\n \u003Cdiv>I will render\u003C/div>\n \u003Ctemplate>\n\u003C/UFormGroup>\n```",[3085,3086],{"name":3020,"color":3021},{"name":3087,"color":3088},"stale","ededed",2634,"FormGroup error with error slot","2025-06-14T15:36:58Z","https://github.com/nuxt/ui/issues/2634",0.68931884,{"description":3095,"labels":3096,"number":3102,"owner":3029,"repository":3030,"state":3077,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.2\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/bug-report-ubutton-8st7kw\n\n### Description\n\nWhen I throw an error within the click event of `UButton`, the `NuxtErrorBoundary` component does not catch the error as expected. However, if I use a standard `\u003Cbutton>` tag instead of `UButton`, the error is caught correctly by the NuxtErrorBoundary.\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3097,3098,3099,3101],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3100,"color":3088},"closed-by-bot",{"name":3087,"color":3088},3237,"[UButton] is not working with NuxtErrorBoundary","2025-06-18T09:02:19Z","https://github.com/nuxt/ui/issues/3237",0.69710827,{"description":3108,"labels":3109,"number":3116,"owner":3029,"repository":3029,"state":3077,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.13.0\r\n- Nuxt Version: 3.8.0\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.0\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: telemetry, devtools, ssr, typescript, components, modules, vite, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/image@1.0.0\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-m29wph?file=pages%2Findex.vue\n\n### Describe the bug\n\n## Description\r\n`NuxtErrorBoundary` component does not work properly under these conditions:\r\n\r\n- nuxt config: `ssr: false`\r\n- child component throws error in script setup\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>child component\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nthrow new Error('just a stupid error for reproduction purpose!');\r\n\u003C/script>\r\n```\r\n- child component is wrapped between `NuxtErrorBoundary` component in parent component\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n parent component\r\n\r\n \u003CNuxtErrorBoundary>\r\n \u003CChild />\r\n\r\n \u003Ctemplate #error=\"{error}\">\r\n error handled: {{ error }}\r\n \u003C/template>\r\n \u003C/NuxtErrorBoundary>\r\n \u003Cdiv>\r\n\u003C/template>\r\n```\r\n\r\n## Problem\r\napplication does not handle component error and just shows error 500 page.\r\n\r\n## Expectation\r\n`NuxtErrorBoundary` should render error slot correctly. application should not show error 500 page\n\n### Additional context\n\nI checked source code of `NuxtErrorBoundary` and noticed that there is a wrong condition for setting error\r\n```js\r\nonErrorCaptured((err, target, info) => {\r\n if (import.meta.client && !nuxtApp.isHydrating) {\r\n emit('error', err);\r\n nuxtApp.hooks.callHook('vue:error', err, target, info);\r\n error.value = err;\r\n return false; \r\n }\r\n});\r\n```\r\nwhen ssr is false, there is no need to check `nuxtApp.isHydrating`.\n\n### Logs\n\n_No response_",[3110,3113],{"name":3111,"color":3112},"3.x","29bc7f",{"name":3114,"color":3115},"🔨 p3-minor","FBCA04",24889,"`NuxtErrorBoundary` does not work properly when ssr is set to false","2023-12-25T17:54:02Z","https://github.com/nuxt/nuxt/issues/24889",0.69881266,{"description":3122,"labels":3123,"number":3127,"owner":3029,"repository":3030,"state":3077,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### Environment\n\n```\n- Operating System: `Linux`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.2`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.10.0`\n- Builder: `-`\n- User Config: `devtools`, `modules`, `css`, `future`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.1.1`, `@nuxt/eslint@1.3.1`\n- Build Modules: `-`\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\nSample code for fiddling:\n```vue\n\u003Ctemplate>\n \u003CUCard>\n \u003CUFormField>\n \u003CUCheckbox v-model=\"isRtl\" label=\"Right to Left\" />\n \u003C/UFormField>\n \n \u003Cdiv class=\"mt-4 space-y-4 space-x-4\">\n \u003CUFormField label=\"Dynamic Direction Select\">\n \u003CUSelect\n v-model=\"selected\"\n :items=\"items\"\n :dir=\"dir\"\n label=\"Dynamic Direction Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n \n \u003CUFormField label=\"Left to Right\">\n \u003CUSelect\n v-model=\"selected2\"\n :items=\"items\"\n dir=\"ltr\"\n label=\"LTR Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Right to Left\">\n \u003CUSelect\n v-model=\"selected3\"\n :items=\"items\"\n dir=\"rtl\"\n label=\"RTL Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n \u003C/div>\n \u003C/UCard>\n\u003C/template>\n\n\u003Cscript setup>\nconst isRtl = ref(false)\nconst selected = ref('')\nconst selected2 = ref('')\nconst selected3 = ref('')\n\nconst items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n]\n\nconst dir = computed(() => isRtl.value ? 'rtl' : 'ltr')\n\u003C/script>\n```\n\n### Description\n\nIt seems `USelect` component ignores the `dir` attribute. This make it inconsistence with the rest of UI components. This issue makes the UI look wierd when localized to RTL languages.\nBoth `\u003CUSelect dir=\"rtl\" ...>` and `\u003CUSelect dir=\"ltr\" ...>` component have `dir=\"ltr\"`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3124,3125,3126],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4131,"USelect ignores dir attribute","2025-05-13T14:10:12Z","https://github.com/nuxt/ui/issues/4131",0.7023263,{"description":3133,"labels":3134,"number":3140,"owner":3029,"repository":3030,"state":3077,"title":3141,"updated_at":3142,"url":3143,"score":3144},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.14.1592\n\n### Reproduction\n\nHere is my dependencies:\n```json\n \"dependencies\": {\n \"@nuxt/ui\": \"https://pkg.pr.new/@nuxt/ui@59d3375\",\n \"@vueuse/nuxt\": \"^11.3.0\",\n \"nuxt\": \"^3.14.1592\",\n \"nuxt-auth-sanctum\": \"^0.5.2\",\n \"tailwindcss\": \"4.0.0-alpha.34\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n }\n```\nHere is main template:\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { useDebounceFn } from '@vueuse/core'\n\nconst places = ref([])\nconst placeItems = ref([])\nconst placeOpen = ref(true)\nconst placeLoading = ref(false)\nconst placeSearch = useDebounceFn(async q => {\n if (q.length > 2) {\n placeLoading.value = true\n placeItems.value = await $fetch('http://localhost:85/api/v1/places', { query: { q } })\n placeOpen.value = true\n placeLoading.value = false\n }\n}, 500)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUFormField label=\"Places\" required>\n \u003CUInputMenu name=\"places\"\n v-model=\"places\"\n v-model:open=\"placeOpen\"\n :items=\"placeItems\"\n :loading=\"placeLoading\"\n :reset-search-term-on-blur=\"false\"\n @focus=\"placeOpen = true\"\n @update:search-term=\"placeSearch\"\n value-key=\"id\"\n label-key=\"name\"\n icon=\"i-lucide-search\"\n placeholder=\"Start typing...\"\n class=\"w-full\"\n multiple\n required />\n \u003C/UFormField>\n\u003C/template>\n```\n[Here](https://skrinshoter.ru/vSpJnffwygq) is video demonstration :)\n\n### Description\n\n`placeOpen.value = true` is not opening dropdown after fetching places.",[3135,3136,3137,3138,3139],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},{"name":3100,"color":3088},{"name":3087,"color":3088},2724,"UInputMenu property OPEN not working properly","2025-06-18T09:05:39Z","https://github.com/nuxt/ui/issues/2724",0.7024262,["Reactive",3146],{},["Set"],["ShallowReactive",3149],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDadgiNR2hN1iMBCkDaUIEv0qFzzFx30iPbqETx4a324":-1},"/nuxt/ui/4496"]