\nI'd really appreciate it if the team considers a more flexible and intuitive API.\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).",[2856,2859],{"name":2857,"color":2858},"enhancement","8DEF37",{"name":2860,"color":2861},"pending triage","E99695",29275,"nuxt","open","Better API for Auto Imports Customization","2024-10-08T08:40:01Z","https://github.com/nuxt/nuxt/issues/29275",0.68740714,{"description":2870,"labels":2871,"number":2877,"owner":2863,"repository":2878,"state":2864,"title":2879,"updated_at":2880,"url":2881,"score":2882},"### 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_",[2872,2874],{"name":2857,"color":2873},"a2eeef",{"name":2875,"color":2876},"triage","ffffff",4138,"ui","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.6900129,{"description":2884,"labels":2885,"number":2889,"owner":2863,"repository":2863,"state":2890,"title":2891,"updated_at":2892,"url":2893,"score":2894},"I am using Nuxt with Typescript. I create a following component:\r\n\r\n \u003Ctemplate>\r\n \u003Cdiv class=\"field\">\r\n \u003Clabel class=\"label\" v-if=\"typeof label !== 'undefined'\">{{ label }}\u003C/label>\r\n \u003Cdiv class=\"control\">\r\n \u003Ctextarea\r\n v-if=\"inputType === 'textarea'\"\r\n class=\"textarea\"\r\n @input=\"$emit('input', $event.target.value)\"\r\n >\u003C/textarea>\r\n \u003Cinput\r\n v-if=\"inputType === 'input'\"\r\n :type=\"type\"\r\n class=\"input\"\r\n @input=\"$emit('input', $event.target.value)\"\r\n >\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/template>\r\n \r\n \u003Cscript lang=\"ts\">\r\n import { Vue, Component, Prop } from \"vue-property-decorator\"\r\n \r\n @Component({})\r\n export default class AppInput extends Vue {\r\n @Prop({ type: String, required: false, default: \"input\" })\r\n inputType!: string\r\n \r\n @Prop({ type: String, required: false })\r\n label!: string\r\n \r\n @Prop({ type: String, required: false, default: \"text\" })\r\n type!: string\r\n }\r\n \u003C/script>\r\n \r\n \u003Cstyle>\r\n \u003C/style>\r\n\r\nAnd then in `@/plugins/components.ts`, I import the component as following:\r\n\r\n import Vue from \"vue\"\r\n import AppInput from \"@/components/Forms/AppInput.vue\"\r\n \r\n Vue.component(\"AppInput\", AppInput)\r\n\r\nWhen I compile the project with Nuxt, it throws me `export 'default' (imported as 'mod') was not found` error. Please help!\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9028\">#c9028\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2886],{"name":2887,"color":2888},"2.x","d4c5f9",5508,"closed","Nuxt export 'default' (imported as 'mod') was not found","2023-01-18T20:12:55Z","https://github.com/nuxt/nuxt/issues/5508",0.65300655,{"labels":2896,"number":2898,"owner":2863,"repository":2863,"state":2890,"title":2899,"updated_at":2900,"url":2901,"score":2902},[2897],{"name":2887,"color":2888},4134,"TS2314: Generic type 'ComponentOptions\u003CV>' requires 1 type argument(s).","2023-01-18T20:03:58Z","https://github.com/nuxt/nuxt/issues/4134",0.66581535,{"description":2904,"labels":2905,"number":2908,"owner":2863,"repository":2863,"state":2890,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### What problem does this feature solve?\n\nI'm trying to find a way to read `props` from every .vue component in the project and write the result to a JSON file.\n\nIt should happen server side so I've tried creating a custom nuxt command and a module. The problem with these is I can't actually import a component, it's just a syntax error because components are not just JS. Even after a `nuxt build` when the components are reduced to being just JS in the `.nuxt` folder I still couldn't figure out how to read the props from that mess. I spent a few days on google, reading other modules, nuxt documentation and source code but couldn't find a way to extract details about components.\n\nWhat does work is a plugin in server only mode. I can read and write files, import components, read the props. Basically everything I wanted. But now the issue is that it's a plugin and that's not what plugins are for. This script should only run once during build but a plugin will run on every page load.\n\nSo I'd like to see a generally good way of messing with components from a command line script.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9773\">#c9773\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2906,2907],{"name":2857,"color":2858},{"name":2887,"color":2888},6411,"Using components in modules","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6411",0.66887856,{"labels":2914,"number":2917,"owner":2863,"repository":2863,"state":2890,"title":2918,"updated_at":2910,"url":2919,"score":2920},[2915,2916],{"name":2857,"color":2858},{"name":2887,"color":2888},6517,"Add example on how to use with @vue/composition-api","https://github.com/nuxt/nuxt/issues/6517",0.6752901,{"description":2922,"labels":2923,"number":2933,"owner":2863,"repository":2863,"state":2890,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.18.1`\r\n- Nuxt Version: `3.3.2`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/niklv/nuxt-component-props-def-bug\n\n### Describe the bug\n\nFor my project config typing I need to refer to typing of component props.\r\nI try extract props typing in this way. But looks like there are no props typing at all.\r\n```vue\r\n\u003Cscript lang=\"ts\" setup>\r\n// ComponentA.vue\r\nconst {propA} = defineProps\u003C{\r\n propA: string\r\n}>()\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv v-text=\"propA\" />\r\n\u003C/template>\r\n\r\n```\r\n\r\n```ts\r\n// config.ts\r\nimport type {ComponentA} from \"#components\";\r\nimport {ComponentOptionsBase} from \"@vue/runtime-core\";\r\n\r\n\r\ntype ComponentProps\u003CT> = T extends ComponentOptionsBase\u003Cinfer P, // Props\r\n any, // RawBindings\r\n any, // D\r\n any, // C\r\n any, // M\r\n any, // Mixin\r\n any, // Extends\r\n any> ? unknown extends P ? {} : P : {};\r\n\r\n\r\ntype CompAProps = ComponentProps\u003Ctypeof ComponentA>\r\n\r\n\r\nconst someConfig:CompAProps = {\r\n // @ts-expect-error\r\n notExistedProp: true // should be error\r\n}\r\n```\n\n### Additional context\n\n\r\n\r\nThere are must be some props typing in first generic argument of `DefineComponent`\n\n### Logs\n\n_No response_",[2924,2927,2930],{"name":2925,"color":2926},"types","2875C3",{"name":2928,"color":2929},"3.x","29bc7f",{"name":2931,"color":2932},"upstream","E8A36D",20010,"Empty global components props typings","2023-10-22T09:01:34Z","https://github.com/nuxt/nuxt/issues/20010",0.6766678,{"labels":2939,"number":2942,"owner":2863,"repository":2863,"state":2890,"title":2943,"updated_at":2944,"url":2945,"score":2946},[2940,2941],{"name":2857,"color":2858},{"name":2887,"color":2888},8227,"Can we export nuxt project as web components ?","2023-02-14T11:31:45Z","https://github.com/nuxt/nuxt/issues/8227",0.67734367,{"description":2948,"labels":2949,"number":2954,"owner":2863,"repository":2863,"state":2890,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v18.14.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\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\r\n**VsCode 1.79.2**\r\n- vscode.typescript-language-features: disabled\r\n- Vue.volar: 1.8.3, enabled\r\n- Vue.vscode-typescript-vue-plugin: 1.8.3, enabled\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/niklas-may/nuxt-module-issue-reproduction\r\n\r\n### Describe the bug\r\n\r\n**Preface**\r\n_Thank you for your amazing work on Nuxt! I am not sure where this issue is best raised, Nuxt, VsCode or Vue. But due to the special typescript tooling with auto imports, I thought it's best to start here, and would be happy to hear if anybody observed a similar behaviour or has a solution._ \r\n\r\n**Description**\r\nWhen I open `~/.nuxt/components.d.ts` in VsCode and hover over an imported component, VsCode IntelliSense popover displays the correct types for this component.\r\nBut when I use the component in any other components template block, for example `~/app.vue`, the typing is missing the prop types.\r\n\r\n### Component and Type Definitions\r\n\r\n`~/../src/runtime/MyButton.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv style=\"border: 1px solid pink\">\r\n \u003Cslot />\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nwithDefaults(\r\n defineProps\u003C{\r\n variant: \"fill\" | \"ghost\";\r\n }>(),\r\n { variant: \"fill\" }\r\n);\r\n\u003C/script>\r\n```\r\n\r\n`~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\ndeclare module 'vue' {\r\n export interface GlobalComponents {\r\n //...\r\n 'MyButton': typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n //...\r\n }\r\n}\r\n\r\nexport const MyButton: typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n\r\nexport const componentNames: string[]\r\n```\r\n\r\n\r\n### Correct Intellisense\r\n\r\nVsCode popopver hovering `'MyButton'` in `~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\n(property) GlobalComponents['MyButton']: __VLS_WithTemplateSlots\u003CDefineComponent\u003C{\r\n variant: {\r\n type: PropType\u003C\"fill\" | \"ghost\">;\r\n required: true;\r\n default: string;\r\n };\r\n}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>, {\r\n ...;\r\n}>\r\n````\r\n\r\n### Wrong Intellisense\r\n\r\nVsCode popopver hovering `\u003CMyButton />` in the template block of `~/app.vue` (or any other template)\r\n\r\n```TypeScript\r\n(property) 'MyButton': DefineComponent\u003C{}, {}, any>\r\n```\r\n\r\n### Additional context\r\n\r\nThe above example is the current state of the reproduction repo. But a different, but similar behavior happened in other reports (for example a yarn workspace repo). Strange enough, sometimes, it works fine...\r\n\r\n### Logs\r\n\r\n_No response_",[2950,2951,2952,2953],{"name":2925,"color":2926},{"name":2928,"color":2929},{"name":2860,"color":2861},{"name":2931,"color":2932},21933,"Component appears to be untyped in template block","2023-12-12T14:36:22Z","https://github.com/nuxt/nuxt/issues/21933",0.6782462,{"labels":2960,"number":2963,"owner":2863,"repository":2863,"state":2890,"title":2964,"updated_at":2965,"url":2966,"score":2967},[2961,2962],{"name":2857,"color":2858},{"name":2928,"color":2929},12962,"Type Support for Global Components (e.g. `\u003Cnuxt-link>`)","2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12962",0.67962223,["Reactive",2969],{},["Set"],["ShallowReactive",2972],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frRNtS4HsMErgJTz8YgfpvvjQ22DJr2i43smy9y6DD70":-1},"/nuxt/ui/2891"]