\r\n \u003C/NuxtLayout>\r\n \u003C!-- universal components -->\r\n \u003CMenuDialog />\r\n \u003CLanguageDialog />\r\n \u003CColorModeDialog />\r\n \u003CBackdrop />\r\n \u003C!-- etc -->\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nOr you could just move those components to a directory called `~/components/universal` (for example) and Nuxt would take care of injecting them automatically.\n\n### Additional information\n\n- [X] 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).",[3168,3171],{"name":3169,"color":3170},"enhancement","8DEF37",{"name":3172,"color":3173},"discussion","538de2",19492,"Components automatically injected into the root element","2024-06-30T11:09:20Z","https://github.com/nuxt/nuxt/issues/19492",0.7191168,{"description":3180,"labels":3181,"number":3196,"owner":3146,"repository":3197,"state":3198,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### 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_",[3182,3185,3188,3191,3194],{"name":3183,"color":3184},"feature","A27AF6",{"name":3186,"color":3187},"v3","49DCB8",{"name":3189,"color":3190},"triage","ffffff",{"name":3192,"color":3193},"closed-by-bot","ededed",{"name":3195,"color":3193},"stale",4138,"ui","closed","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.69646937,{"description":3204,"labels":3205,"number":3211,"owner":3146,"repository":3146,"state":3198,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.1.2`\r\n- Nitro Version: `2.1.1`\r\n- Package Manager: `yarn@1.22.17`\r\n- Builder: `vite`\r\n- User Config: `modules`, `vuestic`\r\n- Runtime Modules: `@vuestic/nuxt@1.0.9`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. create component as below\r\n\r\nBtn.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cslot name=\"header\">\u003C/slot>\r\n \u003Cslot>\u003C/slot>\r\n \u003Cslot name=\"slot1\">\u003C/slot>\r\n \u003Cslot name=\"slot2\">\u003C/slot>\r\n \u003Cslot name=\"footer\">\u003C/slot>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\u003C/style>\r\n```\r\n\r\n2. build project `yarn build`\r\n3. run `yarn preview`\r\n4. inspect DOM\r\n\n\n### Describe the bug\n\nthis is resulting html of built project\r\n\r\n```html\r\n\u003Cdiv id=\"__nuxt\">\r\n \u003Cdiv>\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n im a button\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C!--[-->\r\n \u003C!--]-->\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nIs it possible to get rid of generated comments in place of empty slots?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3206,3209],{"name":3207,"color":3208},"3.x","29bc7f",{"name":3157,"color":3210},"E99695",18754,"component slots end up as comments","2023-02-05T13:45:07Z","https://github.com/nuxt/nuxt/issues/18754",0.69751054,{"labels":3217,"number":3222,"owner":3146,"repository":3146,"state":3198,"title":3223,"updated_at":3224,"url":3225,"score":3226},[3218,3219],{"name":3157,"color":3210},{"name":3220,"color":3221},"2.x","d4c5f9",4960,"Dynamic component server side rendering doesn't work when used inside v-if and v-else","2024-06-20T14:03:01Z","https://github.com/nuxt/nuxt/issues/4960",0.7037018,{"description":3228,"labels":3229,"number":3234,"owner":3146,"repository":3197,"state":3198,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo4\n\n### Description\n\nThe button styles in UModal body should not be affected by UButtonGroup. I'm not sure if this is a bug or a feature.\n\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUModal\n :close=\"true\"\n v-model:open=\"open\"\n title=\"Test\"\n >\n \u003CUButton\n variant=\"outline\"\n color=\"neutral\"\n @click=\"open = true\"\n >\n Modal Button\n \u003C/UButton>\n \u003Ctemplate #body>\n Body\n \u003C/template>\n \u003Ctemplate #footer>\n \u003Cdiv class=\"flex justify-start w-full gap-4\">\n \u003CUButton\n variant=\"outline\"\n class=\"rounded\"\n label=\"Cancel\"\n @click=\"open = false\"\n />\n \u003CUButton\n variant=\"outline\"\n class=\"rounded\"\n label=\"Middle\"\n @click=\"open = false\"\n />\n \u003CUButton\n type=\"submit\"\n class=\"rounded\"\n label=\"Confirm\"\n color=\"primary\"\n @click=\"open = false\"\n />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n \u003CUButton\n variant=\"outline\"\n color=\"neutral\"\n @click=\"\"\n >\n Other Button\n \u003C/UButton>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\u003Cimg width=\"362\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/da66f0d8-fc42-45a5-b1e1-d7214468b24a\" />\n\n\u003Cbr>\n\n\u003Cimg width=\"543\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a50767ec-bea5-4c88-9b45-963f8e81e5df\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3230,3233],{"name":3231,"color":3232},"bug","d73a4a",{"name":3186,"color":3187},2978,"The button styles in UModal body should not be affected by UButtonGroup.","2025-02-07T15:32:58Z","https://github.com/nuxt/ui/issues/2978",0.7101686,{"description":3240,"labels":3241,"number":3244,"owner":3146,"repository":3146,"state":3198,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.0`\r\n- Nuxt Version: `3.0.0-rc.8`\r\n- Package Manager: `yarn@1.19.2`\r\n- Builder: `vite`\r\n- User Config: `build`, `css`, `components`, `runtimeConfig`, `typescript`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n- Default Nuxt 3 config with universal rendering\n\n### Reproduction\n\n- create a basic Vue component with only some html and no script or style\r\n- include the component in a layout\n\n### Describe the bug\n\nWhen looking into the final build I expect the component html to be serverside rendered and only included in the server/index.mjs once. Currently the html from a component is indeed included in the server/index.mjs but also a chunk is loaded in the client which includes the same html dom. Of course we don't want that duplication as it's bad for performance. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3242,3243],{"name":3207,"color":3208},{"name":3157,"color":3210},14763,"Vue components html is included twice in production build","2023-01-19T17:39:59Z","https://github.com/nuxt/nuxt/issues/14763",0.7105012,{"description":3250,"labels":3251,"number":3254,"owner":3146,"repository":3146,"state":3198,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, vue\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nYou can change the v-if from true to false to see the actual rendering failing:\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-gd1iaq?file=components%2FRichTextRenderer.vue\r\n\r\n### Describe the bug\r\n\r\nI am trying to render custom elements loaded from a CMS, example, I am trying to render responses like this:\r\n\r\n```\r\n\u003Cdiv>\r\n \u003Ccomponent :is=\"custom-element\">\u003C/component>\r\n \u003Ccomponent :is=\"custom-accordion\">\u003C/component>\r\n\u003C/div>\r\n```\r\n\r\nI was expecting to be able to do this by configuring the vue runtimeCompiler to true and using something like:\r\n\r\n```h({template: receivedHtml})```\r\n\r\n\r\n### Additional context\r\n\r\nOn the provided example, the three first options work, the fourth one fails:\r\n\r\n```\u003Cscript setup lang=\"ts\">\r\nconst CoolComponent = resolveComponent('CoolComponent')\r\n\r\nconst render1 = h({ template: '\u003Cspan>Hellow render 1\u003C/span>' })\r\nconst render2 = h({ template:`\u003Ccomponent :is=\"${CoolComponent}\">\u003C/component>` })\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>\u003Cb>Basic test:\u003C/b> \u003CCoolComponent>\u003C/CoolComponent>\u003C/div>\r\n\r\n \u003Cdiv>\u003Cb>Test without components:\u003C/b> \u003Crender1>\u003C/render1>\u003C/div>\r\n\r\n \u003Cdiv>\u003Cb>Test with component:\u003C/b> \u003Ccomponent :is=\"CoolComponent\">\u003C/component>\u003C/div>\r\n\r\n \u003Cdiv v-if=\"true\">\u003Cb>Broken test:\u003C/b> \u003Crender2>\u003C/render2>\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Logs\r\n\r\n```shell-script\r\nmissing ] after element list\r\n\r\non esm-bundler.js\r\n```\r\n",[3252,3253],{"name":3207,"color":3208},{"name":3157,"color":3210},24758,"Unable to dynamically add components via string","2023-12-14T20:36:50Z","https://github.com/nuxt/nuxt/issues/24758",0.7105351,{"labels":3260,"number":3264,"owner":3146,"repository":3146,"state":3198,"title":3265,"updated_at":3266,"url":3267,"score":3268},[3261,3262,3263],{"name":3195,"color":3190},{"name":3157,"color":3210},{"name":3220,"color":3221},8904,"Hydration error with scoped slots and component discovery (async components)","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8904",0.7113002,["Reactive",3270],{},["Set"],["ShallowReactive",3273],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7T1z1Wp_ZExdmh2zzqgseDgjxg4L3TDqgsHFZyQyD6A":-1},"/nuxt/ui/2947"]