\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```",[2904,2907,2910],{"name":2905,"color":2906},"bug","d73a4a",{"name":2908,"color":2909},"v3","49DCB8",{"name":2911,"color":2912},"triage","ffffff",4416,"nuxt","ui","open","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.73351204,{"description":2922,"labels":2923,"number":2936,"owner":2914,"repository":2914,"state":2937,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\r\n- Nuxt Version: `3.8.0`\r\n- CLI Version: `3.9.1`\r\n- Nitro Version: `2.7.2`\r\n- Package Manager: `pnpm@8.10.5`\r\n- Builder: `-`\r\n- User Config: `css`, `vite`, `devtools`, `modules`, `runtimeConfig`, `algolia`, `stripe`, `experimental`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0-rc.5`, `@nuxtjs/tailwindcss@6.8.1`, `@vueuse/nuxt@10.5.0`, `@unlok-co/nuxt-stripe@2.0.0`, `@pinia/nuxt@0.5.1`, `@nuxt/content@2.9.0`, `@nuxt/image@1.0.0`, `nuxt-vitest@0.11.3`, `@nuxtjs/algolia@1.10.1`, `@vee-validate/nuxt@4.11.8`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-3-g8ospn?file=pages%2Findex.vue\n\n### Describe the bug\n\nI'm trying to use the power of target selector in css to show/hide a cart component.\r\nFor this I need to send the user to an url with a hash of the component id. \r\nWhen I use the `NuxtLink` component with the value `to=\"#cart\"` the url is updated but the component is not displayed. If I then use the external property, the component is displayed.\r\nVice versa, to hide the component I have to use the same property which results in reloading the page.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2924,2927,2930,2933],{"name":2925,"color":2926},"3.x","29bc7f",{"name":2928,"color":2929},"workaround available","11376d",{"name":2931,"color":2932},"pending triage","E99695",{"name":2934,"color":2935},"upstream","E8A36D",24415,"closed","NuxtLink internal hash behavior","2023-12-10T23:39:40Z","https://github.com/nuxt/nuxt/issues/24415",0.7125634,{"description":2943,"labels":2944,"number":2955,"owner":2914,"repository":2915,"state":2937,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.17.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@8.12.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nnuxt/ui-pro 1.4.3\n\n### Reproduction\n\n```ts\n// package.json\n\"@nuxt/ui-pro\": \"^1.4.3\",\n\"nuxt\": \"^3.13.2\",\n```\n\n\n### Description\n\nThe property `class` in a link object seems not to be used by `UHeaderLinks` or cannot override UI config from prop or the app.config.ts file.\n\nProperty `icon` is not used on the parent object but appears for children.\n\n\n\n```vue\n\u003Cscript setup lang=\"ts\">\n const links = [\n {\n label: 'Foo',\n to: '/foo',\n icon: 'i-mdi-car',\n },\n {\n label: 'Bar',\n to: '/bar',\n icon: 'i-mdi-star',\n class: 'text-red-500 italic',\n },\n {\n label: 'Baz',\n children: [\n {\n label: 'Baz Foo',\n to: '/foo',\n icon: 'i-mdi-car',\n class: 'text-red-500 italic',\n },\n {\n label: 'Baz Bar',\n to: '/bar',\n icon: 'i-mdi-star',\n class: 'text-red-500 italic',\n },\n ],\n },\n ]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUHeader>\n \u003Ctemplate #logo> ... \u003C/template>\n \u003Ctemplate #center>\n \u003CUHeaderLinks\n :links=\"links\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003C/template>\n\n \u003Ctemplate #panel>\n \u003Cdiv class=\"flex h-full content-center pt-[130px]\">\n \u003CUNavigationTree id=\"navtree\" :links=\"links\" default-open />\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Workaround \nFor classes: split links in multiple UHeaderLinks with custom ui prop.\n\n\n\n```vue\n\u003Ctemplate #center>\n \u003Cdiv class=\"flex flex-row flex-nowrap gap-5\">\n \u003CUHeaderLinks\n :links=\"linksA\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003CUHeaderLinks\n :links=\"linksB\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n inactive: 'hover:text-primary text-red-500 italic',\n default: {\n popover: {\n ui: {\n wrapper: 'text-red-500 italic',\n },\n },\n },\n }\"\n />\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2945,2946,2949,2950,2953],{"name":2905,"color":2906},{"name":2947,"color":2948},"nuxt/ui-pro","00dc82",{"name":2911,"color":2912},{"name":2951,"color":2952},"closed-by-bot","ededed",{"name":2954,"color":2952},"stale",2306,"HeaderLinks: properties class and icon has no effects","2025-06-18T09:06:02Z","https://github.com/nuxt/ui/issues/2306",0.7142206,{"labels":2961,"number":2967,"owner":2914,"repository":2914,"state":2937,"title":2968,"updated_at":2969,"url":2970,"score":2971},[2962,2963,2964],{"name":2954,"color":2912},{"name":2931,"color":2932},{"name":2965,"color":2966},"2.x","d4c5f9",8204,"Nuxt-link and router-link don't create href attribute","2023-01-22T15:38:17Z","https://github.com/nuxt/nuxt/issues/8204",0.7175613,{"description":2973,"labels":2974,"number":2977,"owner":2914,"repository":2914,"state":2937,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/agrajak/nuxt_text_recruit](https://github.com/agrajak/nuxt_text_recruit)\n\n### Steps to reproduce\n\nnuxt generate.\nmy static website is hosted in https://agrajak-8d93e.firebaseapp.com/\n\n\n### What is expected ?\n\nIn pages/index.vue, When I see my site with Chrome Developer Tools, Every \u003Cfont-awesome-icon> should be rendered to \u003Csvg ~~~> \n\n\n\n\n\n### What is actually happening?\n\nsome of \u003Cfont-awesome-icon> are rendered to \u003Csvg ~>(in .sticky-nav, you can see it when you scroll down) \nand the others are still rendered to \u003Cfont-awesome-icon> and also show nothing. (in top component)\n\n\n\n\n\n\n### Additional comments?\n\nSite works pretty well in nuxt start.\nI also checked turning off SSR options in nuxt.config.js\n\n {src: '~plugins/fullpage', ssr: false}\nand font-awesome librarys are declared in plugins/fullpage.js\n\nIf this issue is not a bug, just let me know how to fix it.\nthank you.\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7640\">#c7640\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2975,2976],{"name":2931,"color":2932},{"name":2965,"color":2966},3808,"nuxt generate doesn't render every components","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3808",0.72517115,{"description":2983,"labels":2984,"number":2986,"owner":2914,"repository":2914,"state":2937,"title":2987,"updated_at":2988,"url":2989,"score":2990},"How to implement 'breadcrumbs' in nuxt.js c using the vue2-breadcrumbs package? \r\nOr another implementation.\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/c441\">#c441\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2985],{"name":2965,"color":2966},500,"Vue router and vue2-vreadcrumbs","2023-01-18T22:17:23Z","https://github.com/nuxt/nuxt/issues/500",0.7252137,{"description":2992,"labels":2993,"number":2996,"owner":2914,"repository":2914,"state":2937,"title":2997,"updated_at":2998,"url":2999,"score":3000},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\n3.12.1 (working as expected): https://stackblitz.com/edit/github-y43ltx-ttx5gm?file=pages%2Findex.vue\r\n3.12.2 (broken): https://stackblitz.com/edit/github-y43ltx?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nThe `\u003CNuxtLink>` component doesn't render the `href` attribute when `external: true` prop is set. This is an undocumented breaking change from 3.12.1. I used this attribute to disable client-side navigation, but this does not seem possible anymore.\r\n\r\nCode example:\r\n`\u003CNuxtLink :to=\"{ name: 'test' }\" :external=\"true\">Test\u003C/NuxtLink>` \r\n\r\nExpected result (3.12.1 and earlier behavior):\r\n`\u003Ca href=\"/test\">Test\u003C/a>`\r\n\r\nActual result (3.12.2):\r\n`\u003Ca>Test\u003C/a>`\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2994,2995],{"name":2925,"color":2926},{"name":2931,"color":2932},27817,"NuxtLink not rendering href attribute with external prop set to true","2024-06-26T09:51:44Z","https://github.com/nuxt/nuxt/issues/27817",0.72524494,{"description":3002,"labels":3003,"number":3008,"owner":2914,"repository":2914,"state":2937,"title":3009,"updated_at":2988,"url":3010,"score":3011},"I've followed the instructions in the documentation, and I run into the same issue as #380. I've done some testing, but can't nail down what the issue is (the error is exactly the same as the closed issue). \r\n\r\nHere is the steps I've taken:\r\n\r\n1. vue init nuxt/starter test\r\n2. cd test\r\n3. npm install\r\n4. npm install --save bulma font-awesome node-sass sass-loader vue-bulma-breadcrumb (verified pre-processor instructions from https://nuxtjs.org/faq/pre-processors)\r\n5. Added `{ src: 'bulma', lang: 'sass' }` as shown in https://nuxtjs.org/api/configuration-css\r\n6. `npm run dev` Everything works fine. \r\n7. Modify default layout to `import Breadcrumb from 'vue-bulma-breadcrumb'` and added `Breadcrumb` under components. \r\n\r\nAt this point, I get the same error as in #380.\r\n\r\n> Unexpected character '@' (1:0)\r\n> You may need an appropriate loader to handle this file type.\r\n> | @import '~bulma/sass/utilities/functions';\r\n> | @import '~bulma/sass/utilities/variables';\r\n\r\nHowever, if I go and copy the vue file from the [module](https://github.com/vue-bulma/breadcrumb/blob/master/src/Breadcrumb.vue) into a component, and load that instead of `vue-bulma-breadcrumb` it works just fine. Modifying the template to actually reference the Breadcrumb component, it works just fine. \r\n\r\nMy conclusion is there is something wrong with the configuration that is preventing it from loading from node_modules properly. I'm digging around and exploring for a resolution. In the mean time, I figure someone else may find the fix quicker. This happens with vue-bulma-tooltip as well, but I didn't explore any other packages. \r\n\r\nIs there a step that is being missed or is this a webpack configuration issue? \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c382\">#c382\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3004,3007],{"name":3005,"color":3006},"enhancement","8DEF37",{"name":2965,"color":2966},438,"\"SyntaxError: Unexpected token \u003C\" on external Vue component","https://github.com/nuxt/nuxt/issues/438",0.7274569,{"description":3013,"labels":3014,"number":3018,"owner":2914,"repository":2915,"state":2937,"title":3019,"updated_at":3020,"url":3021,"score":3022},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: css, compatibilityDate, devtools, future, modules, runtimeConfig, ssr, typescript\n- Runtime Modules: @nuxt/eslint@1.4.0, @nuxt/fonts@0.11.4, @nuxt/ui-pro@3.1.2, @pinia/nuxt@0.5.5, @vueuse/nuxt@10.11.1, nuxt-auth-utils@0.5.20, nuxt-authorization@0.3.4\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nJust use the code of https://github.com/nuxt-ui-pro/dashboard/blob/main/app/pages/settings.vue and add a child to one of the links used for the UNavigationMenu. Like :\n````\n{\n label: \"General\",\n icon: \"i-lucide-user\",\n to: \"/settings\",\n children: [\n {\n label: \"Hello\",\n icon: \"i-lucide-book-open\",\n },\n ],\n exact: true,\n },\n````\n\n### Description\n\nIt seems wrapping the UNavigationMenu component in UDashboardToolbar will cause the UNavigationMenu's links children dropdown to not appear or be hidden.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3015,3016,3017],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2947,"color":2948},4177,"UNavigationMenu item children not visible when wrapped in UDashboardToolbar","2025-05-23T12:23:17Z","https://github.com/nuxt/ui/issues/4177",0.72837216,{"labels":3024,"number":3028,"owner":2914,"repository":2914,"state":2937,"title":3029,"updated_at":3030,"url":3031,"score":3032},[3025,3026,3027],{"name":2954,"color":2912},{"name":2931,"color":2932},{"name":2965,"color":2966},7541,"Is there the standard, recommended way to make anchor links work properly?","2023-01-22T15:36:01Z","https://github.com/nuxt/nuxt/issues/7541",0.7286914,["Reactive",3034],{},["Set"],["ShallowReactive",3037],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fUta5q4uhgXQ5fAOqJnmorJZP7mLyOh_9o4ENAoPCQWY":-1},"/nuxt/ui/3007"]