\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",[3018,3021,3024],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4581,"nuxt","ui","open","SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.80204356,{"description":3036,"labels":3037,"number":3040,"owner":3028,"repository":3029,"state":3041,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### 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_",[3038,3039],{"name":3019,"color":3020},{"name":3022,"color":3023},4157,"closed","USelect base text display","2025-05-23T12:25:54Z","https://github.com/nuxt/ui/issues/4157",0.7675641,{"description":3047,"labels":3048,"number":3052,"owner":3028,"repository":3029,"state":3041,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### Description\n\nHey guys,\nThanks to your great job :)\n\nI wanna know if has intention to add a Toggle Switch component in nuxt/ui\n\n\n\n\n\n\n### Additional context\n\n_No response_",[3049,3050,3051],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4451,"Toggle Switch","2025-07-03T01:48:56Z","https://github.com/nuxt/ui/issues/4451",0.7752518,{"description":3058,"labels":3059,"number":3063,"owner":3028,"repository":3028,"state":3041,"title":3064,"updated_at":3065,"url":3066,"score":3067},"\u003C!--\r\n🚨 IMPORTANT 🚨\r\n\r\nPlease use the following link to create a new issue:\r\n\r\n- 🚨 Bug report - https://bug.nuxtjs.org/ \r\n- 🙋 Feature request - https://feature.nuxtjs.org/ \r\n- ❗️ All other issues - https://cmty.nuxtjs.org/ \r\n\r\nIf your issue was not created using the app above, **it will be closed immediately**.\r\n-->\r\nnuxt如何支持ant-design-vue按需引入模块\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8306\">#c8306\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3060],{"name":3061,"color":3062},"2.x","d4c5f9",4550,"ant-design-vue按需引入模块","2023-01-18T20:06:18Z","https://github.com/nuxt/nuxt/issues/4550",0.787777,{"description":3069,"labels":3070,"number":3072,"owner":3028,"repository":3028,"state":3041,"title":3073,"updated_at":3074,"url":3075,"score":3076},"Where should I put `\u003C!--[if lt IE 9]>` label ?\r\n\r\n> \u003C!--[if lt IE 9]>\r\n> \u003Cscript src=\"http://cdn.staticfile.org/html5shiv/3.7.2/html5shiv.js\">\u003C/script>\r\n> \u003C![endif]-->\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1370\">#c1370\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3071],{"name":3061,"color":3062},1538,"Where should I put `\u003C!--[if lt IE 9]>` label ?","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1538",0.78808445,{"description":3078,"labels":3079,"number":3085,"owner":3028,"repository":3029,"state":3041,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Environment\n\n```\n- Operating System: `Linux`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.2`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.10.0`\n- Builder: `-`\n- User Config: `devtools`, `modules`, `css`, `future`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.1.1`, `@nuxt/eslint@1.3.1`\n- Build Modules: `-`\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\nSample code for fiddling:\n```vue\n\u003Ctemplate>\n \u003CUCard>\n \u003CUFormField>\n \u003CUCheckbox v-model=\"isRtl\" label=\"Right to Left\" />\n \u003C/UFormField>\n \n \u003Cdiv class=\"mt-4 space-y-4 space-x-4\">\n \u003CUFormField label=\"Dynamic Direction Select\">\n \u003CUSelect\n v-model=\"selected\"\n :items=\"items\"\n :dir=\"dir\"\n label=\"Dynamic Direction Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n \n \u003CUFormField label=\"Left to Right\">\n \u003CUSelect\n v-model=\"selected2\"\n :items=\"items\"\n dir=\"ltr\"\n label=\"LTR Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Right to Left\">\n \u003CUSelect\n v-model=\"selected3\"\n :items=\"items\"\n dir=\"rtl\"\n label=\"RTL Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n \u003C/div>\n \u003C/UCard>\n\u003C/template>\n\n\u003Cscript setup>\nconst isRtl = ref(false)\nconst selected = ref('')\nconst selected2 = ref('')\nconst selected3 = ref('')\n\nconst items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n]\n\nconst dir = computed(() => isRtl.value ? 'rtl' : 'ltr')\n\u003C/script>\n```\n\n### Description\n\nIt seems `USelect` component ignores the `dir` attribute. This make it inconsistence with the rest of UI components. This issue makes the UI look wierd when localized to RTL languages.\nBoth `\u003CUSelect dir=\"rtl\" ...>` and `\u003CUSelect dir=\"ltr\" ...>` component have `dir=\"ltr\"`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3080,3083,3084],{"name":3081,"color":3082},"bug","d73a4a",{"name":3022,"color":3023},{"name":3025,"color":3026},4131,"USelect ignores dir attribute","2025-05-13T14:10:12Z","https://github.com/nuxt/ui/issues/4131",0.7926501,{"description":3091,"labels":3092,"number":3094,"owner":3028,"repository":3028,"state":3041,"title":3095,"updated_at":3065,"url":3096,"score":3097},"\u003C!--\r\n🚨 IMPORTANT 🚨\r\n\r\nPlease use the following link to create a new issue:\r\n\r\n- 🚨 Bug report - https://bug.nuxtjs.org/ \r\n- 🙋 Feature request - https://feature.nuxtjs.org/ \r\n- ❗️ All other issues - https://cmty.nuxtjs.org/ \r\n\r\nIf your issue was not created using the app above, **it will be closed immediately**.\r\n-->\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8325\">#c8325\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3093],{"name":3061,"color":3062},4586,"a x y n c","https://github.com/nuxt/nuxt/issues/4586",0.7940852,{"description":3099,"labels":3100,"number":3107,"owner":3028,"repository":3028,"state":3041,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.4.1`\r\n- Nitro Version: `2.3.3`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `app`, `css`, `components`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\npage/[...id].vue\r\n\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ccomponent\r\n v-for=\"(item, key) in data\"\r\n :key=\"key\"\r\n :is=\"item.type\" \r\n \r\n v-bind=\"item\"\r\n\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n\r\n\r\n @update:payload=\"(value) => item.payload = value\"\r\n @update:form=\"(value) => item.form = value\"\r\n @update:restriction=\"(value) => item.restriction = value\"/>\r\n \r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n\r\n const route = useRoute()\r\n const runtimeConfig = useRuntimeConfig()\r\n const [path] = route.params.id.slice(-1)\r\n const { data } = reactive(await $fetch(`${runtimeConfig.public.BASE_URL}${runtimeConfig.public.SERVICE}/web/portal/${runtimeConfig.public.POI_NAME}/form/${path}`))\r\n \r\n\u003C/script>\r\n```\r\n\r\n\r\ncomponent/form.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"lgc-form-input-group\">\r\n \u003Cp v-if=\"label\" class=\"lgc-form-input-group__label\">{{ label }}\u003C/p>\r\n \u003Cdiv class=\"lgc-form-input-group__form\">\r\n \u003C!-- v-bind=\"!item.type.toLowerCase().includes('form') ? { data: item } : item\" -->\r\n \u003Ccomponent :attr=\"index\" v-for=\"(item, index) in data\" :key=\"index\" :is=\"item.type\" v-bind=\"item\" \r\n @update:isValid=\"item.isValid = $event\"\r\n @emit-value=\"constructPayload(item, $event)\"\r\n @emit-input-and-value=\"constructPayload($event.input, $event.payload)\"\r\n @add-error=\"errorManagement('add', $event)\"\r\n @remove-error=\"errorManagement('remove', $event)\"\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n >\u003C/component>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nconst emit = defineEmits(['emit-value','lgc-action'])\r\n\r\nconst props = defineProps({\r\n data: {\r\n type: Array,\r\n required: true\r\n },\r\n id: {\r\n type: String,\r\n required: false\r\n },\r\n label: {\r\n type: String,\r\n required: false\r\n },\r\n value: {\r\n type: Object,\r\n required: false,\r\n default() {\r\n return {}\r\n }\r\n },\r\n uuid: {\r\n type: String,\r\n required: false,\r\n default() {\r\n return uuidv4()\r\n }\r\n }\r\n })\r\n\r\n\r\n const inputValue= reactive(props.value ? props.value : {})\r\n\r\n function constructPayload(input, payload) {\r\n inputValue[input.id] = payload\r\n }\r\n\r\n function errorManagement(action, error) {\r\n let component = props.data.find(el => el.type === 'lgc-form-error');\r\n if (component) {\r\n let already = component.errors.find(el => el.key === error.key && el.byClient)\r\n let index = component.errors.indexOf(already)\r\n switch (action) {\r\n case 'add':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n if (error.value) component.errors.push(error)\r\n }\r\n break;\r\n case 'remove':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n } else {\r\n emit(`${action}-error`, error)\r\n }\r\n }\r\n\r\n async function submit() {\r\n emit('emit-value', inputValue)\r\n }\r\n\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\nThe problem occurred when switching from nuxt2 to nuxt3.\r\nthis is a problem with the display order of compose with the `\u003Ccomponent :is=\"\" v-for=\"\" :key=\"\">` tag, in all that I find as documentation, it tells me offers 2 solutions:\r\n- make a sort function but even then, it doesn't work\r\n- that it is an asynchronous problem and must be made synchronous. Off, nuxt3 with \u003Cscript setup> makes compose directly asynchronous. It would then possibly be a \"bug\" linked to the frame work.\r\n\r\nafterwards, I haven't seen any documentation on the problem caused here: depending on the index, the order changes.\r\nIn addition to the tests you had done, I tried to put a uuid in key, the whole display is reversed.\r\nwithout key, it's good\r\nthe index, gives the current problem\r\na fixed key or just the item gives an even different display.\r\nregarding the key, ideally, the uuid should be in the object since using the index seems to be a bad practice\r\n \r\n The problem occurs in the compose form\r\n \r\n result nuxt 2 & nuxt3 no :key\r\n\u003Cimg width=\"701\" alt=\"Capture d’écran 2023-04-26 à 10 51 51\" src=\"https://user-images.githubusercontent.com/98752049/234523209-431b7cfc-d0c0-4397-a82d-d6120635a12a.png\">\r\n\r\nresult nuxt 3 whit :key=\"index\"\r\n\u003Cimg width=\"675\" alt=\"Capture d’écran 2023-04-26 à 10 55 16\" src=\"https://user-images.githubusercontent.com/98752049/234524004-76a98dde-1312-4266-9455-d9f28c1c521d.png\">\r\n\r\nresult nuxt3 whit :key=\"uuidv4()\"\r\n\u003Cimg width=\"678\" alt=\"Capture d’écran 2023-04-26 à 10 57 25\" src=\"https://user-images.githubusercontent.com/98752049/234524648-d85ae34d-70b5-4f58-a23d-005e8afd829a.png\">\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_",[3101,3104],{"name":3102,"color":3103},"3.x","29bc7f",{"name":3105,"color":3106},"pending triage","E99695",20522,"Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.79453343,{"description":3113,"labels":3114,"number":3120,"owner":3028,"repository":3029,"state":3041,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.11.1`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `modules`, `css`, `app`, `runtimeConfig`, `i18n`, `icon`, `devServer`, `colorMode`, `compatibilityDate`, `future`, `typescript`, `vite`\n- Runtime Modules: `@nuxt/ui@3.0.1`, `@pinia/nuxt@0.5.5`, `@nuxt/eslint@0.5.7`, `@nuxtjs/i18n@9.5.5`, `@nuxtjs/device@3.2.4`, `@nuxt/image@1.10.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using `USwitch` inside `UTooltip` switch toggle just disappears. You can check reproduction link.\n```vue\n\u003CUTooltip text=\"Just a tooltip\">\n \u003CUSwitch label=\"Just a switch\" />\n\u003C/UTooltip>\n```\n\n\u003Cimg width=\"127\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/5dbcfef5-a4c4-4ec4-b2f3-611212f75c68\" />\n\n### Additional context\n\nWrapping `USwitch` to `div` for example solves issue\n```vue\n \u003CUTooltip text=\"Just a tooltip\">\n \u003Cdiv>\n \u003CUSwitch label=\"'Hackish'\" />\n \u003C/div>\n \u003C/UTooltip>\n```\n\n### Logs\n\n```shell-script\n\n```",[3115,3116,3119],{"name":3081,"color":3082},{"name":3117,"color":3118},"duplicate","cfd3d7",{"name":3022,"color":3023},4333,"USwitch not working inside UTooltip","2025-06-12T13:42:09Z","https://github.com/nuxt/ui/issues/4333",0.7957581,{"description":3126,"labels":3127,"number":3131,"owner":3028,"repository":3029,"state":3041,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.26.2 \n- Nitro Version: 2.12.3 \n- Package Manager: npm@11.2.0 \n- Builder: - \n- User Config: compatibilityDate, ssr, routeRules, experimental, modules, alias, imports, runtimeConfig, css, app, nodemailer, auth, headlessui, eslint, nitro, image, ui, fonts, icon, pinia, sitemap, colorMode, $production,\n $development, i18n, vite \n- Runtime Modules: nuxt-security@2.2.0, @nuxtjs/color-mode@3.5.2, @nuxt/ui-pro@3.2.0, @nuxtjs/sitemap@7.4.3, @nuxtjs/i18n@9.5.6, @nuxtjs/robots@5.4.0, @nuxt/devtools@2.6.2, @pinia/nuxt@0.9.0, @nuxtjs/fontaine@0.4.4, @nuxt/scrip\nts@0.10.5, @vueuse/nuxt@12.8.2, nuxt-mongoose@1.0.6, @sidebase/nuxt-auth@0.10.1, @nuxt/icon@1.15.0, @nuxt/fonts@0.10.3, nuxt-headlessui@1.2.0, nuxt-nodemailer@1.1.2, @nuxt/test-utils/module@3.19.2, @nuxtjs/leaflet@1.2.6, @nuxtjs/tailwindcss@7.0.0-beta.0, @nuxt/image@1.10.0 \n- Build Modules: - \n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/unruffled-frog-pz7l74\n\n### Description\n\nHi,\nWhen using the UDashboardSidebar component from @nuxt/ui-pro in a layout with RTL (right-to-left) direction, the sidebar resizing behavior is incorrect.\n\nWhen dragging the resizer handle:\n\n Moving the mouse to the right expands (makes wider) the sidebar (but it should shrink in RTL).\n\n Moving the mouse to the left shrinks (makes narrower) the sidebar (but it should expand in RTL).\n\n\nExpected Behavior:\n\nIn RTL mode:\n\n Dragging right should decrease sidebar width.\n\n Dragging left should increase sidebar width.\n\nThis should match the natural directionality of RTL layouts.\n\n\nPrevious report:\n\nThis issue was previously reported in [#4293](https://github.com/nuxt/ui/issues/4293), but it still persists.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3128,3129,3130],{"name":3081,"color":3082},{"name":3022,"color":3023},{"name":3025,"color":3026},4547,"UDashboardSidebar resize direction is inverted in RTL mode","2025-07-21T08:42:26Z","https://github.com/nuxt/ui/issues/4547",0.797628,["Reactive",3137],{},["Set"],["ShallowReactive",3140],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwiCfdUST0HbTFlDCsGehMMUIy3ekq5Ja7hl6Hxj7toA":-1},"/nuxt/ui/3385"]