\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_",[3019,3022],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"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.71303153,{"description":3034,"labels":3035,"number":3041,"owner":3026,"repository":3027,"state":3028,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### Description\n\nIn Vue it's easy to use HTML in every component using v-html. It would be very helpful in Nuxt UI to have this feature without workarounds like slots with additional span tags. In our case we often have some html tags like: b,i,... or nbsp in our database driven app. \n\n### Additional context\n\n_No response_",[3036,3037,3040],{"name":3020,"color":3021},{"name":3038,"color":3039},"v3","49DCB8",{"name":3023,"color":3024},4396,"Use HTML in label or in a new prop","2025-06-24T13:00:05Z","https://github.com/nuxt/ui/issues/4396",0.7395928,{"description":3047,"labels":3048,"number":3052,"owner":3026,"repository":3027,"state":3028,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Description\n\nI propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.\n\n## Example\nThe Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).\n\nBefore:\n```html\n\u003CUForm ...>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n\u003CUForm/>\n```\n\nAfter:\n```html\n\u003C!-- `ui` prop is the same as `app.config.ts` theming config\n\u003CUTheme :ui=\"{\n formField: {\n\t slots: {\n\t root: \"flex max-sm:flex-col justify-between items-center gap-4\",\n\t},\n },\n}\">\n \u003CUForm ...>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUForm/>\n\u003C/UTheme>\n```\n\n## Benefits\n- Easily componentized. I could create a `AppForm` component which contains the `UTheme` usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.\n- Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one\n\n## Implementation\nI'd tentatively be willing to implement this. My approach would be:\n- Create `UTheme`, it should have a `ui` and `uiPro` prop, each of which take the same type as the `app.config.ts`\n- `provide()` those props\n- `inject()` those props into each component and merge with passed in `ui` field.\n- Theme priority order should be:\n 1. `ui` prop passed to component\n 2. `ui` prop coming from UTheme component\n 3. `ui` config coming from `app.config.ts`\n\n### Additional context\n\n_No response_",[3049,3050,3051],{"name":3020,"color":3021},{"name":3038,"color":3039},{"name":3023,"color":3024},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7446923,{"description":3058,"labels":3059,"number":3063,"owner":3026,"repository":3027,"state":3028,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### Description\n\nThis feature request proposes that the InputNumber component be enhanced with leading and trailing slot support. \n\nCurrently, components such as **Input**, **InputMenu**, **Select**, and **SelectMenu** already offer these slots for inserting custom content. For consistency across the UI library and to provide developers with a uniform customization experience, it is imperative that InputNumber is updated to include both leading and trailing slots. \n\n### Additional context\n\n_No response_",[3060,3061,3062],{"name":3020,"color":3021},{"name":3038,"color":3039},{"name":3023,"color":3024},4201,"[InputNumber] Add support for leading & trailing slots","2025-05-21T13:07:28Z","https://github.com/nuxt/ui/issues/4201",0.74887687,{"description":3069,"labels":3070,"number":3074,"owner":3026,"repository":3027,"state":3028,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Description\n\nIn InputNumber, the props used for the Increment and Decrement button are not passed to their slots, this causes difficulty in attempting to access those props in the case functionality needs to be added/overridden, but aesthetics (or ARIA) want to be maintained.\n\nThe increment button is an example of this, whereby `incrementIcon`, `color`, `size`, the translation, and the v-bind props for the button aren't passed to the slot. Thus, to access them again, code needs to be duplicated in order to recompute these properties, and defeats the purpose of DRY code. https://github.com/nuxt/ui/blob/f761369888c49fd0ee0f028dcf3c55dd5fbd2cae/src/runtime/components/InputNumber.vue#L176-L185\n\nA possible, simple solution might look like this (using scoped slots):\n```vue\n \u003Cslot name=\"increment\" :icon=\"incrementIcon\" :color=\"color\" :size=\"size\" :aria-label=\"t('inputNumber.increment')\" variant=\"link\" :bind=\"typeof increment === 'object' ? increment : undefined\"> \n \u003CUButton \n :icon=\"incrementIcon\" \n :color=\"color\" \n :size=\"size\" \n variant=\"link\" \n :aria-label=\"t('inputNumber.increment')\" \n v-bind=\"typeof increment === 'object' ? increment : undefined\" \n /> \n \u003C/slot> \n```\n\n### Additional context\n\nI believe this is common throughout the library, and was wondering to post this issue or not given that there might already be a specific reason. But alas, I couldn't find one in the issues.\n\ncc, from #4411",[3071,3072,3073],{"name":3020,"color":3021},{"name":3038,"color":3039},{"name":3023,"color":3024},4435,"InputNumber increment/decrement button props not being passed to their respective slots","2025-07-01T17:13:20Z","https://github.com/nuxt/ui/issues/4435",0.7489259,{"description":3080,"labels":3081,"number":3091,"owner":3026,"repository":3026,"state":3092,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### 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_",[3082,3085,3088],{"name":3083,"color":3084},"3.x","29bc7f",{"name":3086,"color":3087},"🔨 p3-minor","FBCA04",{"name":3089,"color":3090},"server components","839413",25423,"closed","Respect named slots in server components","2024-03-06T15:26:20Z","https://github.com/nuxt/nuxt/issues/25423",0.7237178,{"description":3098,"labels":3099,"number":3107,"owner":3026,"repository":3026,"state":3092,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### 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_",[3100,3101,3104],{"name":3083,"color":3084},{"name":3102,"color":3103},"pending triage","E99695",{"name":3105,"color":3106},"upstream","E8A36D",21915,"Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.72387457,{"description":3113,"labels":3114,"number":3127,"owner":3026,"repository":3027,"state":3092,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, extends, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-qsqtmc?file=app.vue\n\n### Description\n\nLandingFAQ being built on top Accordion, when an item has a specified \"slot\" property, it should allow to display custom content in a corresponding slot. In my reproduction, you can see i have an faq item with a slot property equal to \"risks\". When using \u003Ctemplate #risks> risks \u003C/template> to show a specific content for that item, it works well in the accordion but is ignored in the LandingFAQ where the content property is shown instead.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3115,3118,3121,3122,3125],{"name":3116,"color":3117},"bug","d73a4a",{"name":3119,"color":3120},"nuxt/ui-pro","00dc82",{"name":3023,"color":3024},{"name":3123,"color":3124},"closed-by-bot","ededed",{"name":3126,"color":3124},"stale",2057,"LandingFAQ component in Pro ignores the \"slot\" property of an item","2025-06-18T09:06:25Z","https://github.com/nuxt/ui/issues/2057",0.73017704,{"description":3133,"labels":3134,"number":3137,"owner":3026,"repository":3027,"state":3092,"title":3138,"updated_at":3139,"url":3140,"score":3141},"\u003Cdetails>\n \u003Csummary>Environment\u003C/summary>\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.4.1\n- Builder: -\n- User Config: modules, ssr, devtools, app, css, ui, runtimeConfig, alias, build, devServer, watch, future, experimental, compatibilityDate, nitro, vite, eslint, heyApi, i18n, icon, svgIconSprite\n- Runtime Modules: @nuxt/ui@3.1.2, @nuxt/test-utils/module@3.19.0, @nuxt/eslint@1.4.1, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.2.0, @hey-api/nuxt@0.1.6, @nuxtjs/i18n@9.5.4, nuxt-svg-icon-sprite@2.0.0\n- Build Modules: -\n------------------------------\n\u003C/details>\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://www.npmjs.com/package/@nuxt/ui?activeTab=code - `interface ModalSlots`\n\n### Description\n\nGreetings, thank you very much for the work you have done!\n\nUsing the example of the `UModal` component, you can see that props in scoped slots, such as `#footer=“{ close }”`, is untyped \n\u003Cdetails>\n \u003Csummary>Example\u003C/summary>\n\n \n\u003C/details>\n\nin the bundle package it can be seen that there are indeed no valid types of props in `ModalSlots` - https://www.npmjs.com/package/@nuxt/ui?activeTab=code `interface ModalSlots`, although they are present in the source files - https://github.com/nuxt/ui/blob/v3/src/runtime/components/Modal.vue#L70\n\n\nAs I understand it, it is not only `UModal`, but all components with scoped slots.",[3135,3136],{"name":3116,"color":3117},{"name":3038,"color":3039},4260,"Scoped slots are not typed","2025-06-02T09:08:41Z","https://github.com/nuxt/ui/issues/4260",0.7314317,{"description":3143,"labels":3144,"number":3147,"owner":3026,"repository":3026,"state":3092,"title":3148,"updated_at":3149,"url":3150,"score":3151},"### 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_",[3145,3146],{"name":3083,"color":3084},{"name":3102,"color":3103},18754,"component slots end up as comments","2023-02-05T13:45:07Z","https://github.com/nuxt/nuxt/issues/18754",0.7358573,["Reactive",3153],{},["Set"],["ShallowReactive",3156],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFo4d1m_R0F7-OaB7u9yTaaqGY_26PZqeZZyXZhx0FsE":-1},"/nuxt/ui/4575"]