\n```\nThis will help users operate data tables more efficiently.\n\n### Additional context\n\n_No response_",[2856,2859],{"name":2857,"color":2858},"enhancement","a2eeef",{"name":2860,"color":2861},"triage","ffffff",2851,"nuxt","ui","open","UTable keyboard events","2024-12-09T05:42:48Z","https://github.com/nuxt/ui/issues/2851",0.70109236,{"description":2871,"labels":2872,"number":2875,"owner":2863,"repository":2864,"state":2865,"title":2876,"updated_at":2877,"url":2878,"score":2879},"### 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_",[2873,2874],{"name":2857,"color":2858},{"name":2860,"color":2861},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.73051894,{"description":2881,"labels":2882,"number":2888,"owner":2863,"repository":2864,"state":2865,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### 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_",[2883,2884,2887],{"name":2857,"color":2858},{"name":2885,"color":2886},"v3","49DCB8",{"name":2860,"color":2861},4201,"[InputNumber] Add support for leading & trailing slots","2025-05-21T13:07:28Z","https://github.com/nuxt/ui/issues/4201",0.73244417,{"description":2894,"labels":2895,"number":2902,"owner":2863,"repository":2863,"state":2903,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### 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_",[2896,2899],{"name":2897,"color":2898},"3.x","29bc7f",{"name":2900,"color":2901},"pending triage","E99695",15158,"closed","Layout slots not working in default layout","2023-09-26T14:37:01Z","https://github.com/nuxt/nuxt/issues/15158",0.70790845,{"description":2909,"labels":2910,"number":2918,"owner":2863,"repository":2864,"state":2903,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.10.0`\n- Nuxt Version: `3.17.0`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.10`\n- Package Manager: `pnpm@10.10.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nAny use of tabs slots\n\n### Description\n\nAfter upgrading all dependencies to the latest version and keeping NuxtUI v3.0.2 everything is ok but when in addition to other dependencies I also upgrade NuxtUI to the latest version v3.1.0 then TS errors appear as in the attached screen shot so I guess again a step backwards from the recent fixes with slots ;p\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2911,2914,2917],{"name":2912,"color":2913},"bug","d73a4a",{"name":2915,"color":2916},"duplicate","cfd3d7",{"name":2885,"color":2886},4005,"Tab slots types error","2025-04-28T10:54:47Z","https://github.com/nuxt/ui/issues/4005",0.7150324,{"description":2924,"labels":2925,"number":2927,"owner":2863,"repository":2864,"state":2903,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### For what version of Nuxt UI are you suggesting this?\n\nv2\n\n### Description\n\nPlease export `UTable` types in '#ui/types' too (Rows/Columns types).\nThanks\n\n### Additional context\n\n_No response_",[2926],{"name":2857,"color":2858},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.7159241,{"description":2933,"labels":2934,"number":2938,"owner":2863,"repository":2864,"state":2903,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\ni add the default table but have another styling.\nhow can i fix this? \n\n` \u003CUTable\n v-model:expand=\"expand\"\n class=\"w-full\"\n :loading-state=\"{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }\"\n :progress=\"{ color: 'primary', animation: 'carousel' }\"\n :rows=\"people\"\n :columns=\"columns\"\n >`\n\n",[2935],{"name":2936,"color":2937},"question","d876e3",2667,"I have no styling at the default UTable","2024-11-17T11:13:44Z","https://github.com/nuxt/ui/issues/2667",0.71941596,{"description":2944,"labels":2945,"number":2947,"owner":2863,"repository":2864,"state":2903,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHow can add a class to the \"selectable\" column? Other columns I can use the `class` attribute (https://ui.nuxt.com/components/table#columns) for the column, but for the automatically showing \"selectable\" column, there's no such way to customize it\n\n### Additional context\n\n_No response_",[2946],{"name":2857,"color":2858},2377,"Ability to add custom column data (specifically class) to automatically showing selectable column","2024-11-12T17:12:38Z","https://github.com/nuxt/ui/issues/2377",0.72119933,{"description":2953,"labels":2954,"number":2958,"owner":2863,"repository":2863,"state":2903,"title":2959,"updated_at":2960,"url":2961,"score":2962},"Hey!\r\n\r\nWith our current project, me and the team was wondering what was the reasoning behind the decision to not support slots in layouts?\r\n\r\nWe ran into it when we realized that a CSS grid layout would work best for our responsive view, since each page knows what kind of sidebar or extra content is required in this specific case. For that the structure would need to be like this:\r\n\r\n```\r\nhtml\r\n head\r\n ...\r\n body\r\n my-header\r\n nuxt\r\n #content\r\n slot\r\n #sidebar\r\n slot(name=\"sidebar\")\r\n #extra\r\n slot(name=\"extra\")\r\n my-footer\r\n```\r\nRight now the two options we see are using a separate layout component or somehow coordinating sidebar and extra components to make their own requests according to current route, but both feel at odds with overall simplicity Nuxt aims for.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c941\">#c941\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2955],{"name":2956,"color":2957},"2.x","d4c5f9",1079,"Why no slots in layouts?","2023-01-18T15:40:44Z","https://github.com/nuxt/nuxt/issues/1079",0.72270274,{"description":2964,"labels":2965,"number":2972,"owner":2863,"repository":2863,"state":2903,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### 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).",[2966,2968,2969],{"name":2857,"color":2967},"8DEF37",{"name":2897,"color":2898},{"name":2970,"color":2971},"🍰 p2-nice-to-have","0E8A16",26998,"RouterView slot","2024-05-03T12:58:19Z","https://github.com/nuxt/nuxt/issues/26998",0.72607183,["Reactive",2978],{},["Set"],["ShallowReactive",2981],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flE7e4UlFdPFjweGeLFJr8ptzGCuuYouYUeUKrL7V58Y":-1},"/nuxt/ui/2685"]