\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.66118896,{"description":2871,"labels":2872,"number":2882,"owner":2863,"repository":2863,"state":2883,"title":2884,"updated_at":2885,"url":2886,"score":2887},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.15.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: vite\r\n- User Config: extends, telemetry, ssr, nitro, fontMetrics, routeRules, runtimeConfig, build, modules, components, bugsnag, devtools, i18n, app, dnGraphqlClient, vite, plugins\r\n- Runtime Modules: @nuxtjs/fontaine@0.4.0, @pinia/nuxt@0.4.11, @nuxt/devtools@0.6.6, nuxt-bugsnag@5.9.2, @digitalnatives/css-variables/nuxt@5.1.0, @digitalnatives/graphql-client@3.2.2, @nuxtjs/i18n@8.0.0-beta.12\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nSetting up a component inheritance pattern:\r\n\r\n- With ssr: true...\r\n- Base component with a root-level `\u003Ccomponent>` element and one or more slots\r\n- An extending component which \"inherits\" the slots of the base component using `$slots` in the template;\r\n- Use the extending component somewhere\r\n- On the server, an error is thrown: `[1:54:29 PM] [Vue warn]: Property \"name\" was accessed during render but is not defined on instance.`\r\n- On the client, a hydration error is thrown: SSR renders no content within the slots, client-side the component is rendered correctly however\r\n\r\nSee https://codesandbox.io/p/github/nuxt/starter/csb-rhhp8s/draft/determined-joliot?file=/app.vue:3,69\r\n\r\n### Describe the bug\r\n\r\nIt seems server-side there is some problem with SSR trying to pass slots to a dynamic `\u003Ccomponent>`\r\n\r\nI would expect this pattern to work, but somehow the slot name is getting lost somewhere\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Ccomponent\r\n :is=\"element\"\r\n >\r\n \u003Cslot />\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_",[2873,2876,2879],{"name":2874,"color":2875},"3.x","29bc7f",{"name":2877,"color":2878},"pending triage","E99695",{"name":2880,"color":2881},"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":2889,"labels":2890,"number":2896,"owner":2863,"repository":2863,"state":2883,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### 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",[2891,2892,2893],{"name":2874,"color":2875},{"name":2880,"color":2881},{"name":2894,"color":2895},"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,{"labels":2902,"number":2909,"owner":2863,"repository":2863,"state":2883,"title":2910,"updated_at":2911,"url":2912,"score":2913},[2903,2905,2906],{"name":2904,"color":2861},"stale",{"name":2877,"color":2878},{"name":2907,"color":2908},"2.x","d4c5f9",5613,"Cannot render nested dynamic components","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5613",0.6628124,{"description":2915,"labels":2916,"number":2918,"owner":2863,"repository":2863,"state":2883,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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_",[2917],{"name":2877,"color":2878},27836,"Dynamic component SSR rendering problem","2024-08-12T21:15:06Z","https://github.com/nuxt/nuxt/issues/27836",0.6639151,{"labels":2924,"number":2932,"owner":2863,"repository":2863,"state":2883,"title":2933,"updated_at":2934,"url":2935,"score":2936},[2925,2926,2929],{"name":2874,"color":2875},{"name":2927,"color":2928},"bug","d73a4a",{"name":2930,"color":2931},"🔨 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":2938,"number":2942,"owner":2863,"repository":2863,"state":2883,"title":2943,"updated_at":2944,"url":2945,"score":2946},[2939,2940,2941],{"name":2904,"color":2861},{"name":2877,"color":2878},{"name":2907,"color":2908},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":2948,"labels":2949,"number":2955,"owner":2863,"repository":2863,"state":2883,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### 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_",[2950,2951,2952],{"name":2874,"color":2875},{"name":2930,"color":2931},{"name":2953,"color":2954},"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":2961,"number":2962,"owner":2863,"repository":2863,"state":2883,"title":2933,"updated_at":2963,"url":2964,"score":2965},[],13198,"2023-01-19T16:48:28Z","https://github.com/nuxt/nuxt/issues/13198",0.6791094,{"description":2967,"labels":2968,"number":2971,"owner":2863,"repository":2863,"state":2883,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Environment\n\nnpx nuxi info\n\n### Reproduction\n\nRead in additional context\n\n### Describe the bug\n\nRead in additional context\n\n### Additional context\n\nThere is such a component (screenshot 1), it recursively renders blocks that are specified in the CMS. A block can have slots, such as the GridBlock block (screenshot 2). The names of all slots are set dynamically, and also in the component that draws the blocks, I also pass the name of the slot dynamically to v-slot, but vue-tsc throws an error (screenshot 3), according to the types slotName is STRING (screenshot 4). In dev mode, everything works fine, rendering goes as it should! The problem is that the project does not build due to this error (Blocks may not have slots! To do this, you can check for the presence of slots in the block object, but everything works fine in dev mode anyway). Help what can be done?\r\n\r\n\r\n\r\n\r\n\n\n### Logs\n\n_No response_",[2969,2970],{"name":2874,"color":2875},{"name":2877,"color":2878},21557,"Nuxt3 - v-slot","2023-06-14T08:13:36Z","https://github.com/nuxt/nuxt/issues/21557",0.6811967,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fE2oF3VuYo4upRuf74SRT0MNp4b7soqNPAk7AiCivuAE":-1},"/nuxt/nuxt/15433"]