\n```\n\nAfter:\n```html\n\u003C!-- `ui` prop is the same as `app.config.ts` theming config\n\u003CUTheme :ui=\"{\n formField: {\n\t slots: {\n\t root: \"flex max-sm:flex-col justify-between items-center gap-4\",\n\t},\n },\n}\">\n \u003CUForm ...>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUForm/>\n\u003C/UTheme>\n```\n\n## Benefits\n- Easily componentized. I could create a `AppForm` component which contains the `UTheme` usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.\n- Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one\n\n## Implementation\nI'd tentatively be willing to implement this. My approach would be:\n- Create `UTheme`, it should have a `ui` and `uiPro` prop, each of which take the same type as the `app.config.ts`\n- `provide()` those props\n- `inject()` those props into each component and merge with passed in `ui` field.\n- Theme priority order should be:\n 1. `ui` prop passed to component\n 2. `ui` prop coming from UTheme component\n 3. `ui` config coming from `app.config.ts`\n\n### Additional context\n\n_No response_",[2902,2905,2908],{"name":2903,"color":2904},"enhancement","a2eeef",{"name":2906,"color":2907},"v3","49DCB8",{"name":2909,"color":2910},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7449191,{"description":2920,"labels":2921,"number":2936,"owner":2912,"repository":2912,"state":2914,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Describe the feature\r\n\r\nEdit : Form actions have been released as a Nuxt module 馃帀 Please try it and leave feedback.\r\n\r\n- Docs : https://form-actions-nuxt.pages.dev/\r\n- Module : https://nuxt.com/modules/form-actions\r\n- GitHub : https://github.com/Hebilicious/form-actions-nuxt\r\n\r\n--- \r\n\r\nProgressively enhanced patterns relies on using native forms to make it easier to have apps that works without JavaScript. This can work well with Nuxt Server components too, as it could allow client-server communication with 0client side javascript. While this is not desirable in all scenarios, and having this as the default to do everything is very opinionated, it would be nice to support these patterns at the framework level : \r\n\r\nMultiple frameworks already support this pattern (Remix, SvelteKit, SolidStart ...), and Next is adding it :\r\n\r\n\r\nFor Nuxt, it's (almost) possible already to implement this patterns by doing something like this (in /server/api/pespa.ts) : \r\n\r\n```ts\r\nimport { EventHandler, H3Event } from \"h3\"\r\n\r\ntype Actions = {\r\n [key: string]: EventHandler\r\n}\r\n\r\nconst defineFormActions = (actions: Actions) => async (event: H3Event) => {\r\n const action = Object.keys(getQuery(event))[0] ?? \"default\"\r\n const method = getMethod(event)\r\n if (method === \"POST\") return defineEventHandler(actions[action])(event)\r\n}\r\n\r\nexport default defineFormActions({\r\n default: async (event) => {\r\n const form = await readMultipartFormData(event)\r\n const body = await readBody(event)\r\n const contentType = getHeader(event, \"content-type\")\r\n console.log({ form, body, contentType })\r\n return sendRedirect(event, \"/pespa\")\r\n },\r\n logout: async (event) => {\r\n const form = await readMultipartFormData(event)\r\n const body = await readBody(event)\r\n const contentType = getHeader(event, \"content-type\")\r\n console.log({ form, body, contentType })\r\n return sendRedirect(event, \"/pespa\")\r\n }\r\n})\r\n```\r\n\r\nThen creating a page at /pespa ...\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cform method=\"POST\" action=\"api/pespa\">\r\n \u003Clabel>\r\n Email\r\n \u003Cinput name=\"email\" type=\"email\" value=\"john@doe.com\" />\r\n \u003C/label>\r\n \u003Clabel>\r\n Password\r\n \u003Cinput name=\"password\" type=\"password\" value=\"password\" />\r\n \u003C/label>\r\n \u003Cbutton>Log in\u003C/button>\r\n \u003C/form>\r\n \u003Cform method=\"POST\" action=\"api/pespa?logout\">\r\n \u003Cbutton>Log Out\u003C/button>\r\n \u003C/form>\r\n\u003C/template>\r\n```\r\n\r\nHowever here we have to use \"/api\" for the action attribute, and the DX isn't the best for multiple reasons.\r\n\r\nIt would be nice to have a `/actions` directory (in `/server` for nuxt) so that we can define form actions more easily. \r\n(This probably needs a discussion/RFC somewhere so that the Nuxt/Nitro/H3 side can be updated together, let me know if I should repost this somewhere else)\r\n\r\nFor the nitro syntax, the `defineFormAction` I proposed above could be integrated in nitro, as a replacement for defineEventHandler. \r\n\r\nI'm not sure if manually redirecting in the action handler is the best way to do things, perhaps what would need to happen for Nuxt specifically is to generate POST only handlers for these form actions, while these GET methods to the same URL are handled by the corresponding route or nuxt page.\r\n\r\nIf I'm not mistaken, for Nuxt we also need a way to easily pass data back and forth, perhaps the existing ways can be used, but a new composable feels appropriate. \r\n\r\nThere's also a need for something similar to sveltekit [use:enhance / applyAction](https://kit.svelte.dev/docs/form-actions#progressive-enhancement) to make it easier to progressively enhance forms (altough, e.preventDefault() could be enough, the DX is a little barebones)\r\n\r\nHaving something like `getNativeRequest` from H3 would be really useful too: \r\n\r\n```ts\r\neventHandler(event => {\r\nconst request = getNativeRequest(event)\r\nconst data = request.formData()\r\n//do stuff\r\n})\r\n```\r\n*This might need some change in @vue/core, see [React here.](https://github.com/facebook/react/pull/26749)*\r\n\r\n### Proposed API :\r\n\r\nI'm suggesting an API here to illustrate what we could do. \r\n\r\n`pages/signIn.vue`\r\n```vue\r\n\u003Cscript setup> \r\nconst { enhance } = useEnhance(({form, data, action, cancel, submitter }) => {\r\n // Using SvelteKit API to illustrate, but the Nuxt one could/should be different ...\r\n // `form` is the `\u003Cform>` element;`data` is its `FormData` object\r\n // `action` is the URL to which the form is posted;v`cancel()` will prevent the submission\r\n // `submitter` is the `HTMLElement` that caused the form to be submitted\r\n return async ({ result, update }) => {\r\n // `result` is returned by the matching defineFormAction ....\r\n // `update` is a function which triggers the logic that would be triggered if this callback wasn't set\r\n };\r\n})\r\n\r\n// Alternatively something like this, which I personally prefer...\r\nconst { result, loading, error, enhance } = useAction(\"signIn\", (actionSettings) => {\r\n// actions settings could contain form, data, action, cancel ... like in useEnhance\r\n}) \r\n//Can use result/loading/error etc in the template for conditional rendering\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cform method=\"post\" action=\"signIn\" v-enhance=\"enhance\">\r\n \u003Clabel>\r\n Email\r\n \u003Cinput name=\"email\" type=\"email\" value=\"john@doe.com\" />\r\n \u003C/label>\r\n \u003Clabel>\r\n Password\r\n \u003Cinput name=\"password\" type=\"password\" value=\"password\" />\r\n \u003C/label>\r\n \u003Cbutton>Log in\u003C/button>\r\n \u003C/form>\r\n\u003C/template>\r\n```\r\n\r\n`server/signIn.vue`\r\n```ts\r\nexport defineFormAction((event) => {\r\n const request = getNativeRequest(event)\r\n const data = request.formData()\r\n \r\n// signin the User\r\n// Not that we should have a way to return something that works \r\n// well with progressive enhancement to the client,\r\n//Like a JSON payload that can contain data and \"metadata\" (errors, redirects )\r\n// so they can be applied smoothly in CSR. \r\n// A `respondWithFormAction` helper could be added too.\r\nconst result = `This was sent ${JSON.stringify(data)}`\r\nreturn actionResponse(event, { result } )\r\n})\r\n```\r\n\r\nTo recap here : \r\n\r\n- New vue directive for nuxt, `v-enhance` to use on forms to enhance them\r\n- New event handler for Nitro or H3, `defineFormAction`. Could accept a function or an object of functions\r\n- New server directory for Nitro `/server/actions` to define server actions.\r\n- New helpers for H3 `getNativeRequest()` and `actionResponse()` to simplify the action workflow\r\n- New feature for Nuxt, `useAction` or `useEnhance`, to work with actionResponse and v-enhance. \r\n\r\nOverall I feel like this API is respectful of the standard web semantics, and feels vue-ish. Feel free to suggest any improvements for it.\r\n\r\n### Reference from other frameworks : \r\n- [Svelte Form actions](https://kit.svelte.dev/docs/form-actions), [Discussion for semantic form actions](https://github.com/sveltejs/kit/discussions/5875)\r\n- [Solid Start actions](https://start.solidjs.com/core-concepts/actions)\r\n- [Remix Actions](https://remix.run/docs/en/main/route/action)\r\n- [Kent PESPA article](https://www.epicweb.dev/the-webs-next-transition)\r\n- [Next.js Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)\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).",[2922,2924,2927,2930,2933],{"name":2903,"color":2923},"8DEF37",{"name":2925,"color":2926},"discussion","538de2",{"name":2928,"color":2929},"dx","C39D69",{"name":2931,"color":2932},"nitro","bfd4f2",{"name":2934,"color":2935},"馃嵃 p2-nice-to-have","0E8A16",20649,"Form actions for progressive enhancement","2024-06-30T11:08:54Z","https://github.com/nuxt/nuxt/issues/20649",0.7768065,{"description":2942,"labels":2943,"number":2950,"owner":2912,"repository":2913,"state":2951,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Description\n\nI want to let customers know what password requirements they've already checked according to create a strong password, but for this I need the model value to know what they are filling in.\n\nYou can validate it on `input` (that somehow doesn't work neither until you blur it once), but that's not really what I want for the full form\n\n### Additional context\n\nhttps://ui3.nuxt.dev/components/input#with-password-strength-indicator",[2944,2945,2946,2949],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2947,"color":2948},"nuxt/ui-pro","00dc82",{"name":2909,"color":2910},3430,"closed","Expose v-model values in authForm","2025-05-14T13:36:42Z","https://github.com/nuxt/ui/issues/3430",0.6852112,{"description":2957,"labels":2958,"number":2965,"owner":2912,"repository":2912,"state":2951,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v14.18.3`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `yarn@1.22.17`\r\n- Builder: `vite`\r\n- User Config: `postcss`, `build`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-wmbccm?file=app.vue\n\n### Describe the bug\n\nI have created a separate component for an input field, which is structured as follows:\r\n\r\n```vue components/form/app/TextField.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Clabel\r\n v-if=\"label\"\r\n :for=\"name\"\r\n class=\"block text-sm pl-0.5\">\r\n {{ label }}\r\n \u003Cspan\r\n class=\"text-accent-blue\"\r\n v-if=\"required\">\r\n *\r\n \u003C/span>\r\n \u003C/label>\r\n \u003Cdiv\r\n class=\"relative mt-1 flex items-center\">\r\n \u003Cinput\r\n class=\"block w-full pl-4 py-3 outline-0 rounded-[4px] border transition-all duration-400 border-gray-300 focus:border-primary-light focus:drop-shadow\"\r\n :type=\"type\"\r\n :value=\"modelValue\"\r\n :name=\"name\"\r\n :id=\"name\"\r\n :class=\"{\r\n 'pr-12': prefix,\r\n 'pr-4': !prefix\r\n }\"\r\n :required=\"required\"\r\n @input=\"$emit('update:modelValue', $event.target.value);\">\r\n \u003Cdiv\r\n v-if=\"prefix\"\r\n class=\"absolute inset-y-0 right-[1px] top-[1px] bottom-[1px] flex\">\r\n \u003Cspan class=\"inline-flex items-center bg-gray-50 border-l border-gray-300 px-4 text-sm font-medium rounded-tr-[4px] rounded-br-[4px]\">\r\n {{ prefix }}\r\n \u003C/span>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\ndefineProps({\r\n name: {\r\n type: [String],\r\n required: true\r\n },\r\n type: {\r\n type: [String],\r\n default: 'text'\r\n },\r\n required: {\r\n type: [Boolean],\r\n required: false,\r\n default: false\r\n },\r\n label: {\r\n type: [String, Boolean],\r\n required: false\r\n },\r\n prefix: {\r\n type: [String, Boolean],\r\n required: false\r\n },\r\n modelValue: {\r\n type: [String],\r\n default: ''\r\n }\r\n})\r\n\u003C/script>\r\n```\r\n\r\nI then included this in the app.vue. The input field and a button are displayed here. This button has a binding @click=\"save()\" to call the save() function.\r\n\r\n```vue app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cinput\r\n name=\"email\"\r\n label=\"Email\"\r\n type=\"email\"\r\n v-model=\"form.data.email\"\r\n required\r\n />\r\n\r\n \u003Cbutton @click=\"save()\">Check\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst form = ref({\r\n data: {\r\n email: '',\r\n },\r\n});\r\n\r\nconst save = async () => {\r\n const { data, error } = await useFetch('/api/hello', {\r\n method: 'POST',\r\n body: form.value.data,\r\n });\r\n\r\n return true;\r\n};\r\n\u003C/script>\r\n```\r\n\r\n**Reproduction:**\r\n1. go to https://githubwmbccm-mhyg--3000.local-credentialless.webcontainer.io/ and open the Developer Tools -> Network.\r\n2. next enter a string in the input field. e.g. email@email.de\r\n3. click on the button \"Check\".\r\n\r\nNow you can see that a request is sent to \"/api/hello\" as expected. Everything is correct and as expected. (see screenshot)\r\n\r\n\r\n\r\n**The error:**\r\nIf you now click in the input field and add a letter, exactly the same request is automatically sent again without clicking on the \"Check\" button. A new request is sent for each letter. (see screenshot)\r\n\r\n\r\n\r\nIt is noticeable that this behaviour only occurs with a POST request. If you useFetch() with GET, this behaviour does not occur. If you use $fetch instead of useFetch() everything works as expected even with a POST request. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2959,2962],{"name":2960,"color":2961},"3.x","29bc7f",{"name":2963,"color":2964},"pending triage","E99695",15741,"useFetch automatic request after first request","2024-12-02T14:49:54Z","https://github.com/nuxt/nuxt/issues/15741",0.7502591,{"description":2971,"labels":2972,"number":2975,"owner":2912,"repository":2913,"state":2951,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Description\n\nI wanted to do something like the inline field label shown in the component examples in the docs, but couldn't find a suitable builtin. I think it's a nice halfway between MD's label-in-the-field strategy and while I could abuse the `leading` slot of the input, I think it makes more sense to be generic across input types. \n\n\n\nI did end up copy/pasting the source but it would be cool if the FormField (or something) had an `inline` variant that did this.\n\nFor reference:\nhttps://github.com/nuxt/ui/blob/50d68a636cc8b260dd3b8cf8afecb3b564b9d75d/docs/app/components/content/ComponentExample.vue#L162-L167\n\nThanks for your consideration 馃槃 \n\n### Additional context\n\n_No response_",[2973,2974],{"name":2903,"color":2904},{"name":2906,"color":2907},3543,"Inline Form Field Label","2025-06-15T14:09:32Z","https://github.com/nuxt/ui/issues/3543",0.7539846,{"description":2981,"labels":2982,"number":2985,"owner":2912,"repository":2913,"state":2951,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### Description\n\nThis would be a new prop for `UInputTags` that would allow you to set a max length on the items being added. \n\n```\n\u003CInputTags v-model=\"items\" :max-item-length=\"25\" />\n\nconst items = ref([\n \"ok\",\n \"this one would not be ok because of how long it is\"\n])\n```\n\nThough, you could use something like Zod to do form validation, I think this could just apply a `maxlength` to the input itself to prevent typing more than the limit.\n\n### Additional context\n\n_No response_",[2983,2984],{"name":2903,"color":2904},{"name":2906,"color":2907},4405,"InputTags max item length","2025-07-01T08:35:33Z","https://github.com/nuxt/ui/issues/4405",0.75990725,{"description":2991,"labels":2992,"number":2995,"owner":2912,"repository":2912,"state":2951,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### Describe the feature\n\nI've always appreciated the automatic type inference of the return type in server-side \"get\" APIs provided by Nuxt. \r\nHowever, I noticed that there doesn't seem to be support for request parameters. \r\nThis feature could enhance developer experience by providing type safety and autocompletion for request parameters.\r\n\r\nConsider the following example:\r\n\r\n```\r\n// api/auth/login.post.ts\r\nexport default defineEventHandler\u003C{body: {username: string, password: string}}>(async (event) => {\r\n const { username, password } = await getBody(event) // typed!\r\n ...\r\n});\r\n```\r\n\r\nalso for client side:\r\n\r\n```\r\n\u003C!-- page/login.vue -->\r\n\u003Cscript setup lang=\"ts\">\r\nconst username = ref('');\r\nconst password = ref('');\r\n\r\nasync function login() {\r\n await $fetch('/api/auth/login', { \r\n method: 'POST', \r\n body: { username: username.value, someWrongKey: password.value }\r\n }); // typed!\r\n}\r\n\u003C/script>\r\n```\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2993,2994],{"name":2960,"color":2961},{"name":2963,"color":2964},23833,"add type support for body and query to server api","2023-10-20T20:04:00Z","https://github.com/nuxt/nuxt/issues/23833",0.7647967,{"description":3001,"labels":3002,"number":3003,"owner":2912,"repository":3004,"state":2951,"title":3005,"updated_at":3006,"url":3007,"score":3008},"https://tailwindui.com/components/application-ui/forms/sign-in-forms#component-bc08eb211afa45fad7c9f89c1891f284",[],34,"nuxt.com","Login page with email / password + github connect","2023-02-15T12:31:38Z","https://github.com/nuxt/nuxt.com/issues/34",0.76610047,{"description":3010,"labels":3011,"number":3015,"owner":2912,"repository":2913,"state":2951,"title":3016,"updated_at":3017,"url":3018,"score":3019},"### 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",[3012],{"name":3013,"color":3014},"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.76735276,{"description":3021,"labels":3022,"number":3025,"owner":2912,"repository":2913,"state":2951,"title":3026,"updated_at":3027,"url":3028,"score":3029},"### Description\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from \"zod\";\nimport type { FormSubmitEvent } from \"@nuxt/ui\";\ninterface Props {\n cabinData?: Cabin;\n}\nconst props = defineProps\u003CProps>();\nconst form = useTemplateRef(\"form\");\n\nconst schema = z.object({\n name: z.string().min(1, \"Cabin name is required\"),\n capacity: z.number().min(1, \"Capacity must be at least 1\").optional(),\n price: z.number().min(0, \"Price must be at least 0\").optional(),\n discount: z.number().min(0, \"Discount must be at least 0\").optional(),\n image: z.string().optional(),\n});\n\nconst isDirty: ComputedRef\u003Cboolean | undefined> = computed(() => {\n return form.value?.dirty;\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\nconst state = reactive\u003CPartial\u003CSchema>>({\n name: props.cabinData?.name || \"\",\n capacity: props.cabinData?.capacity || undefined,\n price: props.cabinData?.price || undefined,\n discount: props.cabinData?.discount || undefined,\n image: undefined,\n});\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm\n ref=\"form\"\n :schema=\"schema\"\n :state=\"state\"\n class=\"w-full space-y-8\"\n @submit=\"onSubmit\"\n >\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"name\" class=\"w-1/5 font-semibold\">Name\u003C/label>\n \u003CUFormField name=\"name\">\n \u003CUInput\n id=\"name\"\n v-model=\"state.name\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"capacity\" class=\"w-1/5 font-semibold\">Capacity\u003C/label>\n \u003CUFormField name=\"capacity\">\n \u003CUInputNumber\n id=\"capacity\"\n v-model=\"state.capacity\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"price\" class=\"w-1/5 font-semibold\">Price\u003C/label>\n \u003CUFormField name=\"price\">\n \u003CUInputNumber\n id=\"price\"\n v-model=\"state.price\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"discount\" class=\"w-1/5 font-semibold\">Discount\u003C/label>\n \u003CUFormField name=\"discount\">\n \u003CUInputNumber\n id=\"discount\"\n v-model=\"state.discount\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"flex justify-end pt-4\">\n \u003CUTooltip arrow text=\"Data has not been changed\">\n \u003CUButton\n type=\"submit\"\n class=\"bg-brand-600 text-brand-50 hover:bg-brand-700 px-4 py-2 uppercase hover:cursor-pointer\"\n size=\"lg\"\n :disabled=\"!isDirty\"\n >\n Update Data\n \u003C/UButton>\n \u003C/UTooltip>\n\n \u003CUButton\n class=\"bg-grey-200 text-grey-900 hover:bg-grey-50 ml-2 px-4 py-2 uppercase hover:cursor-pointer\"\n size=\"lg\"\n @click=\"\n state.name = '';\n state.capacity = undefined;\n state.price = undefined;\n state.discount = undefined;\n state.image = undefined;\n form?.clear();\n \"\n >\n Cancel\n \u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n```\n\n> this is my code i want disable button depending on if fields is dirty or not i'm using computed now but i used ref alswo watchEffect and watch with getter to watch if is there any changes in fields,but depending on documentation dirty is ref boolean but it doesn't change what am i doing wrong ?",[3023,3024],{"name":3013,"color":3014},{"name":2906,"color":2907},4402,"UForm dirty isn't reactive ?","2025-06-26T13:33:41Z","https://github.com/nuxt/ui/issues/4402",0.7740306,["Reactive",3031],{},["Set"],["ShallowReactive",3034],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$farMKZLOd7F81M9_A8FNxenGRUwnLACloMzqPYoGRsSw":-1},"/nuxt/ui/4311"]