\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_",[2867,2870],{"name":2868,"color":2869},"enhancement","a2eeef",{"name":2871,"color":2872},"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.72609156,{"description":2882,"labels":2883,"number":2889,"owner":2874,"repository":2875,"state":2876,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nwhen use UHeader of nuxt pro ,it does support a link slot that i can customize ,because when i use nuxti18n ,i must use the \u003CNuxtLinkLocale to=\"/\">\u003C/NuxtLinkLocale> provided by nuxti18n to skip routes in multi-language environments\n\n### Additional context\n\n_No response_",[2884,2885,2888],{"name":2868,"color":2869},{"name":2886,"color":2887},"pro","5BD3CB",{"name":2871,"color":2872},2765,"UHeader and UFooter doesnt support a link slot that users can customize","2025-01-13T11:17:00Z","https://github.com/nuxt/ui/issues/2765",0.7261523,{"description":2895,"labels":2896,"number":2902,"owner":2874,"repository":2874,"state":2876,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.8.0\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.0\r\n- Package Manager: npm@9.6.7\r\n- Builder: -\r\n- User Config: devtools, nitro\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-jcxvar?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nThe problem is when using layout named slots within pages to show different piece of data for each page. For example different menu, toolbar, header info or whatever. On each page/route change, whole layout gets re-executed. So if you have components or subcomponents with fetch calls, everything is refetched every time, event listeners are duplicated and memory usage goes up.\r\n\r\nIf NuxtLayout is added to app.vue instead pages, everything works fine. But in that case, I am unable to use named slots within pages.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2897,2899],{"name":2868,"color":2898},"8DEF37",{"name":2900,"color":2901},"🍰 p2-nice-to-have","0E8A16",23929,"named layout slots directly within pages","2025-03-12T15:13:00Z","https://github.com/nuxt/nuxt/issues/23929",0.73422956,{"labels":2908,"number":2913,"owner":2874,"repository":2874,"state":2914,"title":2915,"updated_at":2916,"url":2917,"score":2918},[2909,2910],{"name":2868,"color":2898},{"name":2911,"color":2912},"2.x","d4c5f9",6668,"closed","Proposal to replace \u003Cnuxt> and \u003Cnuxt-child> by normal slots","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6668",0.71153915,{"description":2920,"labels":2921,"number":2922,"owner":2874,"repository":2923,"state":2914,"title":2924,"updated_at":2925,"url":2926,"score":2927},"",[],1050,"nuxt.com","[Code] Changelog","2023-10-10T14:45:04Z","https://github.com/nuxt/nuxt.com/issues/1050",0.7123624,{"description":2929,"labels":2930,"number":2922,"owner":2874,"repository":2934,"state":2914,"title":2935,"updated_at":2936,"url":2937,"score":2927},"### Environment\n\nWindows (11 Pro), NodeJS `v22.12.0`\n\n### Reproduction\n\nhttps://github.com/naturalprogrammer/np-nuxt-test-sample\n\n### Describe the bug\n\nWhen I run `npm run test` on Windows, I get the following output:\n\n```bash\n FAIL tests/app.test.ts [ tests/app.test.ts ]\nTypeError: The URL must be of scheme file\n ❯ node_modules/@nuxt/test-utils/dirs.js:4:17\n\n ❯ node_modules/@nuxt/test-utils/dist/e2e.mjs:4:31\n```\nAs a temporary fix, I'd update `node_modules/@nuxt/test-utils/dirs.js` as below:\n\n```ts\nimport { fileURLToPath } from 'node:url'\nimport { dirname } from 'path'\n\n// Fix for Windows path resolution\nexport const distDir = dirname(fileURLToPath(import.meta.url)) + '/dist'\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2931],{"name":2932,"color":2933},"pending triage","5D08F5","test-utils","On Windows, running tests throws error \"TypeError: The URL must be of scheme file\"","2025-01-11T22:45:30Z","https://github.com/nuxt/test-utils/issues/1050",{"description":2939,"labels":2940,"number":2946,"owner":2874,"repository":2874,"state":2914,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Describe the feature\n\nOnly home is a different layout, all the internals of the site are the same, so I would like to use: \u003CNuxtLayout name=\"home\"> for initial, but in the internals I would like to use the default layout.\r\n\r\nBut it doesn't work:\r\n\r\n```\r\n\u003Ctemplate #preContent>\r\n \u003Cdiv class=\"sum-class\">\r\n SomeContent here\r\n \u003C/div>\r\n \u003C/template>\r\n```\r\n\r\nIf this functionality already exists, I haven't found it in the documentation.\r\n```\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.13.0`\r\n- Nuxt Version: `3.3.1`\r\n- Nitro Version: `2.3.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `directus`, `modules`, `app`, `imports`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.6.3`, `nuxt-icon@0.3.3`, `nuxt-directus@5.1.1`, `@pinia/nuxt@0.4.7`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n```\r\n\n\n### Additional information\n\n- [ ] 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).",[2941,2944],{"name":2942,"color":2943},"3.x","29bc7f",{"name":2932,"color":2945},"E99695",19859,"Use the named slot templates with default layout","2023-03-22T15:39:14Z","https://github.com/nuxt/nuxt/issues/19859",0.72484446,{"description":2952,"labels":2953,"number":2959,"owner":2874,"repository":2874,"state":2914,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### 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_",[2954,2955,2956],{"name":2942,"color":2943},{"name":2932,"color":2945},{"name":2957,"color":2958},"upstream","E8A36D",21915,"Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.7273561,{"description":2965,"labels":2966,"number":2976,"owner":2874,"repository":2875,"state":2914,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.18.1\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.1.42\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.10, @nuxtjs/i18n@9.1.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nV3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-forked-lz4ygf\n\n### Description\n\nOnce a USelectMenu is placed inside of a USlideover, the search breaks. You can't highlight the search input, you can still select items without a problem.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2967,2970,2973],{"name":2968,"color":2969},"bug","d73a4a",{"name":2971,"color":2972},"duplicate","cfd3d7",{"name":2974,"color":2975},"v3","49DCB8",3021,"USelectMenu search breaks when placed inside of a USlideover","2025-01-25T12:43:16Z","https://github.com/nuxt/ui/issues/3021",0.7286879,{"description":2982,"labels":2983,"number":2991,"owner":2874,"repository":2874,"state":2914,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### 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_",[2984,2985,2988],{"name":2942,"color":2943},{"name":2986,"color":2987},"🔨 p3-minor","FBCA04",{"name":2989,"color":2990},"server components","839413",25423,"Respect named slots in server components","2024-03-06T15:26:20Z","https://github.com/nuxt/nuxt/issues/25423",0.7294051,["Reactive",2997],{},["Set"],["ShallowReactive",3000],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2Ai8AGkIQLirSwA65UpATdEkS0n3tjf67U9sgG_k0U0":-1},"/nuxt/ui/3558"]