\n\nIt can be worked around using `item-label` slot, but it would be nice if developer can use `items` props only to implement it for simpler way.\n\nBelow, I have tried to create it using Reka UI `combobox` component, the component used by SelectMenu.\n\n\u003Cimg width=\"329\" height=\"460\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e5cda771-3f8e-4369-bb3b-d5159f84d425\" />\n\n### Additional context\n\n_No response_",[3178,3179,3180],{"name":3159,"color":3160},{"name":3162,"color":3163},{"name":3165,"color":3166},4661,"SelectMenu: add description props to show text below title","2025-08-06T02:19:32Z","https://github.com/nuxt/ui/issues/4661",0.76450664,{"description":3187,"labels":3188,"number":3192,"owner":3168,"repository":3169,"state":3170,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Description\n\nHey 👋,\n\nRecently, you add variants, https://ui.nuxt.com/components/card#variant, to Card. Do you think that Modal could have the same?\n\n### Additional context\n\n_No response_",[3189,3190,3191],{"name":3159,"color":3160},{"name":3162,"color":3163},{"name":3165,"color":3166},4749,"Add variants to Modal component","2025-08-14T18:24:37Z","https://github.com/nuxt/ui/issues/4749",0.76546574,{"description":3198,"labels":3199,"number":3203,"owner":3168,"repository":3168,"state":3170,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Describe the feature\n\nIt would be great if Nuxt UI could provide a built-in, customizable **feature tour / onboarding guide** component. This would allow developers to guide users through key parts of an application with step-by-step tooltips and highlighted elements.\n\n**Motivation**\n\n* Helps improve user onboarding and product discovery.\n* Provides a consistent and reusable UI pattern for walkthroughs across Nuxt projects.\n* Currently, developers must rely on external libraries (e.g., Driver.js, Shepherd.js) or build a custom solution. A Nuxt UI-native solution would integrate seamlessly with existing components and theming.\n\n**Proposed Features**\n\n* Ability to define **steps** with `selector`, `title`, `description`, and `position`.\n* Configurable **highlight styles** (border, shadow, spotlight cut-out).\n* Built-in **navigation controls** (Next, Previous, Finish).\n* Option to scroll to target elements automatically.\n* Theming support with Nuxt UI tokens.\n* Accessibility support (keyboard navigation, ARIA roles).\n\n**Example API (pseudo-code)**\n\n```vue\n\u003CUTour :steps=\"steps\" v-model=\"active\" />\n\n\u003Cscript setup lang=\"ts\">\nconst steps = [\n { selector: '#step1', title: 'Welcome', description: 'This is the first step', position: 'bottom' },\n { selector: '#step2', title: 'Next Feature', description: 'Learn about this one too', position: 'right' }\n]\n\u003C/script>\n```\n\n**Alternatives Considered**\n\n* External libraries like Driver.js or Shepherd.js, but they don’t fit Nuxt UI’s design system and require additional integration effort.\n\n**Additional Context**\nThis would help Nuxt developers deliver a polished onboarding experience without reinventing the wheel.\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).",[3200],{"name":3201,"color":3202},"pending triage","E99695",33111,"Interactive Feature Tour Component","2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.7697001,{"description":3209,"labels":3210,"number":3214,"owner":3168,"repository":3169,"state":3215,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### 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_",[3211,3212,3213],{"name":3159,"color":3160},{"name":3162,"color":3163},{"name":3165,"color":3166},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":3221,"labels":3222,"number":3230,"owner":3168,"repository":3168,"state":3215,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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```",[3223,3226,3227],{"name":3224,"color":3225},"documentation","5319e7",{"name":3201,"color":3202},{"name":3228,"color":3229},"needs reproduction","FBCA04",31951,"Grammar fix","2025-04-30T13:14:31Z","https://github.com/nuxt/nuxt/issues/31951",0.7488911,{"description":3236,"labels":3237,"number":3242,"owner":3168,"repository":3168,"state":3215,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### 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",[3238,3239],{"name":3201,"color":3202},{"name":3240,"color":3241},"2.x","d4c5f9",8895,"v-flex props","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8895",0.7530748,{"description":3248,"labels":3249,"number":3253,"owner":3168,"repository":3169,"state":3215,"title":3254,"updated_at":3255,"url":3256,"score":3257},"### 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_",[3250,3251,3252],{"name":3159,"color":3160},{"name":3162,"color":3163},{"name":3165,"color":3166},4006,"[Badge] introduce prop `square`","2025-05-13T12:44:24Z","https://github.com/nuxt/ui/issues/4006",0.7590536,{"description":3259,"labels":3260,"number":3265,"owner":3168,"repository":3168,"state":3215,"title":3266,"updated_at":3267,"url":3268,"score":3269},"### 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_",[3261,3264],{"name":3262,"color":3263},"3.x","29bc7f",{"name":3201,"color":3202},14661,"Add typescript path for #components meta import","2023-01-19T17:38:29Z","https://github.com/nuxt/nuxt/issues/14661",0.7593305,{"description":3271,"labels":3272,"number":3280,"owner":3168,"repository":3168,"state":3215,"title":3281,"updated_at":3282,"url":3283,"score":3284},"### 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_",[3273,3276,3277],{"name":3274,"color":3275},"types","2875C3",{"name":3262,"color":3263},{"name":3278,"color":3279},"upstream","E8A36D",20010,"Empty global components props typings","2023-10-22T09:01:34Z","https://github.com/nuxt/nuxt/issues/20010",0.76154965,["Reactive",3286],{},["Set"],["ShallowReactive",3289],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4nzKLT0cSPha7oU8KOesz8a1xAnX0ktSuXhnc9s0jZU":-1},"/nuxt/ui/4096"]