\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_",[3051,3052],{"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.7705968,{"description":3059,"labels":3060,"number":3064,"owner":3030,"repository":3031,"state":3065,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Description\n\nHello everybody,\n\nI'd love to see one feature:\n\nThe stepper can - at the moment - have a custom icon for each step. It would be super cool to allow each step to define it's own css class that is applied to the icon. This way, one could - for example - spin an icon to indicate that this step is currently worked on, while other steps do **not** spin, as they have not been started yet or have been finished already.\n\nSo maybe it would be possible like this:\n\n```\n return {\n title:'foo',\n description: 'bar',\n icon: 'i-lucide-refresh-cw',\n class: 'animate-spin'\n }\n```\n\n### Additional context\n\n_No response_",[3061,3062,3063],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4059,"closed","Stepper: Add class for each step's icon","2025-05-13T15:40:30Z","https://github.com/nuxt/ui/issues/4059",0.74482167,{"description":3071,"labels":3072,"number":3082,"owner":3030,"repository":3030,"state":3065,"title":3083,"updated_at":3084,"url":3085,"score":3086},"### Environment\n\nNuxt project info: nuxi 11:34:57\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: workspace:*\n- CLI Version: 3.25.0\n- Nitro Version: -\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\n\n\nAs you can see above, the sentence isn't grammatically sound. The sentence would make more sense to be read out as:\n- `and then unsets it in the same tick.`\n\ninstead of:\n- ` and then unsets it in same tick.` \n\n### Describe the bug\n\nNot necessarily a bug but simply grammar improvement for the docs. While reading through the docs to figure out an issue I have related to auto-imports, I came across this sentence and had to re-read it a couple of times as it sounded off.\n\n### Additional context\n\n\nThe issue I actually have is that auto-imports do not work for component props. In my case, I am using the `h` function as a prop on a wrapper component I built to pass in a custom icon to the `VTabs.prev-icon` and `VTabs.next-icon`.\n\n```typescript\n\u003Ctemplate>\n ...\n \u003CAppTabs\n v-model=\"activeTab\"\n :items=\"tabs\"\n :min-width=\"47\"\n :prev-icon=\"\n () => h(AppIcon, { size: 'xs', icon: ['far', 'chevron-left'] })\n \"\n :next-icon=\"\n () => h(AppIcon, { size: 'xs', icon: ['far', 'chevron-right'] })\n \"\n bg-color=\"lightsecondary\"\n align-tabs=\"center\"\n slim\n grow\n height=\"30\"\n size=\"x-small\"\n @update:model-value=\"handleTabChange\"\n />\n ...\n\u003C/template>\n\n\u003Cscript setup lang=\"ts>\nimport { h } from 'vue'\nimport AppIcon from '../../App/AppIcon.vue'\n\n...\n\u003C/script>\n``` \n\nWhenever you make use of `h` in the `\u003Cscript setup lang=\"ts\">` tag or use the `AppIcon` outside the component props in the DOM, then TS does not complain about the import. However if it is passed in as a prop, it complains that the functions do not exist. This is the exact scenario I am trying to find within the docs as to whether this is expected behaviour or not.\n\nBecause of this, I stumbled across this minor grammatical improvement.\n\n### Logs\n\n```shell-script\n\n```",[3073,3076,3079],{"name":3074,"color":3075},"documentation","5319e7",{"name":3077,"color":3078},"pending triage","E99695",{"name":3080,"color":3081},"needs reproduction","FBCA04",31951,"Grammar fix","2025-04-30T13:14:31Z","https://github.com/nuxt/nuxt/issues/31951",0.7488911,{"description":3088,"labels":3089,"number":3094,"owner":3030,"repository":3030,"state":3065,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### Versions\r\n\r\n- nuxt: v2.14.12 \r\n- node: v10.21.0\r\n\r\nhi; Thanks a lot for the build nuxtjs\r\nDifficulty creating props for testing\r\n\r\n### Steps to reproduce\r\n1-add props to v-flex tag (For example; add test-tag)\r\n`\u003Cv-flex test-tag=\"title\">\u003C/v-flex>`\r\n\r\n### What is Expected?\r\n`\u003Cdiv class=\"flex\" test-tag=\"title\">\u003C/div>`\r\n\r\n### What is actually happening?\r\n`\u003Cdiv class=\"flex test-tag\">\u003C/div>`\r\n",[3090,3091],{"name":3077,"color":3078},{"name":3092,"color":3093},"2.x","d4c5f9",8895,"v-flex props","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8895",0.7530748,{"description":3100,"labels":3101,"number":3105,"owner":3030,"repository":3031,"state":3065,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Description\n\nAs the title says, I think it would be nice to introduce a prop named `square` (like the one for the `Button` component) to be able to have a squared badge for those times where you have only the `icon` and not a label.\n\nCan I get this assigned? I would like to open a PR about this :)\n\n### Additional context\n\n_No response_",[3102,3103,3104],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4006,"[Badge] introduce prop `square`","2025-05-13T12:44:24Z","https://github.com/nuxt/ui/issues/4006",0.7590536,{"description":3111,"labels":3112,"number":3117,"owner":3030,"repository":3030,"state":3065,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.3.0`\r\n- Nuxt Version: `3.0.0-rc.8`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz?file=app.vue,.nuxt%2Ftsconfig.json\n\n### Describe the bug\n\nBy importing Components from the meta import `#components` typescript complains about it because it did not know it at all.\r\n\r\nA workaround is to add the following lines to the `nuxt.config.ts`\r\n\r\n```ts\r\ntypescript: {\r\n tsConfig: {\r\n compilerOptions: {\r\n paths: {\r\n '#components': [\r\n '.nuxt/components',\r\n ],\r\n },\r\n },\r\n },\r\n },\r\n```\r\n\r\nSo it would be great if nuxt would add this configuration by itself like for `#imports`\r\n\r\n\r\nAnother sidenote:\r\nIt would be really great if the `#components` thing would be documented on the website. I only figured out to import from that by searching through issues and PRs.\r\n\r\nThanks a lot!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3113,3116],{"name":3114,"color":3115},"3.x","29bc7f",{"name":3077,"color":3078},14661,"Add typescript path for #components meta import","2023-01-19T17:38:29Z","https://github.com/nuxt/nuxt/issues/14661",0.7593305,{"description":3123,"labels":3124,"number":3132,"owner":3030,"repository":3030,"state":3065,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### 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_",[3125,3128,3129],{"name":3126,"color":3127},"types","2875C3",{"name":3114,"color":3115},{"name":3130,"color":3131},"upstream","E8A36D",20010,"Empty global components props typings","2023-10-22T09:01:34Z","https://github.com/nuxt/nuxt/issues/20010",0.76154965,{"description":3138,"labels":3139,"number":3144,"owner":3030,"repository":3031,"state":3065,"title":3145,"updated_at":3146,"url":3147,"score":3148},"\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.",[3140,3143],{"name":3141,"color":3142},"bug","d73a4a",{"name":3024,"color":3025},4260,"Scoped slots are not typed","2025-06-02T09:08:41Z","https://github.com/nuxt/ui/issues/4260",0.7648961,["Reactive",3150],{},["Set"],["ShallowReactive",3153],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4nzKLT0cSPha7oU8KOesz8a1xAnX0ktSuXhnc9s0jZU":-1},"/nuxt/ui/4096"]