\n\u003C/template>\n```\n\nError:\n```\nType '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))'.\n Type '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & (() => void | Promise\u003Cvoid>)'.ts(2322)\nForm.vue.d.ts(59, 18): The expected type comes from property 'onSubmit' which is declared here on type '__VLS_NormalizeComponentEvent\u003CNonNullable\u003C{ onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003C...>)); ... 11 more ...; class?: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps>, { ...; }, \"onSubmit\", \"submit\", \"submi...'\n---\n(property) onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))\n```\n\n### Description\n\n`\u003CUForm>`s `@submit` event handler type require that it does not return any value. This is needlessly constraining.\n\n### Additional context\n\nThis is not required by the implementation, but instead wholly caused by the types of `onSubmit` property:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L53\n\nResult of the `onSubmit` prop is not used at all:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L243\n\nReplacing the type of `onSubmit` with this should be enough:\n```typescript\nexport interface FormProps\u003CS extends FormSchema, T extends boolean = true> {\n // ...\n onSubmit?: (event: FormSubmitEvent\u003CFormData\u003CS, T>>) => unknown\n}\n```\nThis should still allow passing event handlers without arguments.\n\n### Logs\n\n```shell-script\n\n```",[3159,3162],{"name":3160,"color":3161},"bug","d73a4a",{"name":3146,"color":3147},4873,"`UForm` `onSubmit` type is needlessly constrained","2025-09-02T05:54:14Z","https://github.com/nuxt/ui/issues/4873",0.72916746,{"description":3169,"labels":3170,"number":3174,"owner":3149,"repository":3150,"state":3151,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Environment\n\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.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/fragrant-fog-7ck4yf\n\nThe schema specifies that the items within the list must be numbers, and the UForm catches the error (displayed in the UAlert below), but the UInputTag object doesn't display it\n\n\u003Cimg width=\"780\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9594e307-2f7d-4928-b877-d08795abc4b5\" />\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```",[3171,3172,3173],{"name":3160,"color":3161},{"name":3143,"color":3144},{"name":3146,"color":3147},4573,"UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.7317951,{"description":3180,"labels":3181,"number":3185,"owner":3149,"repository":3150,"state":3186,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.1.28\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-s2opq2ko?file=app/pages/index.vue\n\n### Description\n\nGiven this component nesting:\n\n- `UForm`\n - `UModal`\n - `UForm`\n\nThis is rendered as the following html:\n\n- `UForm` -> `form` - ✅\n - `UModal` -> `div` - ✅ (teleported to root)\n - `UForm` -> `div` - ❌ I am expecting `form`.\n\nI couldn't find a mention in the documentation that this is expected behaviour.\n\nTo reproduce:\n1. Run reproduction\n2. Click \"Open modal\" button\n3. Inspect the nested form element. It's a `div`:\n\n\nI am happy to have a crack at a PR, if you're willing to point me in the right direction 😌\n\n\n### Additional context\n\nFor context, this is our use case:\n* User fills out an onboarding form\n* One field in the onboarding form is business details\n* User has option to populate business details via business number (eg. [DUNS](https://www.dnb.com/en-us/smb/duns.html))\n* Business number field open in modal\n* User can enter business number in form in modal\n* User submits form, it populates state in parent form\n\n### Logs\n\n```shell-script\n\n```",[3182,3183,3184],{"name":3160,"color":3161},{"name":3143,"color":3144},{"name":3146,"color":3147},3913,"closed","[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.6806712,{"description":3192,"labels":3193,"number":3198,"owner":3149,"repository":3150,"state":3186,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### 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```",[3194,3195],{"name":3160,"color":3161},{"name":3196,"color":3197},"stale","ededed",2634,"FormGroup error with error slot","2025-06-14T15:36:58Z","https://github.com/nuxt/ui/issues/2634",0.6843918,{"description":3204,"labels":3205,"number":3209,"owner":3149,"repository":3150,"state":3186,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI have a form like the following example:\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>Training Form\u003C/h1>\n \u003C/div>\n \u003CUForm :state=\"state\" :schema=\"schema\" @submit=\"handleSubmit\">\n \u003CUFormGroup label=\"Name\" name=\"name\">\n \u003CUInput v-model=\"state.name\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Training Week\" name=\"trainingWeek\">\n \u003Cdiv v-for=\"(day, index) in state.trainingWeek\" :key=\"index\">\n \u003CUFormGroup label=\"Day\" name=\"trainingWeek[' + index + '].day\">\n \u003CUInput v-model=\"day.day\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Exercises\" name=\"trainingWeek[' + index + '].exercises\">\n \u003Cdiv v-for=\"(exercise, exerciseIndex) in day.exercises\" :key=\"exerciseIndex\">\n \u003CUInput v-model=\"exercise.exerciseName\" />\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addExercise(index)\">Add Exercise\u003C/UButton>\n \u003C/div>\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addDay\">Add Day\u003C/UButton>\n \u003CUButton type=\"submit\">Submit\u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from \"zod\";\nimport type { FormSubmitEvent } from \"#ui/types\";\nconst state = reactive({\n name: \"\",\n trainingWeek: [\n {\n day: \"\",\n exercises: [\n {\n exerciseName: \"\",\n },\n ],\n },\n ],\n});\n\nconst schema = z.object({\n name: z.string().min(1, \"Required field\"),\n trainingWeek: z.array(\n z.object({\n day: z.string().min(1, \"Required field\"),\n exercises: z.array(\n z.object({\n exerciseName: z.string().min(1, \"Required field\"),\n }),\n ),\n }),\n ),\n});\n\ntype Schema = z.infer\u003Ctypeof schema>;\n\nconst handleSubmit = (event: FormSubmitEvent\u003CSchema>) => {\n console.log(JSON.stringify(event.data, null, 2));\n};\n\nconst addExercise = (index: number) => {\n state.trainingWeek[index].exercises.push({ exerciseName: \"\" });\n};\n\nconst addDay = () => {\n state.trainingWeek.push({ day: \"\", exercises: [{ exerciseName: \"\" }] });\n};\n\u003C/script>\n\n```\n\nI render the form based on state and dynamically add fields.\n\nThe form automatically sets up errors for name ( or any first level fields ) but doesn't set up errors for nested ones like day or exerciseName in the above example\n\nWhat's the proper way to create dynamic forms and avail error setting ? \n\nI'm able to get the following:\n```json\nprofile.vue:68 ZodError: [\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"day\"\n ]\n },\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"exercises\",\n 0,\n \"exerciseName\"\n ]\n }\n]\n```\noutput by parsing schema \n```js\nwatchEffect(() => {\n try {\n schema.parse(state);\n } catch (error) {\n console.error(error);\n }\n});\n```\n\n",[3206],{"name":3207,"color":3208},"question","d876e3",2674,"How to ensure UForm and UFormGroup auto assigns errors for nested dynamic form.","2024-11-18T16:59:59Z","https://github.com/nuxt/ui/issues/2674",0.6874621,{"description":3215,"labels":3216,"number":3219,"owner":3149,"repository":3150,"state":3186,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nIt would be great if there was an option for eager validation if there are errors present on the group.\n\nFor example, when initially filling out the field you don't want eager validation as it's distracting when you aren't finished typing.\n\nHowever if you tab away and there's an error, when fixing the error you'd want immediate feedback with eager-validation.\n\nSo I propose a new prop: `eager-validation-on-error=\"true\"` to improve the UX of forms.\n\nThanks!\n\n### Additional context\n\n_No response_",[3217,3218],{"name":3140,"color":3141},{"name":3143,"color":3144},2599,"FormGroup eager-validation when errors exist","2025-06-29T17:15:23Z","https://github.com/nuxt/ui/issues/2599",0.70505327,{"description":3225,"labels":3226,"number":3230,"owner":3149,"repository":3149,"state":3186,"title":3231,"updated_at":3232,"url":3233,"score":3234},"Hello,\n\nAs shown in the [Nuxt documentation](https://nuxt.com/docs/4.x/getting-started/error-handling#createerror), the `createError` function accepts a `statusMessage` parameter. However, using this parameter now triggers the following warning:\n\n> [h3] Please prefer using `message` for longer error messages instead of `statusMessage`. In the future, `statusMessage` will be sanitized by default.\n\nThis creates some confusion when combining `createError` with components like `\u003CUError>` from **Nuxt UI** ([Error component docs](https://ui.nuxt.com/components/error#within-errorvue)), which consumes the `NuxtError` object.\n\n**Example Implementation (`error.vue`):**\n\nHere is a standard error page that uses `\u003CUError>` and is therefore affected by this warning.\n\n```typescript\n\u003Cscript setup lang=\"ts\">\nimport type { NuxtError } from '#app'\n\ndefineProps\u003C{\n error: NuxtError\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUApp>\n \u003CUHeader />\n \u003CUError :error=\"error\" />\n \u003CUFooter />\n \u003C/UApp>\n\u003C/template>\n```",[3227],{"name":3228,"color":3229},"pending triage","E99695",32831,"createError: The statusMessage parameter causes a deprecation warning","2025-07-31T22:10:17Z","https://github.com/nuxt/nuxt/issues/32831",0.7177056,{"description":3236,"labels":3237,"number":3252,"owner":3149,"repository":3149,"state":3186,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Describe the feature\r\n\r\nI saw that Astro 2.0's error messages were quite lovely, and thought I'd share and pose the question of whether we could make similar enhancements to Nuxt's error messaging.\r\n\r\n\r\n\r\nThe two biggest wins I see implemented:\r\n- Direct links to docs related specifically to the type of error\r\n- The ability to \"open in editor\" directly to the file in your code that initiated the error\r\n\r\nBeyond that, just the overall aesthetic presentation of the error is well-executed.\r\n\r\nI'd be more than happy to assist in any way possible to improve error messaging - particularly on the visual design / presentational side. I'll do some initial digging into the Nuxt code to see how you currently source errors and where the presentation template resides. Would love to hear thoughts from the core team and community on these and other ways to improve the error messaging!\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3238,3240,3243,3246,3249],{"name":3140,"color":3239},"8DEF37",{"name":3241,"color":3242},"discussion","538de2",{"name":3244,"color":3245},"3.x","29bc7f",{"name":3247,"color":3248},"dx","C39D69",{"name":3250,"color":3251},"🍰 p2-nice-to-have","0E8A16",18606,"Improved Error Messages","2023-03-23T16:35:37Z","https://github.com/nuxt/nuxt/issues/18606",0.7177141,{"description":3258,"labels":3259,"number":3267,"owner":3149,"repository":3150,"state":3186,"title":3268,"updated_at":3269,"url":3270,"score":3271},"### 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```",[3260,3261,3264,3265],{"name":3160,"color":3161},{"name":3262,"color":3263},"needs reproduction","CB47CF",{"name":3146,"color":3147},{"name":3266,"color":3144},"v4",4846,"Form: Hydration mismatch","2025-09-03T19:01:35Z","https://github.com/nuxt/ui/issues/4846",0.721756,["Reactive",3273],{},["Set"],["ShallowReactive",3276],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fppJV2Xn3F85tdfFttGt_U8tb7VW9PHLsFgATZRNy1xk":-1},"/nuxt/ui/2389"]