\n```\n\nHowever, this does not work:\n```vue\n\u003CUFormField :label=\"`总额(${rowData?.marginAsset})`\" size=\"lg\" error />\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3086,3087],{"name":3020,"color":3021},{"name":3023,"color":3024},4496,"Boolean attribute not worked on `UFormField`","2025-07-10T10:04:09Z","https://github.com/nuxt/ui/issues/4496",0.7011369,{"description":3094,"labels":3095,"number":3099,"owner":3029,"repository":3029,"state":3078,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: future, compatibilityDate, devtools, srcDir, serverDir, dir\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-c3zbe4c6-cpg2sv8f\n\n### Describe the bug\n\nIntended Directory Structure:\n\n```\n.\n├── nuxt.config.ts\n└── src\n ├── app ✅ works\n │ ├── app.vue\n │ └── utils ✅ auto-import works\n │ └── app-utils.ts\n ├── public ✅ works\n │ └── public.txt\n ├── server ✅ works\n │ └── utils ✅ auto-import works\n │ └── server-utils.ts\n └── shared 🚫 auto-import fail\n └── shared-utils.ts\n```\n\nNuxt Config:\n\n```typescript\nexport default defineNuxtConfig({\n future: { compatibilityVersion: 4 },\n compatibilityDate: '2024-11-01',\n devtools: { enabled: true },\n\n srcDir: 'src/app',\n serverDir: 'src/server',\n dir: {\n public: 'src/public',\n shared: 'src/shared', // 🚫 this got ignored\n },\n});\n```\n\nThere is no viable workarounds (i.e. imports.dir works for `srcDir` but not `serverDir`), other than doing manual imports.\n\n### Additional context\n\nInspecting the generated types in .nuxt suggests `options.dir.shared` is ignored during auto-import.\n\nFrom reproduction\n\napp.vue\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cul>\n \u003Cli>Function from app/utils: {{ appUtilsFunction() }}\u003C/li>\n \u003Cli>\n Function from shared/utils: {{ catchWrapper(sharedUtilsFunction) }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst catchWrapper = (fn) => {\n try {\n return fn();\n } catch {\n return 'Unable to access this function';\n }\n};\n\u003C/script>\n```\n\nshows\n```\nFunction from app/utils: This works!\nFunction from shared/utils: Unable to access this function\n```\n\nroutes/server.js\n\n```javascript\nexport default defineEventHandler(() => {\n const outputFromServerUtils = serverUtilsFunction();\n\n let outputFromSharedUtils;\n try {\n outputFromSharedUtils = sharedUtilsFunction();\n } catch {}\n\n return {\n serverUtilsFunction: outputFromServerUtils,\n sharedUtilsFunction: outputFromSharedUtils ?? '',\n };\n});\n```\n\nshows\n\n```json\n{\n \"serverUtilsFunction\": \"This works!\",\n \"sharedUtilsFunction\": \"\"\n}\n```\n\n### Logs\n\n```shell-script\n\n```",[3096],{"name":3097,"color":3098},"pending triage","E99695",31082,"Nuxt config's `dir.shared` is ignored in auto-imports","2025-02-23T09:31:41Z","https://github.com/nuxt/nuxt/issues/31082",0.70834446,{"description":3105,"labels":3106,"number":3113,"owner":3029,"repository":3030,"state":3078,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Environment\n\n- Nuxt Vesrion: '3.15.1'\n- Nuxt/ui Version: '3.0.1'\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.1\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/pull/2251\n\n### Description\n\nThis issue was previously addressed and fixed in [PR #2251](https://github.com/nuxt/ui/pull/2251). However, after upgrading to Nuxt UI v3.0.1, the dir prop no longer exists, making it impossible to switch the direction of the Carousel.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3107,3108,3109,3110],{"name":3020,"color":3021},{"name":3074,"color":3075},{"name":3023,"color":3024},{"name":3111,"color":3112},"closed-by-bot","ededed",3705,"Missing \"dir\" Prop in Carousel Component After Nuxt UI v3.0.1 Update","2025-05-31T02:09:01Z","https://github.com/nuxt/ui/issues/3705",0.70878226,{"description":3119,"labels":3120,"number":3123,"owner":3029,"repository":3030,"state":3078,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3121,3122],{"name":3020,"color":3021},{"name":3023,"color":3024},4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.7142202,{"description":3129,"labels":3130,"number":3135,"owner":3029,"repository":3029,"state":3078,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### 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_",[3131,3134],{"name":3132,"color":3133},"3.x","29bc7f",{"name":3097,"color":3098},20522,"Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.7157392,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fciN4918nR-7V2ZWECv7qEzoXelLaNDFvKA_PvLaVi7Q":-1},"/nuxt/ui/4131"]