\n\u003C/template>\n\n```\n\n**Minimal Reproduction**\nRepro created using Nuxt 3 + Nuxt UI 3 starter structure.\n\npackage.json:\n```json\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\",\n \"lint\": \"eslint .\",\n \"lint:fix\": \"eslint --fix .\"\n },\n \"dependencies\": {\n \"@iconify-json/lucide\": \"^1.2.44\",\n \"@iconify-json/simple-icons\": \"^1.2.35\",\n \"@nuxt/ui\": \"^3.1.1\",\n \"nuxt\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@nuxt/eslint\": \"^1.4.1\",\n \"eslint\": \"^9.27.0\",\n \"typescript\": \"^5.8.3\"\n }\n}\n```\n\nNotes\n\t•\tReproduces consistently in local dev.\n\t•\tDoes not reproduce on Codesandbox with the Nuxt UI 3 starter (possibly due to different runtime setup).\n\t•\tNo functional issues observed so far, but the warning pollutes the console.\n\t•\tThis warning has only recently started appearing in the console logs, despite no code changes to this component on our end — possibly introduced in a recent dependency update.\n",[2872,2875,2876],{"name":2873,"color":2874},"bug","d73a4a",{"name":2856,"color":2857},{"name":2859,"color":2860},4257,"[Vue warn] toRefs() expects a reactive object but received a plain one - \u003CUNavigationMenu />","2025-05-29T23:48:43Z","https://github.com/nuxt/ui/issues/4257",0.75470346,{"description":2883,"labels":2884,"number":2889,"owner":2862,"repository":2863,"state":2864,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Description\n\nHey! Thanks for trying to make nuxt/ui even more awesome.\n\nI've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states. \nI'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.\nI see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with \"v-if\" and switched on collapsed. \n\nIn some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?\nOnly a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.\nPlease point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge. \n\nofftop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.",[2885,2888],{"name":2886,"color":2887},"question","d876e3",{"name":2856,"color":2857},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.7632724,{"description":2895,"labels":2896,"number":2899,"owner":2862,"repository":2863,"state":2900,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Description\n\nI'm trying to apply styling to specific elements, this is my current code for initializing my NavigationMenu items:\n```js\nconst items = ref\u003CNavigationMenuItem[]>([\n [\n {\n label: \"Something\",\n icon: \"\",\n to: \"/\"\n }\n ],\n [\n {\n icon: \"i-simple-icons-discord\",\n to: \"https://discord.gg/....\"\n }\n ]\n ])\n```\n\nI am trying to apply styling using tailwind like you would via `:ui=\"\"` on the `UNavigationMenu` element but in this case I want to change `linkLeadingIcon` only for the discord element, and replace `list` entirely for the `Something` element. I've been scouring the docs and such and I haven't been able to really find a way to do this. As far as I can tell I can't do styling based on label/icon/etc using compound variants.\n\nI'm fairly new to Nuxt UI so might be missing a obvious solution, thanks!",[2897,2898],{"name":2886,"color":2887},{"name":2856,"color":2857},3683,"closed","NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.7292645,{"description":2906,"labels":2907,"number":2911,"owner":2862,"repository":2862,"state":2900,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.7.1\r\n- Builder: -\r\n- User Config: runtimeConfig, extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, nitro, i18n, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.0, @nuxt/fonts@0.7.1, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.0, @nuxtjs/i18n@8.5.0\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-u6tm1b?file=app.vue\n\n### Describe the bug\n\nWhen using a `v-model` prop with some initial object values (such as fetched already selected data from backend), the `\u003CUSelectMenu>` component doesn't show these as selected and seems to ignore them completely.\r\n\r\nEven when selecting the same objects again, it just seems to add them to the array and disregard anything, that was there previously.\n\n### Additional context\n\nThe behaviour changes when setting the `by` prop. In my case, I set it to `id`, after which I can see the object as selected, **but only** in the dropdown.\r\nThe button itself still shows `0 selected`.\n\n### Logs\n\n_No response_",[2908],{"name":2909,"color":2910},"pending triage","E99695",28733,"SelectMenu initial object values","2024-08-28T03:27:34Z","https://github.com/nuxt/nuxt/issues/28733",0.73932874,{"description":2917,"labels":2918,"number":2921,"owner":2862,"repository":2863,"state":2900,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### 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_",[2919,2920],{"name":2853,"color":2854},{"name":2859,"color":2860},2882,"USelectMenu: Manually trigger the search query","2025-05-10T17:19:44Z","https://github.com/nuxt/ui/issues/2882",0.7429935,{"description":2927,"labels":2928,"number":2934,"owner":2862,"repository":2863,"state":2900,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\n\nHello there\nCurrently, \u003CUSelect /> and \u003CUSelectMenu /> components render options within a fixed-height dropdown. It is complicated to deal with large datasets. When displaying large lists of options, this can lead to performance issues. Is it possible we can get something like VueUse infinite scroll?\n[https://vueuse.org/core/useinfinitescroll/#useinfinitescroll](url) ??\n\n### Additional context\n\n_No response_",[2929,2932,2933],{"name":2930,"color":2931},"duplicate","cfd3d7",{"name":2853,"color":2854},{"name":2856,"color":2857},4172,"Uselect and UselectMenu content infinite scroll","2025-05-23T13:55:50Z","https://github.com/nuxt/ui/issues/4172",0.7572842,{"description":2940,"labels":2941,"number":2944,"owner":2862,"repository":2863,"state":2900,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### 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_",[2942,2943],{"name":2853,"color":2854},{"name":2856,"color":2857},4157,"USelect base text display","2025-05-23T12:25:54Z","https://github.com/nuxt/ui/issues/4157",0.7580394,{"description":2950,"labels":2951,"number":2955,"owner":2862,"repository":2863,"state":2900,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Description\n\nIs there any chance we can get option to enable/disable collapsible when collapsed prop is true. v3.0.0-alpha.13 'fixed' NavigationMenu: disable collapsible with collapsed prop, i used nuxt ui since v3.0.0-alpha.12 and thought the collapsible when collapsed was feature.\n\n### Additional context\n\n_No response_",[2952,2953,2954],{"name":2853,"color":2854},{"name":2856,"color":2857},{"name":2859,"color":2860},3353,"NavigationMenu: Option to enable collapsible with collapsed prop","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3353",0.75862336,{"description":2961,"labels":2962,"number":2964,"owner":2862,"repository":2862,"state":2900,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Describe the feature\n\n1. 状态管理库如 Pinia 和 Vuex 都使用 “Store” 这一术语,更名为`useNuxtStore`可以保持术语的一致性,减少开发者的认知负担。\n2. useNuxtStore 更明确地表明这是一个用于全局状态管理的 hook,而 useState 可能被误解为仅用于局部组件状态\n3. 引入的第三方库时或者自己封装 hooks 时都更贴近 react hooks 的习惯,因此常命名为 useState, usePreviousState,useDerivedState 等等\n4. useState 是 nuxt框架提供的 hook,具有其专属性,不应该占用一般性命名。\n\n\n5. nuxt 提供了 clearNuxtState 用于清除 useState 创建的全局状态,两者命名不一致。建议将 clearNuxtState 改成 clearNuxtStore 与 useNuxtStore 命名保持一致\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2963],{"name":2909,"color":2910},30884,"建议 useState 重新命名为 useNuxtStore","2025-02-06T09:32:18Z","https://github.com/nuxt/nuxt/issues/30884",0.75886184,["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxtTP2iPJvdpG8X5IC3SRM7D7uGni2xvyDmXsHyW5pQc":-1},"/nuxt/ui/1057"]