\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_",[2867,2870],{"name":2868,"color":2869},"enhancement","a2eeef",{"name":2871,"color":2872},"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.7705968,{"description":2882,"labels":2883,"number":2889,"owner":2874,"repository":2875,"state":2890,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### 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_",[2884,2885,2888],{"name":2868,"color":2869},{"name":2886,"color":2887},"v3","49DCB8",{"name":2871,"color":2872},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":2896,"labels":2897,"number":2907,"owner":2874,"repository":2874,"state":2890,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### 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```",[2898,2901,2904],{"name":2899,"color":2900},"documentation","5319e7",{"name":2902,"color":2903},"pending triage","E99695",{"name":2905,"color":2906},"needs reproduction","FBCA04",31951,"Grammar fix","2025-04-30T13:14:31Z","https://github.com/nuxt/nuxt/issues/31951",0.7488911,{"description":2913,"labels":2914,"number":2919,"owner":2874,"repository":2874,"state":2890,"title":2920,"updated_at":2921,"url":2922,"score":2923},"### 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",[2915,2916],{"name":2902,"color":2903},{"name":2917,"color":2918},"2.x","d4c5f9",8895,"v-flex props","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8895",0.7530748,{"description":2925,"labels":2926,"number":2930,"owner":2874,"repository":2875,"state":2890,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### 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_",[2927,2928,2929],{"name":2868,"color":2869},{"name":2886,"color":2887},{"name":2871,"color":2872},4006,"[Badge] introduce prop `square`","2025-05-13T12:44:24Z","https://github.com/nuxt/ui/issues/4006",0.7590536,{"description":2936,"labels":2937,"number":2942,"owner":2874,"repository":2874,"state":2890,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### 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_",[2938,2941],{"name":2939,"color":2940},"3.x","29bc7f",{"name":2902,"color":2903},14661,"Add typescript path for #components meta import","2023-01-19T17:38:29Z","https://github.com/nuxt/nuxt/issues/14661",0.7593305,{"description":2948,"labels":2949,"number":2957,"owner":2874,"repository":2874,"state":2890,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### 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_",[2950,2953,2954],{"name":2951,"color":2952},"types","2875C3",{"name":2939,"color":2940},{"name":2955,"color":2956},"upstream","E8A36D",20010,"Empty global components props typings","2023-10-22T09:01:34Z","https://github.com/nuxt/nuxt/issues/20010",0.76154965,{"description":2963,"labels":2964,"number":2969,"owner":2874,"repository":2875,"state":2890,"title":2970,"updated_at":2971,"url":2972,"score":2973},"\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.",[2965,2968],{"name":2966,"color":2967},"bug","d73a4a",{"name":2886,"color":2887},4260,"Scoped slots are not typed","2025-06-02T09:08:41Z","https://github.com/nuxt/ui/issues/4260",0.7648961,{"description":2975,"labels":2976,"number":2984,"owner":2874,"repository":2875,"state":2890,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.8.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-efufxa?file=app.vue\n\n### Description\n\nCurrently, [the `items` prop in the carousel component is typed as `any`](https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue#L81):\r\n\r\nThe issue with typing `items` as `any` is that when using `v-slot=\"{ item }\"`, the `item` will always be typed as `any`. This can make for a poor developer experience, especially when working with more complex item structures, such as creating a carousel of offer cards.\r\n\r\nI believe we can improve this by utilizing [Vue's generics](https://vuejs.org/guide/typescript/overview#generic-components):\r\n\r\nWe could define the generic in the script:\r\n\r\n```html\r\n\u003Cscript lang=\"ts\" generic=\"Item\">\r\n```\r\n\r\nAnd then use the generic in the prop definition:\r\n\r\n```ts\r\nitems: {\r\n type: Array as PropType\u003CItem[]>,\r\n default: () => []\r\n},\r\n```\r\n\r\nIf this change makes sense, I’d be happy to help by submitting a PR.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2977,2978,2981,2983],{"name":2966,"color":2967},{"name":2979,"color":2980},"duplicate","cfd3d7",{"name":2982,"color":2872},"wontfix-v2",{"name":2886,"color":2887},2102,"Carousel - Improve `items` prop typing","2024-09-30T15:25:05Z","https://github.com/nuxt/ui/issues/2102",0.7666589,{"description":2990,"labels":2991,"number":2996,"owner":2874,"repository":2874,"state":2890,"title":2997,"updated_at":2998,"url":2999,"score":3000},"### Environment\r\n\r\nStackblitz\r\n\r\n### Reproduction\r\n\r\n1. Open https://stackblitz.com/edit/nuxtissues18855\r\n2. Run `npm run generate`\r\n3. See the error `str.replace is not a function`.\r\n\r\n\u003Cimg width=\"798\" alt=\"image\" src=\"https://user-images.githubusercontent.com/640208/223403460-ab3ebbc6-a555-4bad-ba50-a2c8b182caa1.png\">\r\n\r\n\r\n### Describe the bug\r\n\r\nWhen using a `.server.vue` component which uses a prop as tag via `\u003Ccomponent :is=\"\">`, pre-rendering via `nuxi generate` fails.\r\n\r\nExample component:\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nconst props = defineProps\u003C{\r\n tag: 'h1' | 'h2';\r\n}>();\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Ccomponent :is=\"tag\">Szia!\u003C/component>\r\n\u003C/template>\r\n```\r\n\r\n`nuxt.config.ts`\r\n\r\n```ts\r\nexport default defineNuxtConfig({\r\n experimental: {\r\n componentIslands: true,\r\n },\r\n nitro: {\r\n prerender: {\r\n routes: ['/'],\r\n },\r\n },\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_",[2992,2993,2994],{"name":2939,"color":2940},{"name":2966,"color":2967},{"name":2995,"color":2906},"🔨 p3-minor",18855,"Prerendering server component with `\u003Ccomponent :is=\"prop\">` fails","2023-03-22T17:12:03Z","https://github.com/nuxt/nuxt/issues/18855",0.7674127,["Reactive",3002],{},["Set"],["ShallowReactive",3005],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4nzKLT0cSPha7oU8KOesz8a1xAnX0ktSuXhnc9s0jZU":-1},"/nuxt/ui/4096"]