\n \u003Cspan>{{ item.label }}\u003C/span>\n \u003C/span>\n \u003C/ULink>\n \u003C/template>\n \u003C/UNavigationMenu>\n \u003C/nav>\n \u003C/header>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, watch, onMounted } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport type { NavigationMenuItem } from \"@nuxt/ui\";\n\nconst route = useRoute();\nconst activeSection = ref(\"\");\n\n// Define your nav data (to = hash without leading '#')\nconst navItems = ref\u003CNavigationMenuItem[]>([\n { label: \"Home\", icon: \"i-lucide-home\", value: \"\", to: \"\" },\n {\n label: \"About Us\",\n icon: \"i-lucide-user-circle\",\n value: \"about\",\n to: \"about\",\n },\n {\n label: \"Products\",\n icon: \"i-lucide-package\",\n value: \"products\",\n to: \"products\",\n },\n {\n label: \"Technologies\",\n icon: \"i-lucide-cpu\",\n value: \"technologies\",\n to: \"technologies\",\n },\n {\n label: \"News\",\n icon: \"i-lucide-newspaper\",\n value: \"news\",\n to: \"news\",\n },\n]);\n\n// On load, seed activeSection from the current hash\nonMounted(() => {\n activeSection.value = route.hash.replace(/^#/, \"\");\n});\n\n// Update when the hash changes\nwatch(\n () => route.hash,\n (h) => {\n activeSection.value = h.replace(/^#/, \"\");\n }\n);\n\u003C/script>\n```\n\n### Description\n\n\nI’m using the Nuxt UI `\u003CUNavigationMenu>` component in my Nuxt 3 app to render a header nav that scrolls to sections via hash links within my `pages/index.vue` (`#about`, `#products`, `#news`, etc.). Clicking works fine, and the correct menu item highlights and scrolls to that section.\n\nHowever, if I reload the page while viewing, for example,`/#products` or any other section like `#news, #about`, etc., the page scrolls to the respective `products/news/about` section, but the navigation menu always highlights `“Home”` (the first item) instead of `Products/News/About`.\n\nHow can I get `\u003CUNavigationMenu>` to pick up the current `route.hash` on load so that the correct item is active?\n\n\n\nFollowing is the documentation I am refeering to:\n\u003CUNavigationMenu> API: [https://ui.nuxt.com/components/navigation-menu][1]\n\n\n [1]: https://ui.nuxt.com/components/navigation-menu\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2924,2925,2926],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4416,"Nuxt 3/Nuxt UI UNavigationMenu won’t highlight hash‐based section on page reload","2025-06-28T10:47:43Z","https://github.com/nuxt/ui/issues/4416",0.7699787,{"description":2933,"labels":2934,"number":2937,"owner":2914,"repository":2915,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Version\n\nv3 latest commit\n\n### Description\n\nThe `size-*` class applied by a button gets overwritten by the icon itself.\n\nLeft one is in my project, right one is from the docs:\n\n\u003Cimg width=\"300\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c1c427fd-6854-4623-b5f1-db47a74450e2\" />\n\n\u003Cimg width=\"428\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f2bf278-8b13-4d8b-84ec-beb29d9036bb\" />\n\nI couldnt reproduce in a fresh project, but my project is pretty clean still with no customizations. Might have something to do with the css order?\n",[2935,2936],{"name":2905,"color":2906},{"name":2908,"color":2909},2926,"closed","v3: Icon size gets overwritten by icon's width/height","2024-12-29T11:55:14Z","https://github.com/nuxt/ui/issues/2926",0.75625247,{"description":2944,"labels":2945,"number":2946,"owner":2914,"repository":2947,"state":2938,"title":2948,"updated_at":2949,"url":2950,"score":2951},"these should point to module repo + link rather than to nuxt.com",[],1271,"nuxt.com","normalize relative links in module readmes","2023-10-10T14:44:46Z","https://github.com/nuxt/nuxt.com/issues/1271",0.76149666,{"labels":2953,"number":2960,"owner":2914,"repository":2914,"state":2938,"title":2961,"updated_at":2962,"url":2963,"score":2964},[2954,2957],{"name":2955,"color":2956},"pending triage","E99695",{"name":2958,"color":2959},"2.x","d4c5f9",4024,"scrollBehavior not working on first time page load","2023-01-22T15:30:07Z","https://github.com/nuxt/nuxt/issues/4024",0.7681414,{"labels":2966,"number":2969,"owner":2914,"repository":2914,"state":2938,"title":2970,"updated_at":2971,"url":2972,"score":2973},[2967,2968],{"name":2955,"color":2956},{"name":2958,"color":2959},9483,"Router is just resetting browser scroll behaviour everytime","2024-06-30T09:25:42Z","https://github.com/nuxt/nuxt/issues/9483",0.7729051,{"labels":2975,"number":2980,"owner":2914,"repository":2914,"state":2938,"title":2981,"updated_at":2982,"url":2983,"score":2984},[2976,2978,2979],{"name":2977,"color":2912},"stale",{"name":2955,"color":2956},{"name":2958,"color":2959},7090,"Shifting elements when navigating between pages","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/7090",0.77357846,{"description":2986,"labels":2987,"number":2990,"owner":2914,"repository":2915,"state":2938,"title":2991,"updated_at":2992,"url":2993,"score":2994},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, modules\n- Runtime Modules: @nuxt/ui@3.0.1, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/blue-wildflower-wkjpcz\n\n### Description\n\nI don't know if this issue is related to this one : https://github.com/nuxt/ui/issues/3660\n\nWhen I selects items the `@change` is triggered as expected, but when I remove items it's never triggered (while `modelValue` is updated as intended).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2988,2989],{"name":2905,"color":2906},{"name":2908,"color":2909},3756,"InputMenu multiple doesn't emit change on item removal","2025-03-31T19:14:47Z","https://github.com/nuxt/ui/issues/3756",0.7742586,{"description":2996,"labels":2997,"number":3001,"owner":2914,"repository":2915,"state":2938,"title":3002,"updated_at":3003,"url":3004,"score":3005},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.12.0\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: devtools, css, eslint, experimental, future, dayjs, imports, modules, vite, primevue, runtimeConfig, echo, sanctum, turnstile, compatibilityDate\n- Runtime Modules: @nuxt/ui-pro@3.0.2, @primevue/nuxt-module@4.3.3, @nuxt/image@1.10.0, nuxt-icon@0.6.10, dayjs-nuxt@2.1.11, nuxt-laravel-echo@0.2.3, @nuxtjs/leaflet@1.2.6, @vueuse/nuxt@10.11.1, @samk-dev/nuxt-vcalendar@1.0.4, nuxt-tour@0.0.34, @vee-validate/nuxt@4.15.0, @nuxt/eslint@0.5.7, nuxt-auth-sanctum@0.5.8, @nuxtjs/turnstile@0.6.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\n-\n\n### Description\n\nHey, this isn't exactly the same issue but it's somewhat related to #3186. I'm trying to wrap UInput in a custom component and want to expose all the props it uses. Here's what I tried:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { InputProps } from '#ui/types'\n\nconst props = defineProps\u003CInputProps>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUInput\n v-bind=\"props\"\n :ui=\"{ root: 'w-full' }\"\n >\n \u003Ctemplate\n v-for=\"(_, name) in $slots\"\n #[name]=\"scope\"\n >\n \u003Cslot\n :name\n v-bind=\"scope ?? {}\"\n />\n \u003C/template>\n \u003C/UInput>\n\u003C/template>\n\n```\n\nThe issue is: I can access types exported from #ui/types/form, #ui/types/locale, and #ui/types/utils, but none of the component interfaces (like InputProps) are properly indexed or accessible through #ui/types.\n\nLooks like an indexing/alias resolution issue in Nuxt or WebStorm — but maybe the structure of the exports from #ui/types could be improved to help this?\n\nAny ideas or recommended workaround?\n\nMany thanks\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2998,2999,3000],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},3775,"Incomplete type indexing from #ui/types — component interfaces missing","2025-04-03T10:24:29Z","https://github.com/nuxt/ui/issues/3775",0.77630603,{"description":3007,"labels":3008,"number":3013,"owner":2914,"repository":2914,"state":2938,"title":3014,"updated_at":3015,"url":3016,"score":3017},"Hi. We have various issues reported for `scrollBehavior` not behaving as desired. Maybe use-cases differ but almost all of them are related to the same known issue and we are aware and plan to help fixing it. Please don't make/reopen duplicated issues as there is enough info about the problem.It just makes the process harder. As of always contributions and PRs are appreciated to both `vue-router` and `nuxt` for possible fixes.\r\n\r\n### vue-router\r\n- Handle scrollBehaviour with transitions (vuejs/vue-router#1263)\r\n- Another detail of scrollBehavior wrapped in transition(vuejs/vue-router#1373)\r\n- scrollBehavior doesn't work for initial route in Firefox (vuejs/vue-router#1585)\r\n- Need a way to set what scroll position is saved (vuejs/vue-router#1187)\r\n- Navigating back should retain the scroll position. (vuejs/vue-router#1669)\r\n- Support parent container for scroll behavior (vuejs/vue-router#1249)\r\n- Calcurated scroll position is incorrect in some browser with animation (vuejs/vue-router#1530)\r\n\r\n\r\n### Issues\r\n- Strange behavior in Firefox browser when page transition (#1373)\r\n- What causes a glitch when page transition in Firefox? (#1002)\r\n- Delayed scroll top possible? (#1355)\r\n- ScrollBehavior: Fires too early (#1036)\r\n- Navigating back should retain the scroll position. (#1182)\r\n\r\n### Reproductions\r\n\r\n- https://github.com/krestaino/scroll-position-nuxt (@krestaino, #1182)\r\n- http://jsfiddle.net/qw4hbgek (@posva, vuejs/vue-router#1263)\r\n- http://jsfiddle.net/xctnu8r3/2 (@nickforddesign , vuejs/vue-router#1373)\r\n- https://github.com/vuejs/vue-router/tree/dev/examples/scroll-behavior (@hworld, vuejs/vue-router#1585)\r\n- http://codepen.io/brad426/pen/pezRge (@brad426)\r\n\r\n\r\n### Misc\r\n- https://nuxtjs.org/faq/css-flash\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1219\">#c1219\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3009,3012],{"name":3010,"color":3011},"available soon","6de8b0",{"name":2958,"color":2959},1376,"scrollBehavior Glitches","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1376",0.77869946,["Reactive",3019],{},["Set"],["ShallowReactive",3022],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fro2V1ieltMAAmmp7U9x11NEne2It8WA_H0DUJL_sGrk":-1},"/nuxt/ui/3000"]