\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,2927,2928],{"name":2925,"color":2926},"bug","d73a4a",{"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.6801334,{"description":2935,"labels":2936,"number":2937,"owner":2914,"repository":2938,"state":2916,"title":2939,"updated_at":2940,"url":2941,"score":2942},"i think the example code should use \r\n`// Current implementation\r\npreviousTodos.value = todos.value;\r\n\r\n// Proposed change\r\npreviousTodos.value = [...todos.value];`",[],1653,"nuxt.com","Docs (useNuxtData => #Optimistic Updates).Incorrect Use of Reference Assignment in previousTodos.value = todos.value","2025-03-21T19:43:40Z","https://github.com/nuxt/nuxt.com/issues/1653",0.68409085,{"description":2944,"labels":2945,"number":2952,"owner":2914,"repository":2914,"state":2953,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Environment\n\nNuxi 3.2.2 \r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v18.14.1`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.3`\r\n- Package Manager: `npm@9.3.1`\r\n- Builder: `vite`\r\n- User Config: `components`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nReproduce Link: https://stackblitz.com/edit/github-tznxrd\r\n\r\n1. npx nuxi init demo\r\n2. cd demo\r\n3. npm install\r\n4. mkdir -p components/layouts\r\n5. edit nuxt.config.ts\r\n **nuxt.config.ts**\r\n ```\r\n export default defineNuxtConfig({\r\n components: [\r\n { path: '~/components/layouts', prefix: 'Special' },\r\n '~/components'\r\n ]\r\n })\r\n ```\r\n\r\n\r\n6. create **header.vue** under components/layouts\r\n ```\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n Header\r\n \u003C/div>\r\n \u003C/template>\r\n ```\r\n\r\n7. import header.vue in **app.vue**\r\n ```\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CHeader />\r\n \u003CNuxtWelcome />\r\n \u003C/div>\r\n \u003C/template>\r\n \r\n \u003Cscript>\r\n import Header from '~/components/layouts/header.vue';\r\n \u003C/script>\r\n ```\r\n\r\n\r\n8. npm run dev\r\n\n\n### Describe the bug\n\n[Vue warn]: Failed to resolve component: Header\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2946,2949],{"name":2947,"color":2948},"3.x","29bc7f",{"name":2950,"color":2951},"pending triage","E99695",19310,"closed","If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.","2023-02-27T12:15:17Z","https://github.com/nuxt/nuxt/issues/19310",0.6384692,{"description":2959,"labels":2960,"number":2963,"owner":2914,"repository":2914,"state":2953,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Environment\n\nnuxt 3 rc12\r\nwin10\n\n### Reproduction\n\nIf i put project in one dir it work, if move to other not work. Always something not work.\n\n### Describe the bug\n\nruntime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: nuxt-child\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\nruntime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:\r\n- Client vnode: nuxt-child \r\n- Server rendered DOM: \u003C!----> \r\n at \u003CQuality onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/quality\" routeProps= Object pageKey=\"/quality\" ... > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CLayoutContent class=\"layoutContent py-0 bg-[#f8f8f8]\" > \r\n at \u003CLayout class=\"w-[100%] bg-[#f8f8f8]\" > \r\n at \u003CLayout class=\"flex h-[100%]\" has-sider=\"\" > \r\n at \u003CDefault > \r\n at \u003CAnonymous key=\"default\" name=\"default\" hasTransition=true > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"layout\" mode=\"out-in\" > \r\n at \u003CAnonymous> \r\n at \u003CConfigProvider inline-theme-disabled=\"\" theme-overrides= Object locale= Object ... > \r\n at \u003CMessageProvider> \r\n at \u003CDialogProvider> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[2961,2962],{"name":2947,"color":2948},{"name":2950,"color":2951},15309,"runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: nuxt-child If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. ","2023-01-19T17:48:01Z","https://github.com/nuxt/nuxt/issues/15309",0.6542054,{"description":2969,"labels":2970,"number":2976,"owner":2914,"repository":2914,"state":2953,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jblieu-fynag4\n\n### Describe the bug\n\nNuxt can no longer resolve a component if its name starts with its containing folder's name, ex:\r\n\r\ncomponent path: `components/Icon/Icones`\r\n\r\napp.vue:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CIconIcones />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nconsole output:\r\n```sh\r\n[Vue warn]: Failed to resolve component: IconIcones 21:27:18\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n```\n\n### Additional context\n\nThe above example works in Nuxt 3.4.x\n\n### Logs\n\n_No response_",[2971,2972,2973],{"name":2947,"color":2948},{"name":2925,"color":2926},{"name":2974,"color":2975},"🔨 p3-minor","FBCA04",20937,"Regression: Cannot resolve component if its folder's name is a prefix of the component's name","2023-05-19T11:23:25Z","https://github.com/nuxt/nuxt/issues/20937",0.66023695,{"description":2982,"labels":2983,"number":2986,"owner":2914,"repository":2914,"state":2953,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.13.2`\r\n- Nuxt Version: `3.0.0-rc.12`\r\n- Nitro Version: `0.6.0`\r\n- Package Manager: `npm@8.1.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n[https://stackblitz.com/edit/github-n2vmgz?file=pages/index.vue](url)\n\n### Describe the bug\n\nNuxtChild doesn't show\r\n\r\nconsole error\r\n\r\n`Vue warn]: Failed to resolve component: NuxtChild\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \r\n at \u003CParents onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C Proxy {…} > > \r\n at \u003CAnonymous key=\"/parents\" routeProps= {Component: {…}, route: {…}} pageKey=\"/parents\" ... > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2984,2985],{"name":2947,"color":2948},{"name":2950,"color":2951},15266,"NuxtChild or Nested Router doesn't work","2023-01-19T17:47:07Z","https://github.com/nuxt/nuxt/issues/15266",0.6680714,{"description":2992,"labels":2993,"number":2998,"owner":2914,"repository":2914,"state":2953,"title":2999,"updated_at":3000,"url":3001,"score":3002},"Hello, I need some help here. \r\n\r\nI'm using Nuxt js with Storefront Ui components and I got this error.\r\n\r\n**vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: \u003CSfHeader> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in**\r\n\r\n---> \u003CHeader> at components/Header.vue\r\n \u003CLayouts/default.vue> at layouts/default.vue\r\n \u003CRoot>\r\n\r\ncomponents- Header.js\r\n```\r\n\u003Ctemplate>\r\n \u003CSfHeader\r\n :title=\"title\"\r\n :active-icon=\"activeIcon\"\r\n :search-placeholder=\"searchPlaceholder\"\r\n :search-value=\"searchValue\"\r\n :cart-icon=\"cartIcon\"\r\n :wishlist-icon=\"wishlistIcon\"\r\n :is-sticky=\"isSticky\"\r\n :account-icon=\"accountIcon\"\r\n :cart-items-qty=\"cartItemsQty\"\r\n :wishlist-items-qty=\"wishlistItemsQty\"\r\n @click:cart=\"alert('@click:cart')\"\r\n @click:wishlist=\"alert('@click:wishlist')\"\r\n @click:account=\"alert('@click:account')\"\r\n @change:search=\"searchValue = $event\"\r\n >\r\n \u003Ctemplate #navigation>\r\n \u003CSfHeaderNavigationItem v-for=\"item in navigation\" :key=\"item\">\r\n \u003Ctemplate slot=\"desktop-navigation-item\">\r\n \u003CSfLink href=\"#\">{{ item }}\u003C/SfLink>\r\n \u003C/template>\r\n \u003C/SfHeaderNavigationItem>\r\n \u003C/template>\r\n \u003C/SfHeader>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { SfHeader, SfLink } from \"@storefront-ui/vue\";\r\n\r\nexport default {\r\n name: 'Header',\r\n components: {\r\n SfHeader,\r\n SfLink,\r\n },\r\n data() {\r\n return {\r\n isMobile: false,\r\n navigation: [\"women\", \"man\", \"kids\"],\r\n searchValue: \"\",\r\n title: \"\",\r\n activeIcon: \"account\",\r\n isSticky: true,\r\n searchPlaceholder: \"Search for items\",\r\n cartIcon: \"empty_cart\",\r\n wishlistIcon: \"heart\",\r\n accountIcon: \"profile\",\r\n cartItemsQty: \"0\",\r\n wishlistItemsQty: \"0\",\r\n };\r\n }\r\n};\r\n\u003C/script>\r\n```\r\n\r\nand in layout folder I have default file \r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CHeader />\r\n \u003CNuxt />\r\n \u003CFooter/>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport Footer from \"~/components/Footer\";\r\nimport Header from \"~/components/Header\";\r\n\r\nexport default {\r\n components: {\r\n Footer,\r\n Header\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Cstyle>\r\n body {\r\n margin: 0;\r\n }\r\n\u003C/style>\r\n```\r\n\r\n\r\n \"@nuxt/typescript-runtime\": \"^2.0.0\",\r\n \"@nuxtjs/axios\": \"^5.12.5\",\r\n \"@storefront-ui/vue\": \"^0.9.1\",\r\n \"axios\": \"^0.21.1\",\r\n \"core-js\": \"^3.6.5\",\r\n \"js-cookie\": \"^2.2.1\",\r\n \"nuxt\": \"^2.14.6\"",[2994,2995],{"name":2950,"color":2951},{"name":2996,"color":2997},"2.x","d4c5f9",8643,"Unknown custom element: \u003CSfHeader> - did you register the component correctly?","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8643",0.67076623,{"description":3004,"labels":3005,"number":3009,"owner":2914,"repository":2914,"state":2953,"title":3010,"updated_at":3011,"url":3012,"score":3013},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.19.0`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-h59wrv?file=pages/index.vue\r\n\r\n- press the button\r\n- the page does not navigate to /about\r\n\r\n\r\n### Describe the bug\r\n\r\nThe nuxt-link inside the dependency example-lib does not work. it's not connected to the nuxt-link component.\r\n\r\n### Additional context\r\n\r\nCode\r\nhttps://github.com/TimvdEijnden/example-nuxt\r\nhttps://github.com/TimvdEijnden/example-lib\r\n\r\n### Logs\r\n\r\n```shell-script\r\nchunk-3NMN3MUW.js?v=e2403010:1381 [Vue warn]: Failed to resolve component: nuxt-link\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \r\n at \u003CMyRouterLink to=\"/about\" is-nuxt=\"\" > \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" routeProps= Object pageKey=\"/\" ... > \r\n at \u003CFragmentWrapper > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\r\n```\r\n",[3006,3007],{"name":2947,"color":2948},{"name":3008,"color":2975},"needs reproduction",19037,"failed to resolve NuxtLink when used in dependency","2023-09-08T07:09:44Z","https://github.com/nuxt/nuxt/issues/19037",0.6711532,{"labels":3015,"number":3018,"owner":2914,"repository":2914,"state":2953,"title":3019,"updated_at":3020,"url":3021,"score":3022},[3016,3017],{"name":2947,"color":2948},{"name":2950,"color":2951},14949,"Failed to resolve component in pages ","2023-01-19T17:42:57Z","https://github.com/nuxt/nuxt/issues/14949",0.67151314,["Reactive",3024],{},["Set"],["ShallowReactive",3027],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwkoBevLOBp5M-bANHUssYYlD4HZubK1IO53IaUOhYa8":-1},"/nuxt/ui/4371"]