\n```\n\n**Possible solutions:**\n\n1. Make a new label prop that accepts a function, so values can be compound:\n\n```ts\n\u003CUSelectMenu :label=\"(item) => item.firstName + ' ' + item.lastName\"\n```\n\n2. Optionally make a slot to customize the labels: \n```vue\n\u003CUSelectMenu>\n \u003Ctemplate #label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cspan class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/span>\n \u003C/template>\n\u003C/USelectMenu>\n```\n\nP.S. the prop `labelKey` is not documented https://ui.nuxt.com/components/select-menu#props\n",[3051,3052,3053],{"name":3040,"color":3041},{"name":3023,"color":3024},{"name":3026,"color":3027},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.73906577,{"description":3060,"labels":3061,"number":3065,"owner":3029,"repository":3030,"state":3031,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.1\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, future, devtools, app, runtimeConfig, hooks, components, modules, eslint, ui, css, telemetry\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui@3.1.1, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\n1. Add a `USelect` component to a page with any example from the official doc: https://ui.nuxt.com/components/select\n2. Start dev mode: `npm run dev`\n3. Opens the page and try interact with the select element with **Vue dev tool opened**\n\n### Description\n\nThe `USelect` component responds really slow upon user clicks (20+ seconds to open/close for a select with 100+ items), this also applies to some other components such as `UDropdownMenu` and `USelectMenu`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3062,3063,3064],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4142,"USelect and USelectMenu responds really slow when Vue devtool is opened","2025-05-13T13:28:11Z","https://github.com/nuxt/ui/issues/4142",0.74113053,{"description":3071,"labels":3072,"number":3076,"owner":3029,"repository":3030,"state":3031,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3073,3074,3075],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3738,"Incorrect compound button variants types","2025-03-30T14:32:49Z","https://github.com/nuxt/ui/issues/3738",0.74420315,{"description":3082,"labels":3083,"number":3091,"owner":3029,"repository":3030,"state":3092,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi I would like to have within the component UselectMenu emit the event \"scroll\" \nwith the following properties: \n```\n{\n target: HTMLElement, \n currentTarget: HTMLElement, \n scrollTop: number,\n scrollHeight: number, \n clientHeight: number, \n}\n```\n\n to dynamically remote search items through an api and append it dynamically to my USelectMenu to create an infinite scroll. \n\nThis feature would be great in both version :)\n\n### Additional context\n\n_No response_",[3084,3085,3086,3089],{"name":3040,"color":3041},{"name":3026,"color":3027},{"name":3087,"color":3088},"closed-by-bot","ededed",{"name":3090,"color":3088},"stale",2793,"closed","add an emit \"scroll\" event for USelectMenu","2025-06-18T09:05:29Z","https://github.com/nuxt/ui/issues/2793",0.6564407,{"description":3098,"labels":3099,"number":3104,"owner":3029,"repository":3030,"state":3092,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### Description\n\nIt is possible add an slot named `option-append` which will be after the menu content?\r\nFor example it will be useful to add an intersection observer when creating an infinite scroll select.\n\n### Additional context\n\n_No response_",[3100,3101,3103],{"name":3040,"color":3041},{"name":3102,"color":3027},"wontfix-v2",{"name":3023,"color":3024},1167,"`USelectMenu` option-append","2025-05-23T15:24:34Z","https://github.com/nuxt/ui/issues/1167",0.68302655,{"description":3110,"labels":3111,"number":3115,"owner":3029,"repository":3030,"state":3092,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Description\n\nI’m using the USelectMenu component from Nuxt UI and have encountered performance issues when dealing with large datasets. I have a dataset of approximately 900 items, and when displaying all of them in the SelectMenu, it slows down significantly or even freezes slightly during interactions.\n\nTo optimize the performance, I would like to implement pagination with lazy loading. Here’s what I aim to achieve:\n\t•\tInitially display the first 25 items.\n\t•\tAs I scroll to the bottom of the dropdown, load the next 25 items dynamically (incrementally).\n\nIs there a built-in way to achieve this in SelectMenu, or would you recommend a specific approach (e.g., using a custom scroll listener or integrating infinite scrolling)? Any guidance or examples would be greatly appreciated!",[3112],{"name":3113,"color":3114},"question","d876e3",2744,"How to Implement Pagination in SelectMenu for Large Datasets?","2025-06-12T15:29:36Z","https://github.com/nuxt/ui/issues/2744",0.6927242,{"description":3121,"labels":3122,"number":3125,"owner":3029,"repository":3126,"state":3092,"title":3127,"updated_at":3128,"url":3129,"score":3130},"**General**\n- [x] On both logo sliders, it shouldn't move while mouse over\n- [ ] Slide-in apparitions on scroll for images & texts in sections\n\n- [x] pb-10 is enough spacing between title of section & content\n- [x] I don't know if it's intended but every bold text in sections is \"Focus on the big picture\"\n\n**Hero**\n\n- [ ] Description should be => line-height: 170%\n\n- [x] [Lightmode] Gem aspect should be better\n- [x] @R-mooon => Increase mesh subdivision in blender in order to make gem angles even smoother + try compress hdr even more \n- [ ] [Mobile] @R-mooon will make a specific design [Edit : @Flosciante => see comments]\n\n**Sections**\n\n- [ ] [Darkmode] Description text should be one gray lighter\n\n**Framework**\n- [x] Play icon is missing over the video\n- [ ] [Darkmode] Overlay is too bright when modal is open\n\n**Projects**\n\n- [x] Cursor should be at end of content\n\n- [ ] Is it possible to make the animation in revert also ? I mean make \"droe\" & \"atinux\" deleting the content in order to make the animation infinite\n\n\n- [ ] [Darkmode] \"Read more\" on the card is too light \n\n**Community**\n\n- [x] See the nuxters have to look like the links in sections\n\n**Partners**\n\n- [ ] @R-mooon needs to rework some partners logo to make them display well\n\n**Newsletter**\n\n- [x] Less margin-top & more margin-bottom (should have nearly the same space up & down)\n\n- [ ] Update background gradient [Edit : Flo is gonna make a mouse interaction instead]\n\n**Suggestions**\n\n- [ ] Make this \"My account\" button follow content width (and the actual width being the max-w)\n- [ ] Why not making account name white and have a background color on hover, at the moment i find the right part of header very grey-ish, i feel like the name is disabled\n\n\n- [x] Try make logo banner fit inside container to see if it looks more consistent [Edit : Cancelled, tested and it looks worse than before]\n\n",[3123],{"name":3040,"color":3124},"1ad6ff",712,"nuxt.com","[Home] Design feedbacks","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/712",0.6980822,{"description":3132,"labels":3133,"number":3136,"owner":3029,"repository":3030,"state":3092,"title":3137,"updated_at":3138,"url":3139,"score":3140},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nCurrently, we are unable to manually trigger the searchable method. Lets assume i have one `USelectMenu` component that list all `Parent` object and a second `USelectMenu` that list all `Children` of the selected `Parent`. Currently, when the `USelectMenu` component i mounted, the search query is executed even if the parent object is not yet selected.\n\nIt would me very useful to be able to manually trigger the search query method to populate the `USelectMenu` options.\n\nIs there any alternative to do it using the current behavior ? Maybe using a `ref` or something ?\n\n### Additional context\n\n_No response_",[3134,3135],{"name":3040,"color":3041},{"name":3026,"color":3027},2882,"USelectMenu: Manually trigger the search query","2025-05-10T17:19:44Z","https://github.com/nuxt/ui/issues/2882",0.7184643,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fK8pXLzZWmJhUxB7eqOiIKAMMeBPW-_SU4tcFD2bNuIg":-1},"/nuxt/ui/4172"]