\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[3052,3055],{"name":3053,"color":3054},"enhancement","a2eeef",{"name":3042,"color":3043},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7430336,{"description":3062,"labels":3063,"number":3067,"owner":3027,"repository":3028,"state":3029,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: npm@11.5.1\n- Builder: -\n- User Config: devServer, runtimeConfig, experimental, devtools, ssr, components, modules, imports, shiki, css, ui, icon, compatibilityDate\n- Runtime Modules: @pinia/nuxt@0.11.2, @nuxt/ui@3.2.0, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, nuxt-shiki@0.3.1, @nuxt/icon@1.15.0, @nuxtjs/color-mode@3.5.2, @compodium/nuxt@0.1.0-beta.11\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.7\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/dropdown-menu (call any menu DropdownMenu from example)\nhttps://ui.nuxt.com/components/context-menu (call any menu ContexMenu from example)\n\n### Description\n\nWhen I call any UDropdownMenu or UContextMenu in my project, it causes the elements in the entire page template to shift and also removes the scrollbar from the page, which also causes the content to shift. This can also be checked on the documentation page. I made a screen recording.\n\nHere you can see how the icon in the left menu moves to select UI Pro, as well as scrolling this menu. And the main page scroll disappears.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3064,3065,3066],{"name":3038,"color":3039},{"name":3024,"color":3025},{"name":3042,"color":3043},4619,"UDropdownMenu, UContextMenu move elements on the page and remove page scroll","2025-07-28T15:39:43Z","https://github.com/nuxt/ui/issues/4619",0.7473725,{"description":3073,"labels":3074,"number":3078,"owner":3027,"repository":3028,"state":3029,"title":3079,"updated_at":3080,"url":3081,"score":3082},"### Version\n\nLatest commit https://pkg.pr.new/@nuxt/ui@62ab016\n\n### Description\n\nWhen fetching items using [ignore-filter prop ](https://ui.nuxt.com/components/select-menu#with-ignore-filter) `\u003CUSelectMenu>` does not remember the current selection.\n\nCurrently it works only if the selected item stays in the items array which is barely the case if dealing with more than 10 items:\n\nhttps://github.com/user-attachments/assets/f5c6b264-52a5-4d8b-b015-242e36d91fdb\n\nThis happens in two cases:\n\n1. When selecting an item the searchTerm gets resetted, the items-array changes and the selected item is no more in it -> Select menu label becomes empty\n2. When an item is selected, but searching for other items that dont include seleced item -> Select menu label becomes empty\n\n### Reproduction\n\nAlso reproducable in the docs:\nhttps://ui.nuxt.com/components/select-menu#with-ignore-filter\n\nhttps://github.com/user-attachments/assets/ec3065bb-7cc2-4976-9dde-da99dd2311b6\n\nHere case 1 never happens because the jsonplaceholder-api only has just 5 user-items so the selected user is always in the default empty search result. BUT case 2 happens: Select a user, open select again, type in any other name that doesnt include first user -> Select menu label becomes empty (weirdly tho, the avatar stays)",[3075,3076,3077],{"name":3038,"color":3039},{"name":3024,"color":3025},{"name":3042,"color":3043},4582,"SelectMenu with fetched items (ignore-filter) doesnt remember current selection","2025-07-23T17:27:36Z","https://github.com/nuxt/ui/issues/4582",0.75686514,{"description":3084,"labels":3085,"number":3089,"owner":3027,"repository":3028,"state":3029,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Description\n\nFor [SelectMenu](https://ui.nuxt.com/components/select-menu) seems to be no option to customize the label of the selected item, e.g. use multiple values to compose the label. Currently only one item value can be selected by prop `labelKey`, but it is not possible to use multiple values OR to even add custom html-code.\n\n**Example:**\n\n```ts\nconst items = [\n {\n id: 1,\n firstName: 'Max',\n lastName: 'Mustermann',\n },\n ...\n]\n```\n\nThe items to select can be fully customized, even with custom html code:\n\n```vue\n\u003Ctemplate #item-label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cdiv class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/div>\n\u003C/template>\n```\n\nBut when an item is selected, the selected item can only be one value:\n\n```vue\n\u003CUSelectMenu label-key=\"lastName\" />\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",[3086,3087,3088],{"name":3053,"color":3054},{"name":3024,"color":3025},{"name":3042,"color":3043},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.76251346,{"description":3095,"labels":3096,"number":3104,"owner":3027,"repository":3028,"state":3105,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Description\n\nIs there currently a way, or future support for overriding the trigger for the Accordion similar to how it worked in v2:\n\n> Example for v2\n\n```vue\n\u003Cu-accordion :items=\"items\" :ui=\"{ wrapper: 'flex flex-col w-full' }\">\n \u003Ctemplate #default=\"{ item, open }\">\n \u003Cu-button variant=\"ghost\" class=\"flex justify-between items-center font-semibold\">\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003Cdiv class=\"flex items-center space-x-2\">\n \u003Cu-icon\n name=\"i-heroicons-chevron-right-20-solid\"\n class=\"w-5 h-5 ms-auto transform transition-transform duration-200\"\n :class=\"[open && 'rotate-90']\"\n />\n \u003C/div>\n \u003C/u-button>\n \u003C/template>\n\n \u003Ctemplate #item=\"{ item }\">\n // Content\n \u003C/template>\n\u003C/u-accordion>\n```\n\nCurrently i don't see a way with the default slot to override the AccordionRoot trigger\n",[3097,3098,3099,3102],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3100,"color":3101},"closed-by-bot","ededed",{"name":3103,"color":3101},"stale",3455,"closed","Override Slot for Accordion Trigger","2025-06-18T09:01:47Z","https://github.com/nuxt/ui/issues/3455",0.74272984,{"description":3111,"labels":3112,"number":3115,"owner":3027,"repository":3028,"state":3105,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Environment\n\n```\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.1.39\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@https://pkg.pr.new/@nuxt/ui@1b3c919\n- Build Modules: -\n```\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3 latest commit\n\n### Description\n\nIn WebStorm interfaces cant be resolved as if they dont exist:\n\n\u003Cimg width=\"653\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/5d98f435-fc3d-4b9b-a83f-3f9e2380c12d\" />\n\nPossibly because types/index.d.ts exports vue files.\n\n\n### Additional context\n\nPossibly an issue with WebStorm because auto completion and type checking is working\n\n\u003Cimg width=\"492\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/ba1dce0a-4dd8-4a03-9dcb-b3e045e0b9d7\" />",[3113,3114],{"name":3038,"color":3039},{"name":3024,"color":3025},2947,"v3: Interfaces cant be resolved in WebStorm","2025-04-16T13:18:50Z","https://github.com/nuxt/ui/issues/2947",0.7483505,{"description":3121,"labels":3122,"number":3126,"owner":3027,"repository":3028,"state":3105,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v24.2.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: bun@1.2.17\n- Builder: -\n- User Config: future, experimental, css, modules, nitro, i18n, imports, runtimeConfig, icon, compatibilityDate\n- Runtime Modules: @nuxtjs/i18n@9.5.6, @nuxt/ui-pro@3.2.0, @nuxt/eslint@1.5.2, @nuxtjs/html-validator@2.1.0, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, @artmizu/nuxt-prometheus@2.5.0, @nuxtjs/seo@3.1.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\nThe issue is really straight-forward, example code: \n\n```vue\n\u003Cscript lang=\"ts\" setup>\nconst value = ref(\"\");\nconst items = [\"Item 1\", \"Item 2\", \"Item 3\"];\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"space-y-4\">\n \u003CUFormField label=\"USelectMenu\">\n \u003CUSelectMenu v-model=\"value\" placeholder=\"Placeholder\" :items />\n \u003C/UFormField>\n \u003CUFormField label=\"USelect\">\n \u003CUSelect v-model=\"value\" placeholder=\"Placeholder\" :items />\n \u003C/UFormField>\n \u003C/div>\n\u003C/template>\n\n```\n\n### Description\n\nIf the model-value is an empty string, the USelectMenu placeholder doesn't show. This behavior is different than the USelect component, where the placeholder is shown without having to use `undefined` as the v-model's value. \n\n### Additional context\n\nI know I could use `undefined` for the value here, however in my real code the v-model is bound to a non-optional value, so if I were to initialize it as `undefined`, TypeScript would freak out. Also, because these components are really similar, these behaviors shouldn't differ in my opinion. \n\n\u003Cimg width=\"200\" height=\"143\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/49a5d11d-2212-41d7-81b3-202692a20a8a\" />\n\n### Logs\n\n```shell-script\n\n```",[3123,3124,3125],{"name":3038,"color":3039},{"name":3024,"color":3025},{"name":3042,"color":3043},4528,"[SelectMenu]: Placeholder value not shown if v-model is an empty string","2025-07-16T10:43:41Z","https://github.com/nuxt/ui/issues/4528",0.74985135,{"description":3132,"labels":3133,"number":3142,"owner":3027,"repository":3028,"state":3105,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### Environment\n\nNuxt v3.1.0\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nNot sure how to share out an intertia/laravel app.\n\n### Description\n\nI was able to move forward with the Intertia JS improvements with Links, however... I'm trying to use the Header component and the toggle isn't working. I can see in the header.vue component that useRoute is being used, and it' causing the app to not open and close the menu correctly.\n\nI can see it opening for a flash, then closed. I tried doing something manually with watching for the update:open, but I can see this is not the solution... I immediately had issues closing and losing the link focus trap when the menu appears.\n\nI'm using Nuxt UI Pro v3.1.0 - I'm about to purchase a liceense so I can confirm this works with SSR enabled, but I'm blocked with this basic implemention.\n\n```\n \u003CUApp>\n \u003CUHeader mode=\"drawer\">\n \u003Ctemplate #title>\n \u003CApplicationLogo class=\"h-6 w-auto\" />\n \u003C/template>\n\n \u003CUNavigationMenu :items=\"items\" />\n\n \u003Ctemplate #right>\n \u003CUColorModeSelect />\n \u003C/template>\n\n \u003Ctemplate #body>\n \u003CUNavigationMenu :items=\"items\" orientation=\"vertical\" class=\"-mx-2.5\" />\n \u003C/template>\n \u003C/UHeader>\n\u003C/UApp>\n```\n\nI can see this will be a problem with more components...\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3134,3135,3136,3139],{"name":3038,"color":3039},{"name":3024,"color":3025},{"name":3137,"color":3138},"@nuxt/ui-pro","5BD3CB",{"name":3140,"color":3141},"inertia","b60205",3990,"Header toogle menu not working in an Intertia app (useRoute still being used)","2025-05-04T15:36:46Z","https://github.com/nuxt/ui/issues/3990",0.75017947,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJPn11BD9pbKVfuao2XWd_2GNZgUYsz_mYtuGV4ocnTA":-1},"/nuxt/ui/1803"]