\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```",[3137,3140],{"name":3138,"color":3139},"bug","d73a4a",{"name":3141,"color":3142},"triage","ffffff",4873,"nuxt","ui","open","`UForm` `onSubmit` type is needlessly constrained","2025-09-02T05:54:14Z","https://github.com/nuxt/ui/issues/4873",0.76218307,{"description":3152,"labels":3153,"number":3159,"owner":3144,"repository":3145,"state":3146,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### 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```",[3154,3155,3158],{"name":3138,"color":3139},{"name":3156,"color":3157},"v3","49DCB8",{"name":3141,"color":3142},4237,"throw createError handling in v3 components","2025-05-27T18:04:58Z","https://github.com/nuxt/ui/issues/4237",0.76310825,{"description":3165,"labels":3166,"number":3176,"owner":3144,"repository":3145,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"Currently, the `@error` event is only triggered after the form is submitted. However, validation also runs by default on `blur`, `input`, and `change` events. This means it's not possible to handle validation errors unless the form is submitted. \n\nWhy doesn’t the `@error` event emit on every validation failure, regardless of when it occurs?\n\n---\n\nAlso I think that we should be able to detect if user is coming from `submit` event or not while dealing with `@error`.",[3167,3170,3171,3174],{"name":3168,"color":3169},"enhancement","a2eeef",{"name":3156,"color":3157},{"name":3172,"color":3173},"closed-by-bot","ededed",{"name":3175,"color":3173},"stale",4168,"closed","UForm should emit `@error` on all validation failures, not just on submit","2025-08-20T02:08:44Z","https://github.com/nuxt/ui/issues/4168",0.7098256,{"description":3183,"labels":3184,"number":3187,"owner":3144,"repository":3145,"state":3177,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Description\n\nBased on https://ui.nuxt.com/components/form#error-event there is a way to attach things \"on form error\", like scroll the an element into view.\n\nThis does not help on back-end logic escalating a validation error or something some other logic coming from an external source.\n\nI tried\n\n- throwing an exception within submit, did not trigger the error handler\n- add errors through form refs `setErrors()`, then follow up with a `validate()` but that did nothing as well.\n\nIt would be nice to have a way to trigger the `@error` handler within the `@submit` handler, something in the spirit of:\n\n```js\nasync function onSubmit(event: FormSubmitEvent\u003C...>) {\n try { await api.doLogin() }\n catch (e) { event.fail() }\n}\n```\n\nNot sure this would be a good pattern though. Maybe if an exception is thrown within the submit handler, it could trigger the error handler as well?\n\n### Additional context\n\n_No response_",[3185,3186],{"name":3168,"color":3169},{"name":3156,"color":3157},4124,"UForm: Retrigger error handler on backend errors","2025-07-11T11:01:02Z","https://github.com/nuxt/ui/issues/4124",0.720136,{"description":3193,"labels":3194,"number":3198,"owner":3144,"repository":3145,"state":3177,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### Description\n\nIn v2 there was the option to validate a form only when submitting:\n\n```html\n\u003CUForm\n :schema\n :state\n :validate-on=\"['submit']\"\n>\n```\n\nWith v3 this option is gone. Can it be brought back?\n\n### Additional context\n\nI once read that form validation / show errors on submit and on blur are the best user experiences (depending on usecase) but the first one isnt possible anymore?\n\nRelated: https://github.com/nuxt/ui/issues/3853",[3195,3196,3197],{"name":3168,"color":3169},{"name":3156,"color":3157},{"name":3141,"color":3142},4540,"Docs: Form validate on-submit","2025-07-22T19:11:45Z","https://github.com/nuxt/ui/issues/4540",0.7425303,{"description":3204,"labels":3205,"number":3210,"owner":3144,"repository":3145,"state":3177,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\nIs it possible to use a UForm within a UModal, but have the submit button in the modal's footer? I tried to wrap the whole modal with no success:\n\n```vue\n\u003Ctemplate>\n \u003CUForm :schema=\"userCreateSchema\" :state @submit=\"onSubmit\">\n \u003CUModal title=\"Create user\">\n \u003Ctemplate #body>\n \u003CUFormField label=\"First name\" name=\"givenName\" required>\n \u003CUInput v-model=\"state.givenName\" />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[3206,3209],{"name":3207,"color":3208},"question","d876e3",{"name":3156,"color":3157},4401,"How to use a UForm within a UModal with footer?","2025-08-21T09:37:27Z","https://github.com/nuxt/ui/issues/4401",0.74421465,{"description":3216,"labels":3217,"number":3220,"owner":3144,"repository":3145,"state":3177,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\n\nDocumentation error.\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nNot applicable\n\n### Description\n\nUnder this [subheading](https://ui.nuxt.com/components/form#input-events), there is a link to a file [here](https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/FormExampleElements.vue) but it does not have the key `validate-on` on any of the components. I believe that it should be there.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3218,3219],{"name":3138,"color":3139},{"name":3141,"color":3142},2812,"[docs] UForm's validate-on example is incorrect","2025-05-23T16:34:02Z","https://github.com/nuxt/ui/issues/2812",0.75057673,{"description":3226,"labels":3227,"number":3231,"owner":3144,"repository":3145,"state":3177,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### 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```",[3228,3229,3230],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.75092494,{"description":3237,"labels":3238,"number":3242,"owner":3144,"repository":3145,"state":3177,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### Environment\n\nOperating System: mac os\nNode Version: v22.14.0\nLaravel Version: 12.12.0\nNitro Version: -\nPackage Manager: bun 1.2.11\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\nN/A\n\n### Description\n\nI'm using the example from the documentation for implementing a login and the button behaves like a link. I've already tried as=\"button\" and it doesn't work.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from 'zod'\nimport type { FormSubmitEvent } from '@nuxt/ui'\n\nconst schema = z.object({\n email: z.string().email('Invalid email'),\n password: z.string().min(8, 'Must be at least 8 characters')\n})\n\ntype Schema = z.output\u003Ctypeof schema>\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n email: undefined,\n password: undefined\n})\n\nconst toast = useToast()\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })\n console.log(event.data)\n}\n\u003C/script>\n\u003Ctemplate>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Email\" name=\"email\">\n \u003CUInput v-model=\"state.email\" />\n \u003C/UFormField>\n \u003CUFormField label=\"Password\" name=\"password\">\n \u003CUInput v-model=\"state.password\" type=\"password\" />\n \u003C/UFormField>\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3239,3240,3241],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4095,"UButton works as a link in Inertia","2025-05-07T08:12:17Z","https://github.com/nuxt/ui/issues/4095",0.7517742,{"description":3248,"labels":3249,"number":3253,"owner":3144,"repository":3145,"state":3177,"title":3254,"updated_at":3255,"url":3256,"score":3257},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: bun@1.2.4\n- Builder: -\n- User Config: compatibilityDate, devtools, runtimeConfig, nitro, routeRules, modules, ui, supabase, site, feed, sitemap, robots, schemaOrg, image, hub\n- Runtime Modules: @nuxt/ui@3.0.1, @nuxtjs/supabase@1.5.0, @vueuse/nuxt@13.0.0, @nuxt/image@1.10.0, @nuxthub/core@0.8.18, @nuxtjs/sitemap@7.2.9, nuxt-module-feed@1.1.4, @nuxtjs/robots@5.2.8, nuxt-schema-org@5.0.4, nuxt-link-checker@4.3.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/adoring-gates-fd8q9s\n\n### Description\n\n## Expected behaviour\nValidation should trigger when a user adds or removes items from an input menu that has the `multiple` prop\n\n## Actual behaviour\nValidation seems to trigger when the input menu is opened or closed, but not when items are removed\n\n## Reproduction\n1. Use the codesandbox provided\n2. Add all 4 items to the input\n3. Validation should trigger saying 3 max\n4. Remove an item\n5. **Validation error persists, when it should be gone**\n6. Remove all the items\n7. Add a single item\n8. Remove them item\n9. **Validation error should appear stating 1 item min, but it doesn't**\n\n### Additional context\n\n## Screen capture\n\nhttps://github.com/user-attachments/assets/fccda9b1-2837-4b7d-85ad-5d63480582a1\n\n### Logs\n\n```shell-script\n\n```",[3250,3251,3252],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},3726,"Form validation with InputMenu doesn't trigger when expected","2025-04-08T19:48:00Z","https://github.com/nuxt/ui/issues/3726",0.7548814,["Reactive",3259],{},["Set"],["ShallowReactive",3262],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fshcuCKdBxg5lyZHtTgJt264lnbWfuPZEfiLh0x7OEVo":-1},"/nuxt/ui/3674"]