\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_",[3020,3023],{"name":3021,"color":3022},"enhancement","a2eeef",{"name":3024,"color":3025},"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.69646937,{"description":3035,"labels":3036,"number":3037,"owner":3027,"repository":3038,"state":3029,"title":3039,"updated_at":3040,"url":3041,"score":3042},"i think the example code should use \r\n`// Current implementation\r\npreviousTodos.value = todos.value;\r\n\r\n// Proposed change\r\npreviousTodos.value = [...todos.value];`",[],1653,"nuxt.com","Docs (useNuxtData => #Optimistic Updates).Incorrect Use of Reference Assignment in previousTodos.value = todos.value","2025-03-21T19:43:40Z","https://github.com/nuxt/nuxt.com/issues/1653",0.70879745,{"description":3044,"labels":3045,"number":3049,"owner":3027,"repository":3050,"state":3029,"title":3051,"updated_at":3052,"url":3053,"score":3054},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.15.0`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `yarn@1.22.19`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`\n- Runtime Modules: `@nuxt/test-utils@3.19.1`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://github.com/cjpearson/test-utils-issue\n\n### Describe the bug\n\nAfter upgrading to Vue 3.5.15, we have a test where the component is improperly rendered. This is the output of `renderSuspended().html()`\n\n**Before (3.5.14):**\n\n```html\n\u003Cdiv id=\"test-wrapper\">\n \u003Cdiv>\n \u003Ctransition-stub appear=\"false\" persisted=\"false\" css=\"true\">\n \u003Cdialog open=\"\">\u003Cbutton data-testid=\"close-button\"> Close \u003C/button>\n \u003Cdiv>\n \u003Cdiv data-testid=\"dialog-content\"> I am some modal content \u003C/div>\n \u003C/div>\n \u003C/dialog>\n \u003C/transition-stub>\u003Cbutton data-testid=\"btn\">Open\u003C/button>\n \u003C/div>\n\u003C/div>\n```\n\n**After (3.5.15):**\n\n```html\n\u003Cdiv id=\"test-wrapper\">\n \u003Cdiv>\n \u003C!--[object Object]-->\u003Cbutton data-testid=\"btn\">Open\u003C/button>\n \u003C/div>\n\u003C/div>\n```\n\nWhile it's caused by a vue upgrade, I think this may be an issue within the test-utils because when running the application itself, everything seems to work ok.\n\n### Additional context\n\nThere seem to be a couple necessary aspects for this bug to occur:\n\n* There's a component which has a prop of type `Component`\n* The default value for this prop is imported through a barrel file\n\nI've tried narrowing down the changes in Vue 3.5.15 and it looks like [this change](https://github.com/vuejs/core/pull/13245/files) in compiler-sfc is the root cause. \n\n### Logs\n\n```shell-script\n\n```",[3046],{"name":3047,"color":3048},"pending triage","5D08F5",1312,"test-utils","Incorrect rendering with vue 3.5.15 and component props","2025-06-02T13:37:43Z","https://github.com/nuxt/test-utils/issues/1312",0.7153684,{"description":3056,"labels":3057,"number":3063,"owner":3027,"repository":3027,"state":3029,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### Describe the feature\n\nSometimes you need to have multiple components in the `app.vue` file, or as close to the root element as possible. For example, if you have multiple modals that must be present not only on every page, but also on every layout (dialogs, cookie notice, etc) or any other interface resource and you must add each one manually somewhere in the `app.vue` file.\r\n\r\nI think it would be nice to have a directory for \"universal\" components that Nuxt detects and automatically injects into the root element. This would perfectly follow the philosophy of the framework to improve the DX as much as possible.\r\n\r\nAn example of how it would be now and how it could be:\r\n\r\n```vue\r\n// ~/app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\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).",[3058,3060],{"name":3021,"color":3059},"8DEF37",{"name":3061,"color":3062},"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":3069,"labels":3070,"number":3076,"owner":3027,"repository":3027,"state":3077,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### 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_",[3071,3074],{"name":3072,"color":3073},"3.x","29bc7f",{"name":3047,"color":3075},"E99695",18754,"closed","component slots end up as comments","2023-02-05T13:45:07Z","https://github.com/nuxt/nuxt/issues/18754",0.69751054,{"labels":3083,"number":3088,"owner":3027,"repository":3027,"state":3077,"title":3089,"updated_at":3090,"url":3091,"score":3092},[3084,3085],{"name":3047,"color":3075},{"name":3086,"color":3087},"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":3094,"labels":3095,"number":3102,"owner":3027,"repository":3028,"state":3077,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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```",[3096,3099],{"name":3097,"color":3098},"bug","d73a4a",{"name":3100,"color":3101},"v3","49DCB8",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":3108,"labels":3109,"number":3112,"owner":3027,"repository":3027,"state":3077,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### 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_",[3110,3111],{"name":3072,"color":3073},{"name":3047,"color":3075},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":3118,"labels":3119,"number":3122,"owner":3027,"repository":3027,"state":3077,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### 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",[3120,3121],{"name":3072,"color":3073},{"name":3047,"color":3075},24758,"Unable to dynamically add components via string","2023-12-14T20:36:50Z","https://github.com/nuxt/nuxt/issues/24758",0.7105351,{"labels":3128,"number":3133,"owner":3027,"repository":3027,"state":3077,"title":3134,"updated_at":3135,"url":3136,"score":3137},[3129,3131,3132],{"name":3130,"color":3025},"stale",{"name":3047,"color":3075},{"name":3086,"color":3087},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",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7T1z1Wp_ZExdmh2zzqgseDgjxg4L3TDqgsHFZyQyD6A":-1},"/nuxt/ui/2947"]