\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.7342241,{"description":2920,"labels":2921,"number":2924,"owner":2912,"repository":2913,"state":2914,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[2922,2923],{"name":2903,"color":2904},{"name":2909,"color":2910},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.73815036,{"description":2930,"labels":2931,"number":2937,"owner":2912,"repository":2913,"state":2914,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.11.0`\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.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/condescending-euclid-k9r7nc\n\n### Description\n\nWhen a Modal is in a ButtonGroup, all buttons inside the Modal (including the X button) are styled as elements directly in the ButtonGroup\n\n```vue\n\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUInput placeholder=\"Search...\" />\n \u003CUModal>\n \u003CUButton color=\"neutral\" variant=\"outline\">\n Open modal\n \u003C/UButton>\n\n \u003Ctemplate #body>\n \u003CUButton label=\"button1\" />\n \u003CUButton label=\"button2\" />\n \u003CUButton label=\"button3\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\nAlso, size and orientation affect the buttons inside the modal\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup orientation=\"vertical\" size=\"lg\">\n ...\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2932,2935,2936],{"name":2933,"color":2934},"bug","d73a4a",{"name":2906,"color":2907},{"name":2909,"color":2910},4242,"[ButtonGroup] Nested buttons are also styled as if they were directly placed","2025-05-28T10:43:07Z","https://github.com/nuxt/ui/issues/4242",0.7547735,{"description":2943,"labels":2944,"number":2948,"owner":2912,"repository":2913,"state":2949,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### 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```",[2945,2946,2947],{"name":2933,"color":2934},{"name":2906,"color":2907},{"name":2909,"color":2910},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.6800469,{"description":2955,"labels":2956,"number":2960,"owner":2912,"repository":2913,"state":2949,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### 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```",[2957,2958,2959],{"name":2933,"color":2934},{"name":2906,"color":2907},{"name":2909,"color":2910},4095,"UButton works as a link in Inertia","2025-05-07T08:12:17Z","https://github.com/nuxt/ui/issues/4095",0.71143216,{"description":2966,"labels":2967,"number":2972,"owner":2912,"repository":2913,"state":2949,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### 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 ?",[2968,2971],{"name":2969,"color":2970},"question","d876e3",{"name":2906,"color":2907},4402,"UForm dirty isn't reactive ?","2025-06-26T13:33:41Z","https://github.com/nuxt/ui/issues/4402",0.7295342,{"description":2978,"labels":2979,"number":2983,"owner":2912,"repository":2913,"state":2949,"title":2984,"updated_at":2985,"url":2986,"score":2987},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.8`\n- Nuxt Version: `-`\n- CLI Version: `3.25.1`\n- Nitro Version: `-`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/modal-close-not-working-kc99r3\n\n### Description\n\nThe scoped slots `content`, `header`, `body` and `footer` in UModal are supposed to receive an object containing a close-method, as per [the docs](https://ui.nuxt.com/components/modal#slots). They do not; only an empty object is received. Due to this, the Cancel-button from the [footer-example](https://ui.nuxt.com/components/modal#with-footer-slot) in the docs does not work. Inexplicably, the example in the docs works 🤔\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2980,2981,2982],{"name":2933,"color":2934},{"name":2906,"color":2907},{"name":2909,"color":2910},4266,"Modal content, header, body and footer slots not receiving the close method","2025-06-01T06:07:09Z","https://github.com/nuxt/ui/issues/4266",0.73638666,{"description":2989,"labels":2990,"number":2993,"owner":2912,"repository":2913,"state":2949,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[2991,2992],{"name":2969,"color":2970},{"name":2906,"color":2907},3041,"Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.7416127,{"description":2999,"labels":3000,"number":3004,"owner":2912,"repository":2912,"state":2949,"title":3005,"updated_at":3006,"url":3007,"score":3008},"Hello. I got an error when trying to use with Nuxt\r\n\r\n```\r\nvue.runtime.esm.js:430 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n```\r\n\r\nI have Modal component, that I want to render outside of component, where I am calling modal.\r\n\r\nI have this:\r\n\r\nThis is where I want to render Modal component:\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\n div\r\n my-header\r\n .flex-sticky\r\n nuxt.content\r\n my-footer\r\n portal-target(name=\"destination\")\r\n\u003C/template>\r\n```\r\n\r\nThis is where I am calling Modal component\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\ndiv\r\n portal(to=\"destination\")\r\n modal\r\n\u003C/template>\r\n```\r\nSorry for Pug. If needed, I rewrite it with HTML.\r\nPlease assist me to fix this issue with this awesome library.\r\nIs it compatible with Nuxt?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1333\">#c1333\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3001],{"name":3002,"color":3003},"2.x","d4c5f9",1497,"Got an hydration error when use vue-portal","2023-01-18T15:41:51Z","https://github.com/nuxt/nuxt/issues/1497",0.7467318,{"description":3010,"labels":3011,"number":3017,"owner":2912,"repository":2913,"state":2949,"title":3018,"updated_at":3019,"url":3020,"score":3021},"On login page, i have UForm with validation. when clicking on register modal(UModal with #content slot) included Uform with validation, submit button doesn't trigger. if i focus on input, validation works automatically. when clicking submit button after filling all required fields, there are no error on validation(logged in the end of validation function). But no response(also logged in submit function) in submit function. how to fix it? i can't get it?",[3012,3013,3016],{"name":2969,"color":2970},{"name":3014,"color":3015},"needs reproduction","CB47CF",{"name":2906,"color":2907},3674,"can't handle submit button","2025-04-30T13:25:36Z","https://github.com/nuxt/ui/issues/3674",0.747664,["Reactive",3023],{},["Set"],["ShallowReactive",3026],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYjzeTKvnR4CP3Tf2iZO_OSZo5jM5qxoYg4TWfgnMExg":-1},"/nuxt/ui/4401"]