\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_",[2856,2859],{"name":2857,"color":2858},"enhancement","a2eeef",{"name":2860,"color":2861},"triage","ffffff",4138,"nuxt","ui","open","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7093686,{"description":2871,"labels":2872,"number":2880,"owner":2863,"repository":2864,"state":2865,"title":2881,"updated_at":2882,"url":2883,"score":2884},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.0\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, css, build, supabase, content, pinia, devtools, debug, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui-pro@3.1.0, @vueuse/nuxt@13.1.0, @nuxt/content@3.5.1, @nuxt/icon@1.12.0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.6, @nuxt/test-utils@3.17.2, @nuxtjs/supabase@1.5.0, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CUForm :state=\"state\" class=\"w-1/2 p-4\">\n \u003CUFormField v-for=\"(item, index) in items\" :key=\"index\" :label=\"index\" :name=\"index\">\n \u003CUColorPicker v-if=\"index == 'color'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUSlider v-if=\"index == 'range' && typeof item == 'number'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />\n \u003CUInput v-else :type=\"index\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003Cpre class=\"w-1/2 bg-gray-200 p-4 leading-14\"> {{ state }} \u003C/pre>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\nconst state = ref({}) // ISSUE: Default values are not loaded in the v-model\nconst items = {\n number: 50,\n reset: true, // ISSUE: UInput is not supporting boolean values for v-model\n submit: true, // ISSUE: UInput is not supporting boolean values for v-model\n search: \"search\",\n date: \"2025-04-25\",\n text: \"text\",\n color: \"#ccffcc\",\n button: true, // ISSUE: UInput is not supporting boolean values for v-model\n checkbox: false, // ISSUE: UInput is not supporting boolean values for v-model\n \"datetime-local\": \"2025-04-25T10:49:31\",\n email: \"nobody@gmail.com\",\n file: \"\",\n hidden: \"hidden\",\n image: \"image.svg\",\n month: \"2025-04\",\n password: \"topsecret\",\n radio: true, // ISSUE: UInput is not supporting boolean values for v-model\n range: 50, // Default value is displayed but not loaded in the v-model\n tel: \"0612345678\",\n time: \"10:49:31\",\n url: \"www.chatgpt.com\",\n week: \"2025-W16\"\n}\n// const state = reactive(items) // Workaround for default-value\n\u003C/script>\n```\n\n### Description\n\nI made a small comparison between `UInput` and other components like `UColorPicker` and `USlider` and I stumbled on a couple of issues.\n* `default-value` is not displayed except for `range` and `USlider`\n* `default-value` is never initialized in the `v-model`\n* Booleans are not supported in the `v-model` and I was therefore not able to make them reactive.\n\nWorkaround is to load the default value via the `state`, but that requires an additional step and is therefore not ideal for dynamic forms\n`const state = reactive(items)`\n\nWorkaround for working with booleans, but I am not sure how to apply the `v-model` yet🤔\n`\u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />`\n\n\n### Additional context\n\nDefault values via `default-value`\n\nDefault value via `state`\n\n\n### Logs\n\n```shell-script\n\n```",[2873,2876,2879],{"name":2874,"color":2875},"bug","d73a4a",{"name":2877,"color":2878},"v3","49DCB8",{"name":2860,"color":2861},3983,"Default values are not loaded in the v-model","2025-05-05T16:31:01Z","https://github.com/nuxt/ui/issues/3983",0.7383582,{"description":2886,"labels":2887,"number":2891,"owner":2863,"repository":2863,"state":2865,"title":2892,"updated_at":2893,"url":2894,"score":2895},"Hi. I have this component provider, just for dynamic component imports.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Ccomponent :is=\"componentLoader\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { defineProps, defineAsyncComponent } from 'vue';\r\n\r\ninterface Props {\r\n component: {\r\n module: string;\r\n file: string;\r\n };\r\n}\r\n\r\nconst props = defineProps\u003CProps>();\r\n\r\nconst componentLoader = defineAsyncComponent({\r\n loader: () => import(`./modules/${props.component.module}/components/${props.component.file}`),\r\n delay: 100,\r\n});\r\n\u003C/script>\r\n```\r\n\r\nInitialization looks like that.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Ccomponent-provider :component=\"form\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst form: DynamicComponent = reactive({\r\n module: 'auth',\r\n file: 'forms/Main.vue'\r\n})\r\n\u003C/script>\r\n```\r\n\r\nBut it ends with an error.\r\n\r\n```\r\nUncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:4000/_nuxt/modules/base/components/providers/modules/auth/components/forms/Main.vue?import\r\n```\r\n\r\nAnd Vue warn.\r\n\r\n```\r\n[Vue warn]: Unhandled error during execution of async component loader \r\n```\r\n\r\nSo as you can see the path is wrong because it adds `modules/base/components/providers` (which is providers one) at the beginning. \r\n\r\n**Stack**:\r\n* Nuxt `3.0.0-rc.13`\r\n* Node `16.14.2` (npm `8.7.0`)",[2888],{"name":2889,"color":2890},"documentation","5319e7",15448,"Dynamic component imports doesn't work","2024-11-30T16:12:15Z","https://github.com/nuxt/nuxt/issues/15448",0.74135846,{"description":2897,"labels":2898,"number":2902,"owner":2863,"repository":2864,"state":2903,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### 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```",[2899,2900,2901],{"name":2874,"color":2875},{"name":2877,"color":2878},{"name":2860,"color":2861},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.67031133,{"description":2909,"labels":2910,"number":2914,"owner":2863,"repository":2864,"state":2903,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### 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```",[2911,2912,2913],{"name":2874,"color":2875},{"name":2877,"color":2878},{"name":2860,"color":2861},4095,"UButton works as a link in Inertia","2025-05-07T08:12:17Z","https://github.com/nuxt/ui/issues/4095",0.7152626,{"description":2920,"labels":2921,"number":2922,"owner":2863,"repository":2863,"state":2903,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Discussed in https://github.com/nuxt/nuxt/discussions/16736\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **xiangnanscu** September 28, 2022\u003C/sup>\r\nI press th Submit button to throw an error in client, but nothing shows up, including the console.\r\n```vue\r\npages/login.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtErrorBoundary @error=\"someErrorLogger\">\r\n \u003C!-- You use the default slot to render your content -->\r\n \u003Ctemplate #error=\"{ error }\">\r\n You can display the error locally here.\r\n \u003Cbutton @click=\"error = null\">This will clear the error.\u003C/button>\r\n \u003C/template>\r\n \u003C/NuxtErrorBoundary>\r\n \u003Cx-button @click.prevent=\"sendCredentials\">Submit\u003C/x-button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nfunction someErrorLogger(event) {\r\n console.log('error happend:', { event });\r\n}\r\nasync function sendCredentials(event) {\r\n throw createError({ statusCode: 404, statusMessage: \"Page Not Found\" });\r\n}\r\n\u003C/script>\r\n\r\n```\r\n\u003C/div>",[],20222,"What's the right way to use NuxtErrorBoundary?","2023-04-12T08:11:24Z","https://github.com/nuxt/nuxt/issues/20222",0.73153627,{"description":2928,"labels":2929,"number":2932,"owner":2863,"repository":2864,"state":2903,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, fonts, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.3.1, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.2.0, @nuxtjs/i18n@9.5.4, nuxt-security@2.2.0, @nuxt/ui@3.1.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/sharp-christian-kzdxt9?file=%2Fapp%2Fpages%2Findex.vue\n\n### Description\n\nStarting from v3.1.2, using the [built-in v-model-modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) produces type errors. They are still working tho, so its only a type issue.\n\nReproduction:\n1. Open provided link\n2. Run `pnpx nuxi typecheck`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n➜ workspace git:(master) ✗ pnpx nuxi typecheck\nPackages: +1\n+\nProgress: resolved 1, reused 1, downloaded 0, added 1, done\nℹ Nuxt Icon server bundle mode is set to local 11:09:23 AM\n✔ Nuxt Icon discovered local-installed 2 collections: lucide, simple-icons 11:09:25 AM\nℹ Running with compatibility version 4 nuxt 11:09:25 AM\napp/pages/index.vue:8:22 - error TS2353: Object literal may only specify known properties, and 'modelModifiers' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly \"onUpdate:modelValue\"?: ((payload: number) => any) | undefined; ... 24 more ...; modelValue?: number | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.\n\n8 \u003CUInput v-model.number=\"myNumber\" type=\"number\" />\n ~~~~~~~\n\napp/pages/index.vue:9:22 - error TS2353: Object literal may only specify known properties, and 'modelModifiers' does not exist in type '{ readonly onBlur?: ((event: FocusEvent) => any) | undefined; readonly onChange?: ((event: Event) => any) | undefined; readonly \"onUpdate:modelValue\"?: ((payload: string) => any) | undefined; ... 24 more ...; modelValue?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.\n\n9 \u003CUInput v-model.lazy=\"myText\" />\n ~~~~~\n\n\nFound 2 errors in the same file, starting at: app/pages/index.vue:8\n\n\n ERROR Process exited with non-zero status (2) 11:09:41 AM\n\n at R._waitForOutput (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/chunks/main.mjs:508:13)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Object.run (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/chunks/typecheck.mjs:91:9)\n at async runCommand$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1767:16)\n at async runCommand$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1758:11)\n at async runMain$1 (/root/.cache/pnpm/v3/tmp/dlx-4483/node_modules/.pnpm/nuxi@3.25.1/node_modules/nuxi/dist/shared/nuxi.BlFGnQYG.mjs:1896:7) \n\n\n\n ERROR Process exited with non-zero status (2)\n```",[2930,2931],{"name":2874,"color":2875},{"name":2877,"color":2878},4166,"Built-in v-model modifiers produce type errors with v3.1.2","2025-05-22T12:51:25Z","https://github.com/nuxt/ui/issues/4166",0.73456085,{"description":2938,"labels":2939,"number":2943,"owner":2863,"repository":2864,"state":2903,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.24.0`\n- Nitro Version: `2.11.8`\n- Package Manager: `pnpm@10.9.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nnuxt-ui 3.1.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/form\n\nOpen in Chrome and check `issues` in devtools. The linked erroring nodes are all RadioGroups or CheckboxGroups.\n\n### Description\n\nThe FormField component correctly removes the `for` attribute from the label for the RadioGroup & CheckboxGroup components. Chrome devtools would suggest that there should be a further step so that `\u003Clabel>` is not used at all in this context.\n\nI am happy to propose changes.\n\n\u003Cimg width=\"917\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2f3f5fc1-d819-4974-9217-6ab75f31cf64\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2940,2941,2942],{"name":2874,"color":2875},{"name":2877,"color":2878},{"name":2860,"color":2861},3998,"Chrome reports the FormField label as `Incorrect use of \u003Clabel for=FORM_ELEMENT>` when wrapping RadioGroup or CheckboxGroup","2025-05-15T09:32:18Z","https://github.com/nuxt/ui/issues/3998",0.73576355,{"labels":2949,"number":2958,"owner":2863,"repository":2863,"state":2903,"title":2959,"updated_at":2960,"url":2961,"score":2962},[2950,2952,2955],{"name":2951,"color":2861},"stale",{"name":2953,"color":2954},"pending triage","E99695",{"name":2956,"color":2957},"2.x","d4c5f9",7999,"Wrong \"this\" in beforeRouteUpdate for dynamic nested route","2023-01-22T15:36:07Z","https://github.com/nuxt/nuxt/issues/7999",0.73637855,{"description":2964,"labels":2965,"number":2975,"owner":2863,"repository":2864,"state":2903,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed\n\n### Description\n\nThere is no error state on the input field like color \"error\" when u wrap URadioGroup in UFormField\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2966,2967,2970,2971,2972],{"name":2874,"color":2875},{"name":2968,"color":2969},"needs reproduction","CB47CF",{"name":2877,"color":2878},{"name":2860,"color":2861},{"name":2973,"color":2974},"closed-by-bot","ededed",4025,"RedioGroup in Form","2025-05-07T02:09:29Z","https://github.com/nuxt/ui/issues/4025",0.73657906,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQaAydQH2uNNTjdD2wlpXyCR8Oas9NfjfmKrrmaTg6is":-1},"/nuxt/ui/2674"]