\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```",[3165,3166,3167],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4573,"UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.6962983,{"description":3174,"labels":3175,"number":3179,"owner":3155,"repository":3156,"state":3157,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### 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```",[3176,3177,3178],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4237,"throw createError handling in v3 components","2025-05-27T18:04:58Z","https://github.com/nuxt/ui/issues/4237",0.7098994,{"description":3185,"labels":3186,"number":3191,"owner":3155,"repository":3156,"state":3157,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### 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\" />",[3187,3190],{"name":3188,"color":3189},"enhancement","a2eeef",{"name":3149,"color":3150},4529,"Setting required=\"true\" on a \u003CUFormField> should also set it's child required to true","2025-07-31T14:36:21Z","https://github.com/nuxt/ui/issues/4529",0.7112189,{"description":3197,"labels":3198,"number":3201,"owner":3155,"repository":3156,"state":3202,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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```",[3199,3200],{"name":3146,"color":3147},{"name":3149,"color":3150},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":3208,"labels":3209,"number":3217,"owner":3155,"repository":3156,"state":3202,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Environment\n\n```\n------------------------------\n- Operating System: Darwin - macOS 15.6.1 (24G90)\n- Node Version: v22.14.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules\n- Runtime Modules: @nuxt/ui@3.3.2\n- Build Modules: -\n------------------------------\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\n4.0.0-alpha.0\n\n### Reproduction\n\n1. `npm create nuxt@latest repro`, opting to also install Nuxt UI\n2. `cd repro`\n3. Edit `app.vue` as shown below \n4. `npm run dev`\n5. Visit http://localhost:3000\n\n### Description\n\nWhen server-side rendering even the most basic Nuxt UI Form component with one input, there's a hydration mismatch:\n\n`app.vue`\n```vue\n\u003Ctemplate>\n \u003Cu-app>\n \u003Cu-form :state=\"state\">\n \u003Cu-form-field label=\"Serial Number\" name=\"serialnumber\">\n \u003Cu-input v-model=\"state.serialnumber\" />\n \u003C/u-form-field>\n \u003C/u-form>\n \u003C/u-app>\n\u003C/template>\n\n\u003Cscript setup>\nconst state = reactive({\n serialnumber: ''\n})\n\u003C/script>\n```\n\nChrome devtools console:\n```\n[Vue warn]: Hydration children mismatch on \u003Cform id=\"v-0\">…\u003C/form>\u003C!--[-->\u003Cdiv class=\"text-sm\">…\u003C/div>\u003C!--]-->\u003Ctextarea name style=\"display: none;\">\u003C/textarea>\u003C/form> \nServer rendered element contains more child nodes than client vdom. \n at \u003CUForm state= {serialnumber: ''}serialnumber: \"\"[[Prototype]]: Object > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\nThis occurs on Nuxt UI 3.3.2 as well as 4.0.0-alpha.0. It persists even when my form is more complex and has a Valibot schema.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3210,3211,3214,3215],{"name":3146,"color":3147},{"name":3212,"color":3213},"needs reproduction","CB47CF",{"name":3152,"color":3153},{"name":3216,"color":3150},"v4",4846,"Form: Hydration mismatch","2025-09-03T19:01:35Z","https://github.com/nuxt/ui/issues/4846",0.6866631,{"description":3223,"labels":3224,"number":3229,"owner":3155,"repository":3156,"state":3202,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### 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```",[3225,3226],{"name":3146,"color":3147},{"name":3227,"color":3228},"stale","ededed",2634,"FormGroup error with error slot","2025-06-14T15:36:58Z","https://github.com/nuxt/ui/issues/2634",0.68931884,{"description":3235,"labels":3236,"number":3239,"owner":3155,"repository":3156,"state":3202,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.17.1\n- Nuxt Version: 4.0.2\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@11.5.2\n- Builder: -\n- User Config: compatibilityDate, site, modules, supabase, devtools, css, content, nitro, icon, devServer, runtimeConfig, llms, routeRules\n- Runtime Modules: @nuxt/image@1.11.0, @nuxt/ui-pro@3.3.0, @nuxt/content@3.6.3, nuxt-og-image@5.1.9, nuxt-llms@0.1.3, @nuxtjs/supabase@1.6.0, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.4.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv4.0.2\n\n### Reproduction\n\n/\n\n### Description\n\npassing \n\n```ts\n\u003CLazyUContentSearch\n :ui=\"{ modal: 'test-class' }\"\n>\n```\n\nis not working\n\nbut the following does work\n\n```ts\nexport default defineAppConfig({\n uiPro: {\n contentSearch: {\n slots: {\n modal: 'test-class',\n },\n },\n },\n})\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3237,3238],{"name":3146,"color":3147},{"name":3149,"color":3150},4673,"ui prop not working for UContentSearch","2025-08-07T09:35:15Z","https://github.com/nuxt/ui/issues/4673",0.6955681,{"description":3245,"labels":3246,"number":3252,"owner":3155,"repository":3156,"state":3202,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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```",[3247,3248,3249,3251],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3250,"color":3228},"closed-by-bot",{"name":3227,"color":3228},3237,"[UButton] is not working with NuxtErrorBoundary","2025-06-18T09:02:19Z","https://github.com/nuxt/ui/issues/3237",0.69710827,{"description":3258,"labels":3259,"number":3266,"owner":3155,"repository":3155,"state":3202,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### 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_",[3260,3263],{"name":3261,"color":3262},"3.x","29bc7f",{"name":3264,"color":3265},"🔨 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,["Reactive",3272],{},["Set"],["ShallowReactive",3275],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDadgiNR2hN1iMBCkDaUIEv0qFzzFx30iPbqETx4a324":-1},"/nuxt/ui/4496"]