\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_",[3040,3041],{"name":3021,"color":3022},{"name":3027,"color":3028},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7315268,{"description":3048,"labels":3049,"number":3053,"owner":3030,"repository":3031,"state":3032,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### 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",[3050,3051,3052],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},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.74119675,{"description":3059,"labels":3060,"number":3063,"owner":3030,"repository":3031,"state":3064,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### Description\n\n I wanted to ask if you have considered implementing a server-side table feature in Nuxt UI v3, similar to the functionality provided by Vuetify's DataTable component.\n\nVuetify's DataTable offers built-in support for server-side pagination, filtering, and sorting, which makes it an excellent solution for handling large datasets efficiently. It would be fantastic to see a similar feature integrated into Nuxt UI v3. \nI would love to hear your thoughts on this feature and whether it's something that could be considered for future releases.\n\nThank you for your time and attention!",[3061,3062],{"name":3021,"color":3022},{"name":3024,"color":3025},3023,"closed","I would like to ask, have you considered making a server side table in v3?","2025-01-13T10:43:59Z","https://github.com/nuxt/ui/issues/3023",0.6851752,{"description":3070,"labels":3071,"number":3077,"owner":3030,"repository":3031,"state":3064,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Environment\n\nI just use the demo component on nuxt ui page\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nI recorded it, you can see my vid:\n\nhttps://github.com/user-attachments/assets/82b444d5-473f-43b3-b26f-55b30cc61184\n\n### Description\n\nIt happens when a select box is opening.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3072,3075,3076],{"name":3073,"color":3074},"bug","d73a4a",{"name":3024,"color":3025},{"name":3027,"color":3028},3261,"I saw some flickering with the select boxes in a form","2025-03-08T13:57:49Z","https://github.com/nuxt/ui/issues/3261",0.6898195,{"description":3083,"labels":3084,"number":3093,"owner":3030,"repository":3030,"state":3064,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### Describe the feature\n\nhey 👋\r\n\r\nrecently I came across a special case where I had to pass a component to child NuxtPage and figured out that NuxtPage does not seem to support passing vslot.\r\n\r\nHere is the documentation from Vue Router about that:\r\nhttps://router.vuejs.org/guide/advanced/router-view-slot\r\n\r\nSeems very useful functionality. Do you think it would be possible to support it with NuxtPage?\r\n\r\nCheers!\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).",[3085,3087,3090],{"name":3021,"color":3086},"8DEF37",{"name":3088,"color":3089},"3.x","29bc7f",{"name":3091,"color":3092},"🍰 p2-nice-to-have","0E8A16",26998,"RouterView slot","2024-05-03T12:58:19Z","https://github.com/nuxt/nuxt/issues/26998",0.7157643,{"description":3099,"labels":3100,"number":3105,"owner":3030,"repository":3030,"state":3064,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0-rc.13`\r\n- Nitro Version: `0.6.1`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `build`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-rhmame-yu2hri?file=components%2FNestedSlots.vue,app.vue\n\n### Describe the bug\n\nThis is a weird one, it is probably easier to understand looking at the reproduction example.\r\n\r\nWhen defining slot content / templates in a `v-for` loop, the current loop element is undefined in that slot. However, this only occurs in very specific cases:\r\n\r\n1. Page is rendered in SSR\r\n2. Slot Templates are defined in `v-for`\r\n3. Content referencing the loop element is using an external component that is also using slots\r\n\r\nIt works perfectly fine on client side or if the component used to render the content is internal (part of the same project, not pre-built from a library).\n\n### Additional context\n\nWe came across this issue when starting to extract a component library from our project prototype.\r\n\r\nWe have a dynamic table / listing component used to render a list of objects based on a column configuration. This component also provides dynamic scoped slots for every column in case we want to customize the rendering.\r\n\r\nUnder the hood, it uses our basic table components to render table rows and cells. After we moved those table components to our new component library, the dynamic listing suddenly broke in SSR.\r\n\r\nHowever, I made the reproduction example as simple as I could and used a random UI library instead of our own code to make sure the same error happens.\n\n### Logs\n\n_No response_",[3101,3102],{"name":3088,"color":3089},{"name":3103,"color":3104},"pending triage","E99695",15433,"Loop context is lost when rendering nested slot in v-for using external component in SSR","2023-01-19T17:50:15Z","https://github.com/nuxt/nuxt/issues/15433",0.7178397,{"description":3111,"labels":3112,"number":3118,"owner":3030,"repository":3030,"state":3064,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### 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_",[3113,3114,3115],{"name":3088,"color":3089},{"name":3103,"color":3104},{"name":3116,"color":3117},"upstream","E8A36D",21915,"Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.7246729,{"description":3124,"labels":3125,"number":3133,"owner":3030,"repository":3030,"state":3064,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### 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_",[3126,3127,3130],{"name":3088,"color":3089},{"name":3128,"color":3129},"🔨 p3-minor","FBCA04",{"name":3131,"color":3132},"server components","839413",25423,"Respect named slots in server components","2024-03-06T15:26:20Z","https://github.com/nuxt/nuxt/issues/25423",0.7269058,{"description":3139,"labels":3140,"number":3143,"owner":3030,"repository":3030,"state":3064,"title":3144,"updated_at":3145,"url":3146,"score":3147},"### Environment\n\nNuxt 3.0.0-rc.11\n\n### Reproduction\n\nStackBlitz: https://stackblitz.com/edit/nuxt3-layout-slot-bug\n\n### Describe the bug\n\nLayout slots not working with default layout, generate error (see reproduction):\r\n\r\n```\r\nError: Codegen node is missing for element/if/for node. Apply appropriate transforms first.\r\n```\r\n\r\nNote the use of `app.vue`.\r\n\r\nExplicitly using `\u003CNuxtLayout>` with `layout: false` in page meta works but leads to full re-render of the layout and kinda defies the purpose of a default layout.\r\n\r\nNot sure if I'm doing something wrong with the setup, but following the docs, the code in the repro should work. Also, best in terms of DX IMO.\n\n### Additional context\n\nThis is a typical use case where you for instance have a nav and want to add additional items via a slot on specific pages.\n\n### Logs\n\n_No response_",[3141,3142],{"name":3088,"color":3089},{"name":3103,"color":3104},15158,"Layout slots not working in default layout","2023-09-26T14:37:01Z","https://github.com/nuxt/nuxt/issues/15158",0.7283029,["Reactive",3149],{},["Set"],["ShallowReactive",3152],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwyaa3QginqHUjFwsKNy-TKlOXazDcBn1PpbKW8Sl4d0":-1},"/nuxt/ui/3399"]