\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_",[3139,3142,3145],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7449191,{"description":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3151,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Description\n\n`name` and `type` in the `ProseField` component can only be consigned as strings:\n\n```\n::field{name=\"fieldname\" type=\"boolean\"}\ndescription\n::\n```\n\nBut actually I need them as slots like:\n\n```\n::field\n#name\n\u003Cbutton>fieldname\u003C/button>\n#type\n\u003Cspan>fieldtype\u003C/span>\n#default\ndescription\n::\n```\n\nIt's not much of an adjustment, just a little tweaking in the respective Vue component:\n\n```\n \u003Cspan\n v-if=\"!!slots.name || name\"\n :class=\"ui.name({ class: props.ui?.name })\"\n >\n \u003Cslot name=\"name\" mdc-unwrap=\"p\">\n {{ name }}\n \u003C/slot>\n \u003C/span>\n```\n\nI tried to overwrite it with my own component in `component/contents/ProseField.vue`, but it didn't work in production, probably because of tree shaking. (That's another issue.)\n\n### Additional context\n\n_No response_",[3159,3160,3161],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4575,"Allow name and type slots in ProseField (#uiPro)","2025-07-22T20:26:57Z","https://github.com/nuxt/ui/issues/4575",0.74690473,{"description":3168,"labels":3169,"number":3173,"owner":3149,"repository":3150,"state":3151,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Description\n\nHey 👋,\n\nRecently, you add variants, https://ui.nuxt.com/components/card#variant, to Card. Do you think that Modal could have the same?\n\n### Additional context\n\n_No response_",[3170,3171,3172],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4749,"Add variants to Modal component","2025-08-14T18:24:37Z","https://github.com/nuxt/ui/issues/4749",0.7621603,{"description":3179,"labels":3180,"number":3184,"owner":3149,"repository":3150,"state":3151,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Description\n\nWe are using zod for our inputs and zod supports adding multiple errors for a single input (which nicely plugs into UForm) - but I notice when we have more than 1 issue, we only see the 1st one.\n\nI was wondering if supporting multiple is do-able? \n\n### Additional context\n\n_No response_",[3181,3182,3183],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4831,"support for multiple errors for UFormField","2025-08-27T00:50:27Z","https://github.com/nuxt/ui/issues/4831",0.7700073,{"description":3190,"labels":3191,"number":3206,"owner":3149,"repository":3149,"state":3151,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### 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).",[3192,3194,3197,3200,3203],{"name":3140,"color":3193},"8DEF37",{"name":3195,"color":3196},"discussion","538de2",{"name":3198,"color":3199},"dx","C39D69",{"name":3201,"color":3202},"nitro","bfd4f2",{"name":3204,"color":3205},"🍰 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":3212,"labels":3213,"number":3220,"owner":3149,"repository":3150,"state":3221,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### 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",[3214,3215,3216,3219],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3217,"color":3218},"nuxt/ui-pro","00dc82",{"name":3146,"color":3147},3430,"closed","Expose v-model values in authForm","2025-05-14T13:36:42Z","https://github.com/nuxt/ui/issues/3430",0.6852112,{"description":3227,"labels":3228,"number":3231,"owner":3149,"repository":3150,"state":3221,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Description\n\n🙏 First of all, thank you to the Nuxt UI team for your outstanding contributions!\n\nNuxt UI has greatly improved the developer experience for building modern Nuxt applications.\n\n---\n\nDescription\n\nCurrently, nuxt/ui provides a powerful set of UI components and form elements, but it lacks a built-in dynamic schema-form system. In many enterprise applications, we spend a lot of repetitive time writing similar form templates and CRUD logic.\n\nI propose adding a \u003Cschema-form> component, similar to [Ant Design ProComponents Schema Form](https://procomponents.ant.design/en-US/components/schema-form), to help developers quickly build dynamic forms with minimal boilerplate.\n\nMotivation\n\t•\tReduce repetitive code for standard CRUD forms.\n\t•\tCentralize form configuration into JSON schema.\n\t•\tAutomatically handle form rendering, validation, and API requests.\n\t•\tSimplify maintenance and improve developer productivity for admin panels and back-office tools.\n\n---\nProposed API\n\nA possible schema-form component interface could be:\n\n```vue\n\u003CSchemaForm\n :schema=\"{\n title: 'User Info',\n mode: 'create', // or 'update'\n api: {\n detail: '/api/user/detail',\n create: '/api/user/create',\n update: '/api/user/update'\n },\n fields: [\n { label: 'Username', name: 'username', component: 'input', rules: [{ required: true }] },\n { label: 'Email', name: 'email', component: 'input' },\n { label: 'Role', name: 'role', component: 'select', options: [\n { label: 'Admin', value: 'admin' },\n { label: 'User', value: 'user' }\n ]}\n ],\n initialValues: { role: 'user' }\n }\"\n @submit-success=\"onSubmit\"\n/>\n```\n---\nFeatures\n\t•\t✅ Schema-driven form rendering (fields, labels, validation, components)\n\t•\t✅ Auto-fetch detail API for edit mode\n\t•\t✅ Built-in submit to create/update APIs\n\t•\t✅ Support for u-input, u-select, u-date-picker, and custom components\n\t•\t✅ Works seamlessly with Nuxt UI design system\n\n---\n\nBenefits\n\t•\tSignificant reduction in repetitive CRUD form code\n\t•\tAligns with enterprise admin panel requirements\n\t•\tMatches developer experience from frameworks like Ant Design ProComponents\n\t•\tMakes Nuxt UI more competitive for dashboard/admin scenarios\n\n---\n\nAlternatives\n\nRight now, developers must:\n\t•\tManually write each form template (using u-form, u-form-item, etc.)\n\t•\tHandle API fetching/submission manually with useFetch\n\t•\tDuplicate similar code across multiple CRUD pages\n\n---\n\nReferences\n\t•\tAnt Design ProComponents Schema Form: https://procomponents.ant.design/en-US/components/schema-form\n\n\n### Additional context\n\n_No response_",[3229,3230],{"name":3140,"color":3141},{"name":3146,"color":3147},4653,"[Feature Request] Add dynamic schema-form similar to Ant Design ProComponents Schema Form for reducing CRUD workload","2025-08-07T17:19:54Z","https://github.com/nuxt/ui/issues/4653",0.74353033,{"description":3237,"labels":3238,"number":3245,"owner":3149,"repository":3149,"state":3221,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### 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_",[3239,3242],{"name":3240,"color":3241},"3.x","29bc7f",{"name":3243,"color":3244},"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":3251,"labels":3252,"number":3255,"owner":3149,"repository":3150,"state":3221,"title":3256,"updated_at":3257,"url":3258,"score":3259},"### 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_",[3253,3254],{"name":3140,"color":3141},{"name":3143,"color":3144},3543,"Inline Form Field Label","2025-06-15T14:09:32Z","https://github.com/nuxt/ui/issues/3543",0.7539846,{"description":3261,"labels":3262,"number":3266,"owner":3149,"repository":3150,"state":3221,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### 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",[3263,3264,3265],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4540,"Docs: Form validate on-submit","2025-07-22T19:11:45Z","https://github.com/nuxt/ui/issues/4540",0.7558804,["Reactive",3272],{},["Set"],["ShallowReactive",3275],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$farMKZLOd7F81M9_A8FNxenGRUwnLACloMzqPYoGRsSw":-1},"/nuxt/ui/4311"]