\r\n \u003C/component>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n'use strict';\r\n\r\nexport default {\r\n props: {\r\n element: {\r\n type: String,\r\n required: false,\r\n default: 'button'\r\n }\r\n }\r\n};\r\n\u003C/script>\r\n```\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CBaseComponent>\r\n \u003Ctemplate v-for=\"(_, name) in $slots\" v-slot:[name]=\"scope\">\r\n \u003Cslot :name=\"name\" v-bind=\"scope\" />\r\n \u003C/template>\r\n \u003C/BaseComponent>\r\n\u003C/template>\r\n\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3157,3160,3163],{"name":3158,"color":3159},"3.x","29bc7f",{"name":3161,"color":3162},"pending triage","E99695",{"name":3164,"color":3165},"upstream","E8A36D",21915,"closed","Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.6424632,{"description":3173,"labels":3174,"number":3180,"owner":3147,"repository":3147,"state":3167,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### Environment\n\nNuxi 3.0.0-rc.10 \r\nRootDir: /sandbox\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v14.19.3`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://codesandbox.io/s/dawn-morning-b454k7?file=/pages/index.vue\r\n\r\nJuicy bit:\r\n`\u003CFooComponent>\r\n \u003Ctemplate v-if=\"true\" #first> Hello conditional \u003C/template>\r\n\u003C/FooComponent>`\n\n### Describe the bug\n\n- When rendering a component slot with a condition that evaluates to true, an error will be thrown, the slot is however rendered correctly.\r\n- It only seems to happen during SSR.\r\n- Conditions that evaluates to false does not throw an error\n\n### Additional context\n\nIn RC 8 this was working fine\n\n### Logs\n\n```shell\n[nitro] [dev] [unhandledRejection] TypeError: Cannot set property 'key' of undefined\r\n at slots.\u003Ccomputed> (/sandbox/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2924:29)\r\n at ssrRenderSlotInner (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:628:21)\r\n at Module.ssrRenderSlot (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:618:5)\r\n at _sfc_ssrRender (/sandbox/components/FooComponent.vue:7:25)\r\n at renderComponentSubTree (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:254:17)\r\n at renderComponentVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)\r\n at Module.ssrRenderComponent (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:612:12)\r\n at _sfc_ssrRender (/sandbox/pages/index.vue:60:31)\r\n at renderComponentSubTree (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:254:17)\r\n at renderComponentVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)\n```\n",[3175,3176,3177],{"name":3158,"color":3159},{"name":3164,"color":3165},{"name":3178,"color":3179},"upstream-bug","B60205",14950,"Server-side rendering a component with conditional slot causes error","2024-06-17T15:31:28Z","https://github.com/nuxt/nuxt/issues/14950",0.644137,{"description":3186,"labels":3187,"number":3198,"owner":3147,"repository":3148,"state":3167,"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_",[3188,3191,3192,3193,3196],{"name":3189,"color":3190},"feature","A27AF6",{"name":3141,"color":3142},{"name":3144,"color":3145},{"name":3194,"color":3195},"closed-by-bot","ededed",{"name":3197,"color":3195},"stale",4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.661189,{"labels":3204,"number":3210,"owner":3147,"repository":3147,"state":3167,"title":3211,"updated_at":3212,"url":3213,"score":3214},[3205,3206,3207],{"name":3197,"color":3145},{"name":3161,"color":3162},{"name":3208,"color":3209},"2.x","d4c5f9",5613,"Cannot render nested dynamic components","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5613",0.66281235,{"description":3216,"labels":3217,"number":3219,"owner":3147,"repository":3147,"state":3167,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools, components\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-3-bug-vl98j5\n\n### Describe the bug\n\nThe problem only occurs with the production build.\r\nIf a component is imported dynamically and uses components common to its sub-components (e.g. a composable) and this sub-component is used elsewhere in the code, then SSR rendering of the component no longer occurs.\r\nIn my example in dev mode, the final rendering of the page is :\r\n```\r\nHello\r\nTest : foo\r\nTest Child : foo\r\nTest Child 2\r\nTest Child 2 Child : foo\r\nTest Child 2\r\nTest Child 2 Child : foo\r\n```\r\nUnfortunately, in prod mode, the ssr rendering is as follows : \r\n```\r\nHello\r\nTest : foo\r\nTest Child : foo\r\nTest Child 2\r\nTest Child 2 Child : foo\r\n```\r\nAs the client-side setup also executes for hydration, the rendering updates correctly and everything is displayed, but there is a problem with the SSR rendering.\r\nThere are no errors during the nuxt build or when generating the page on the SSR side.\r\nI think the problem must come from rollup because if you look in the file `.output/server/chunks/BaseTestChild2-WlFZNhyr.mjs` there is an export of several elements.\r\n```\r\nconst BaseTestChild2 = /* @__PURE__ */ Object.freeze({\r\n __proto__: null,\r\n default: _sfc_main\r\n});\r\n\r\nexport { BaseTestChild2 as B, _sfc_main as _, useFoo as u };\r\n```\r\nIf we compare it to a normal component (`.output/server/chunks/BaseTest-DrvCz1q7.mjs`), the export is different.\r\n```\r\nexport { _sfc_main as default };\r\n```\r\nFor me, the problem comes from the fact that it creates an object with `default: _sfc_main` before exporting it.\r\nWhen we look at the use of these files in `.output/server/server.mjs` there is a difference.\r\n```\r\nsetup(__props) {\r\n const BaseTest = defineAsyncComponent(\r\n () => import('./BaseTest-DrvCz1q7.mjs')\r\n );\r\n const BaseTestChild2 = defineAsyncComponent(\r\n () => import('./BaseTestChild2-WlFZNhyr.mjs').then(function(n) {\r\n return n.B;\r\n })\r\n );\r\n}\r\n```\r\nFor my part, when I remove the creation of this object to export in the same way as `.output/server/chunks/BaseTest-DrvCz1q7.mjs`, it works.\r\nOr if I add `n.B.default` to the `import('./BaseTestChild2-WlFZNhyr.mjs').then(function(n) {`, that works too.\n\n### Additional context\n\nTo reproduce, simply `yarn build` then `yarn preview` in my codesandbox example.\r\nYou can look directly at the existing `.output` that contains the problem.\r\nI don't know if this is the right place for this ticket or if I should make a ticket on the rollup side.\n\n### Logs\n\n_No response_",[3218],{"name":3161,"color":3162},27836,"Dynamic component SSR rendering problem","2024-08-12T21:15:06Z","https://github.com/nuxt/nuxt/issues/27836",0.6639151,{"labels":3225,"number":3231,"owner":3147,"repository":3147,"state":3167,"title":3232,"updated_at":3233,"url":3234,"score":3235},[3226,3227,3228],{"name":3158,"color":3159},{"name":3138,"color":3139},{"name":3229,"color":3230},"🔨 p3-minor","FBCA04",13117,"Production build + custom vue lib + ssr","2023-01-19T16:57:45Z","https://github.com/nuxt/nuxt/issues/13117",0.6736572,{"labels":3237,"number":3241,"owner":3147,"repository":3147,"state":3167,"title":3242,"updated_at":3243,"url":3244,"score":3245},[3238,3239,3240],{"name":3197,"color":3145},{"name":3161,"color":3162},{"name":3208,"color":3209},8904,"Hydration error with scoped slots and component discovery (async components)","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8904",0.6746151,{"description":3247,"labels":3248,"number":3254,"owner":3147,"repository":3147,"state":3167,"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.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-issues-25423\r\n\r\n### Describe the bug\r\n\r\nUsing nested slots in a server components + `nuxt-client` breaks:\r\n\r\nExample\r\n\r\n```vue\r\n\u003C!-- ServerComp.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CAppButton nuxt-client>\r\n \u003Cslot />\r\n \u003C/AppButton>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n```vue\r\n\u003C!-- App.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CServerComp>\r\n Some slot content here\r\n \u003C/ServerComp>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3249,3250,3251],{"name":3158,"color":3159},{"name":3229,"color":3230},{"name":3252,"color":3253},"server components","839413",25423,"Respect named slots in server components","2024-03-06T15:26:20Z","https://github.com/nuxt/nuxt/issues/25423",0.6776136,{"labels":3260,"number":3261,"owner":3147,"repository":3147,"state":3167,"title":3232,"updated_at":3262,"url":3263,"score":3264},[],13198,"2023-01-19T16:48:28Z","https://github.com/nuxt/nuxt/issues/13198",0.6791094,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fE2oF3VuYo4upRuf74SRT0MNp4b7soqNPAk7AiCivuAE":-1},"/nuxt/nuxt/15433"]