\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",[3040,3041,3042],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.7808871,{"description":3049,"labels":3050,"number":3053,"owner":3030,"repository":3054,"state":3055,"title":3056,"updated_at":3057,"url":3058,"score":3059},"- [ ] `CMD + .` to expand\n- [ ] `Escape` to reduce when expanded",[3051],{"name":3021,"color":3052},"1ad6ff",658,"nuxt.com","closed","[Project] Add shortcuts for preview modal","2023-02-15T12:32:42Z","https://github.com/nuxt/nuxt.com/issues/658",0.60420775,{"description":3061,"labels":3062,"number":3053,"owner":3030,"repository":3069,"state":3055,"title":3070,"updated_at":3071,"url":3072,"score":3059},"### Environment\r\n\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-ctgbhq?file=src%2Ftests%2Findex.test.ts\r\n\r\n### Describe the bug\r\n\r\nHi! After migration from nuxt-vitest to this repo, we founded that all imports mocks were broken. \r\nWe used this [example](https://github.com/danielroe/nuxt-vitest#mocknuxtimport) and it worked perfectly in nuxt-vitest and previous versions. \r\n\r\nThe problem is that the mock works correctly inside the test, but it doesn't seem to apply inside the function. useRoute().params is defined inside the test, but in function - undefined. \r\n\r\n```\r\ntest('get params', () => {\r\n expect(useFoo()).toBeFalsy(); //correct\r\n const params = {\r\n id: '11312424',\r\n };\r\n useRouteMock.mockImplementation(() => {\r\n return { query: {}, path: '/', params };\r\n });\r\n\r\n //here useRoute().params - object (!) \r\n\r\n expect(useFoo()).not.toBeFalsy(); //here useRoute().params - undefined and result for test - false \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_",[3063,3066],{"name":3064,"color":3065},"vitest-environment","b60205",{"name":3067,"color":3068},"pending triage","5D08F5","test-utils","After upgrading to new version imports mocks broke","2024-01-28T11:28:53Z","https://github.com/nuxt/test-utils/issues/658",{"description":3074,"labels":3075,"number":3080,"owner":3030,"repository":3031,"state":3055,"title":3081,"updated_at":3082,"url":3083,"score":3084},"### Description\n\nHey there!\n\nI am currently doing migration of https://www.nuxt-commerce.dev/ from Nuxt UI 2->3 (it was so good experience - kudos to you!).\n\nI finished migrating almost everything apart from one thing - the Select component that has Nuxt Links inside. Basically the NuxtLink does not seem to work - the page is not changing after clicking (while the selected value is correctly updated to the clicked one. Do you know what could be the issue?\n\nThe code I use looks like this:\n\n```html\n\u003Ctemplate>\n \u003CUSelect\n v-model=\"selected\"\n value-key=\"value\"\n :items=\"selectOptions\"\n >\n {{ selected }}\n \u003Ctemplate #item=\"{ item }\">\n \u003CNuxtLink\n :to=\"`/collection/${item?.to}`\"\n >\n \u003Cp>{{ item?.value }}\u003C/p>\n \u003C/NuxtLink>\n \u003C/template>\n \u003C/USelect>\n\u003C/template>\n\n\n\u003Cscript setup lang=\"ts\">\nconst selectOptions = computed(() => {\n return props.collections?.edges.map(({ node }) => ({\n value: node.title,\n to: node.handle,\n }))\n})\n\nconst selected = ref(\n selectOptions.value?.find(\n option => route.params.handle && option.to === route.params.handle[0],\n )?.value,\n)\n\u003C/script>\n```",[3076,3079],{"name":3077,"color":3078},"question","d876e3",{"name":3024,"color":3025},3443,"Does Select work with NuxtLink/UI Link?","2025-03-04T09:18:16Z","https://github.com/nuxt/ui/issues/3443",0.71202075,{"description":3086,"labels":3087,"number":3090,"owner":3030,"repository":3031,"state":3055,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### Description\n\nUSelect displays the label of the selected value. It might be interesting to add a slot to display another key when item is an object instead of the chosen label for some use case.\n\nMy own use case is picking the language :\n\n```\nconst items = [\n { value: 'en', label: 'English' },\n { value: 'fr', label: 'Français' },\n (...)\n]\n```\n\nMy open selection would display flags and labels, but once selected, the component would only display the value ('en' or 'fr' or ...). Could be the icon as well.\n\nProposal :\n\nselectLabelKey : When items is an array of objects, select the field to use as the label for the picked value on the base component (instead of labelKey)\n\n### Additional context\n\n_No response_",[3088,3089],{"name":3021,"color":3022},{"name":3024,"color":3025},4157,"USelect base text display","2025-05-23T12:25:54Z","https://github.com/nuxt/ui/issues/4157",0.74809456,{"description":3096,"labels":3097,"number":3100,"owner":3030,"repository":3031,"state":3055,"title":3101,"updated_at":3102,"url":3103,"score":3104},"### Description\n\nMy app uses a LOT of filters, and with UI v2, I had these:\n\n```\n\u003CUSelect :items=\"items\" placeholder=\"Filter by tags\" v-model=\"tagFilter\" />\n\n// filter by tags\nconst items = [\n {\n label: \"Show all tags\",\n value: \"\"\n },\n {\n label: \"Only Red Tags\",\n value: \"red\"\n },\n {\n label: \"Only Green Tags\",\n value: \"green\"\n }\n]\n\nconst tagFilter = ref(null)\n```\n\nbut in v3 I now get this error:\n\n> Error: A \u003CSelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.\n\nHow would I add this option in?",[3098,3099],{"name":3077,"color":3078},{"name":3024,"color":3025},3647,"How do I use an empty string with a USelect value?","2025-03-21T21:54:20Z","https://github.com/nuxt/ui/issues/3647",0.7639989,{"description":3106,"labels":3107,"number":3111,"owner":3030,"repository":3054,"state":3055,"title":3112,"updated_at":3113,"url":3114,"score":3115},"\n\n",[3108],{"name":3109,"color":3110},"bug","ff281a",1053,"[Support] Expert mail adress don't seems to work","2022-12-07T09:24:07Z","https://github.com/nuxt/nuxt.com/issues/1053",0.77760285,{"description":3117,"labels":3118,"number":3121,"owner":3030,"repository":3030,"state":3055,"title":3122,"updated_at":3123,"url":3124,"score":3125},"### Describe the feature\r\n\r\nSometimes we want to create multiple utilities in nuxt js and with that we have to repeat a lot of composables or any other nuxt context!\r\n\r\nfor example:\r\ntwo utils: currencyFormatter(...) and decimal(...)\r\n\r\n```TYPESCRIPT\r\nexport const currencyFormatter = (currencyNew, options) => {\r\n const config = useRuntimeConfig()\r\n const mainStore = useMainStore()\r\n // ... multiple context nuxt (composables, stores)\r\n \r\n const currency = mainStore.store.currency_code || config.public.currency\r\n const currencyLocale = mainStore.store.currency_lang_code || config.public.currencyLocale\r\n\r\n return new Intl.NumberFormat(currencyLocale, { style: 'currency', currency: currencyNew || currency, minimumFractionDigits: options?.digits ?? 2, currencyDisplay: 'narrowSymbol' })\r\n}\r\n\r\nexport const decimal = (val, digits = 2) => {\r\n const config = useRuntimeConfig()\r\n const mainStore = useMainStore()\r\n // ... multiple context nuxt (composables, stores)\r\n\r\n const numberLocale = mainStore.store.numeric_lang_code || config.public.currencyLocale\r\n\r\n return new Intl.NumberFormat(numberLocale, { minimumFractionDigits: digits }).format(val)\r\n}\r\n````\r\n\r\nThere could be a new feature to facilitate the creation of new utilities, for example:\r\n```TYPESCRIPT\r\nexport default defineNuxtUtil(() => {\r\n const config = useRuntimeConfig()\r\n const mainStore = useMainStore()\r\n // ... multiple context nuxt (composables, stores)\r\n \r\n const currency = mainStore.store.currency_code || config.public.currency\r\n const currencyLocale = mainStore.store.currency_lang_code || config.public.currencyLocale\r\n const numberLocale = mainStore.store.numeric_lang_code || config.public.currencyLocale\r\n\r\n const currencyFormatter = (currencyNew, options) => new Intl.NumberFormat(currencyLocale, { style: 'currency', currency: currencyNew || currency, minimumFractionDigits: options?.digits ?? 2, currencyDisplay: 'narrowSymbol' })\r\n const decimal = (val, digits = 2) => new Intl.NumberFormat(numberLocale, { minimumFractionDigits: digits }).format(val)\r\n // ... multiples utils\r\n \r\n return {\r\n currencyFormatter, // create new util. currencyFormatter(...)\r\n decimal// create new util. decimal(...)\r\n }\r\n})\r\n```\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3119],{"name":3067,"color":3120},"E99695",27988,"feat: create new method to utils","2024-07-05T18:13:31Z","https://github.com/nuxt/nuxt/issues/27988",0.7832704,{"description":3127,"labels":3128,"number":3130,"owner":3030,"repository":3054,"state":3055,"title":3131,"updated_at":3132,"url":3133,"score":3134},"",[3129],{"name":3109,"color":3110},670,"[Project] Branches and files modals should close on `esc` like other modals","2023-02-15T12:32:43Z","https://github.com/nuxt/nuxt.com/issues/670",0.7842969,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9hxqeve-8grjeCk3q1dU6UhEmg3ZS6FlTEYOfgz4-vI":-1},"/nuxt/nuxt.com/657"]