\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```",[3137,3140,3143],{"name":3138,"color":3139},"bug","d73a4a",{"name":3141,"color":3142},"v3","49DCB8",{"name":3144,"color":3145},"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.738304,{"description":3155,"labels":3156,"number":3157,"owner":3147,"repository":3148,"state":3149,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Describe the feature\n\nIt would be great if Nuxt UI could provide a built-in, customizable **feature tour / onboarding guide** component. This would allow developers to guide users through key parts of an application with step-by-step tooltips and highlighted elements.\n\n**Motivation**\n\n* Helps improve user onboarding and product discovery.\n* Provides a consistent and reusable UI pattern for walkthroughs across Nuxt projects.\n* Currently, developers must rely on external libraries (e.g., Driver.js, Shepherd.js) or build a custom solution. A Nuxt UI-native solution would integrate seamlessly with existing components and theming.\n\n**Proposed Features**\n\n* Ability to define **steps** with `selector`, `title`, `description`, and `position`.\n* Configurable **highlight styles** (border, shadow, spotlight cut-out).\n* Built-in **navigation controls** (Next, Previous, Finish).\n* Option to scroll to target elements automatically.\n* Theming support with Nuxt UI tokens.\n* Accessibility support (keyboard navigation, ARIA roles).\n\n**Example API (pseudo-code)**\n\n```vue\n\u003CUTour :steps=\"steps\" v-model=\"active\" />\n\n\u003Cscript setup lang=\"ts\">\nconst steps = [\n { selector: '#step1', title: 'Welcome', description: 'This is the first step', position: 'bottom' },\n { selector: '#step2', title: 'Next Feature', description: 'Learn about this one too', position: 'right' }\n]\n\u003C/script>\n```\n\n**Alternatives Considered**\n\n* External libraries like Driver.js or Shepherd.js, but they don’t fit Nuxt UI’s design system and require additional integration effort.\n\n**Additional Context**\nThis would help Nuxt developers deliver a polished onboarding experience without reinventing the wheel.\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).",[],4874,"Interactive Feature Tour Component","2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.7454487,{"description":3163,"labels":3164,"number":3165,"owner":3147,"repository":3166,"state":3167,"title":3168,"updated_at":3169,"url":3170,"score":3171},"- [ ] Search\n- [ ] Subnavbar Links\n- [ ] Examples\n- [ ] Community / Open Source Guides\n- [ ] v2 migration nuxtjs.org",[],1306,"nuxt.com","closed","Documentation Update","2023-07-10T12:42:01Z","https://github.com/nuxt/nuxt.com/issues/1306",0.69619226,{"labels":3173,"number":3183,"owner":3147,"repository":3147,"state":3167,"title":3184,"updated_at":3185,"url":3186,"score":3187},[3174,3177,3180],{"name":3175,"color":3176},"enhancement","8DEF37",{"name":3178,"color":3179},"3.x","29bc7f",{"name":3181,"color":3182},"dx","C39D69",13828,"Navigation fails if pages do not have single root element","2023-09-12T14:58:48Z","https://github.com/nuxt/nuxt/issues/13828",0.7238192,{"description":3189,"labels":3190,"number":3195,"owner":3147,"repository":3147,"state":3167,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.3\r\n- CLI Version: 3.8.3\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-lgq6ak?file=pages%2Fsetup%2F%5Bid%5D.vue\r\n\r\nSetup syntax page:\r\n1. Go to /setup\r\n2. Click on Setup 4 link then click again while the page is loading\r\n\r\nSame in options api page:\r\n1. Go to /items\r\n2. Click on Item 4 link then click again while the page is loading\r\n\r\n\r\nError in console:\r\n\r\n\u003Cimg width=\"1021\" alt=\"Screenshot 2023-09-14 at 3 42 53 PM\" src=\"https://github.com/nuxt/nuxt/assets/133578172/24bdb859-49cb-4ee0-a578-64f0bfa3834d\">\r\n\n\n### Describe the bug\n\nWhen navigating to a page that has an awaiting promise, navigating elsewhere while the page is loading well break the app untill I hard refresh\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3191,3192],{"name":3178,"color":3179},{"name":3193,"color":3194},"pending triage","E99695",23218,"Navigation breaks when clicking nuxt-link twice while page is loading","2023-09-14T13:56:16Z","https://github.com/nuxt/nuxt/issues/23218",0.73271114,{"labels":3201,"number":3206,"owner":3147,"repository":3147,"state":3167,"title":3207,"updated_at":3208,"url":3209,"score":3210},[3202,3203],{"name":3193,"color":3194},{"name":3204,"color":3205},"2.x","d4c5f9",9802,"Missing 404 fallback on Nuxt JS website","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9802",0.73622894,{"description":3212,"labels":3213,"number":3218,"owner":3147,"repository":3147,"state":3167,"title":3219,"updated_at":3220,"url":3221,"score":3222},"## Description\n\nHi, I’m working on a Nuxt 3 project deployed on Vercel. I’m experiencing an unwanted **white flash** or **layout flicker** on navigation between pages, especially when using `\u003CNuxtLink>` inside the navbar. The transition feels broken or unpolished.\n\nI already use default Nuxt page transitions like this:\n\n```css\n.page-enter-active,\n.page-leave-active {\n transition: all 0.4s;\n}\n.page-enter-from,\n.page-leave-to {\n opacity: 0;\n filter: blur(1rem);\n}\n```\nMy app layout includes the navbar and footer outside of `\u003CNuxtPage />` like this:\n\n```vue\n\u003Ctemplate>\n \u003CNuxtLoadingIndicator />\n \u003CAppNavbar />\n \u003Cdiv class=\"h-32\" />\n \u003CUContainer>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UContainer>\n \u003Cdiv class=\"h-32\" />\n \u003CAppFooter />\n\u003C/template>\n```\nmy index page on page/\n\n```vue\n \u003Ctemplate>\n \u003Cmain class=\"min-h-screen\">\n \u003Cdiv class=\"space-y-24\">\n \u003CHomeIntro />\n \u003CHomePremiumService />\n \u003CHomeWork />\n \u003CHomeSocialLinks />\n \u003CHomeFeaturedProjects />\n \u003CHomeFeaturedArticles />\n \u003CHomeTestimonials />\n \u003CHomeContactCTA />\n \u003C/div>\n \u003C/main>\n\u003C/template>\n```\n\nI’ve created a video demonstrating the issue I'm encountering with Nuxt. The video shows the flashing behavior when navigating between pages, even though I have set up transitions as expected.\n\nhttps://github.com/user-attachments/assets/50acdc47-bb18-4f89-b186-f6f220cd731c\n\nEven though the transition is defined, navigation causes a brief white screen before the new content appears. It seems like the layout or components are unmounted/re-mounted unexpectedly.\n\n## What I’ve tried\n\n- Using static assets (`\u003CNuxtImg>`) with placeholder and blur.\n- Moving layout elements inside Nuxt layouts.\n- Ensuring no SSR hydration errors.\n- Checked for large images or fonts causing flashes.\n- Tried with `nuxt@3.8.1`, but got package warnings on `glob@7.x`.\n\n## Possible cause\n\nIt seems like `\u003CNuxtPage />` renders **before** layout is fully hydrated, or there's a delay with dynamic components (like `useSeoMeta`, runtime config, or `\u003CNuxtImg>`). \nMaybe the `transition` hook isn't synced with the component load.\n\n## Questions\n\n- Is this a known issue with page transitions in Nuxt 3?\n- Should layout or page transitions be handled differently to avoid this kind of visual glitch?\n- Any workaround for a smoother visual transition without flicker?\n\nThanks in advance 🙏\n",[3214,3215],{"name":3193,"color":3194},{"name":3216,"color":3217},"needs reproduction","FBCA04",32053,"💥 Nuxt Page Transition causes a Flash / Blank when navigating — possible layout/rendering issue","2025-09-04T08:34:44Z","https://github.com/nuxt/nuxt/issues/32053",0.7366765,{"labels":3224,"number":3226,"owner":3147,"repository":3147,"state":3167,"title":3227,"updated_at":3228,"url":3229,"score":3230},[3225],{"name":3204,"color":3205},8309,"there is no contribute guide","2023-01-18T15:32:39Z","https://github.com/nuxt/nuxt/issues/8309",0.7375565,{"labels":3232,"number":3235,"owner":3147,"repository":3147,"state":3167,"title":3236,"updated_at":3208,"url":3237,"score":3238},[3233,3234],{"name":3193,"color":3194},{"name":3204,"color":3205},9797,"after call error method in fetch navigation not working","https://github.com/nuxt/nuxt/issues/9797",0.7377756,{"description":3240,"labels":3241,"number":3243,"owner":3147,"repository":3148,"state":3167,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@8.14.0\r\n- Builder: -\r\n- User Config: experimental, alias, devtools, srcDir, imports, ssr, nitro, extensions, sourcemap, runtimeConfig, hooks, routeRules, css, build, modules, auth, plugins, gtag, tailwindcss, ui, colorMode, vite, vue, app\r\n- Runtime Modules: @pinia/nuxt@0.5.1, nuxt-gtag@0.5.7, @nuxt/eslint@0.3.7, @sidebase/nuxt-auth@0.7.2, @pinia-plugin-persistedstate/nuxt@1.2.0, @vueuse/nuxt@10.9.0, @nuxt/ui@2.15.1\r\n- Build Modules: -\r\n---------------------------\r\n\r\n### Version\r\n\r\nv2.15.1\r\n\r\n### Reproduction\r\n\r\nCan provide if needed\r\n\r\n### Description\r\n\r\nHi there,\r\nAbsolutely loving this library so far... this is the best UI component library I've ever used, across any framework.\r\nOne small issue though - I'm unable to use NuxtLink's `replace` in both the `HorizontalNavigation` and `VerticalNavigation`, even though the docs say I can use any property from NuxtLink. Passing `to` works perfectly, of course, but it's essential for me to `router.replace` the route and I'd rather not have to pass that as a `click` prop. The following doesn't work:\r\n\r\n```\r\n\u003Cscript setup lang='ts'>\r\nconst tabs = [\r\n ...,\r\n {\r\n replace: '/runs/bulk',\r\n label: 'Bulk Runs',\r\n icon: 'i-ph-list-bullets-bold',\r\n },\r\n]\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CUHorizontalNavigation\r\n :links=\"tabs\"\r\n :ui=\"{\r\n base: 'text-base font-bold',\r\n icon: { base: 'w-6 h-6' },\r\n }\"\r\n />\r\n\u003C/template>\r\n```\r\nAny help with this would be great! Thanks so much for all your hard work.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3242],{"name":3138,"color":3139},1690,"Cannot pass NuxtLink `replace` to Nav components","2025-05-14T14:22:12Z","https://github.com/nuxt/ui/issues/1690",0.73908865,["Reactive",3249],{},["Set"],["ShallowReactive",3252],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbCgT6VwLOnFdlHBO5FKHLxNdP_l8hXvL1YVmr9JoYUE":-1},"/nuxt/nuxt.com/994"]