\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```",[3154,3155,3156],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},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.7178271,{"description":3163,"labels":3164,"number":3172,"owner":3144,"repository":3144,"state":3146,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.15.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: webpack\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nSteps to reproduce:\n\n1. create a new nuxt 3 project via npx nuxi@latest init \u003Cproject-name>\n2. add builder: 'webpack' in nuxt.config.ts\n```\nexport default defineNuxtConfig({\n compatibilityDate: '2024-11-01',\n devtools: { enabled: true },\n builder: 'webpack'\n})\n```\n4. install @nuxt/webpack-builder as devDependency\n```\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 },\n \"dependencies\": {\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@nuxt/webpack-builder\": \"^3.14.1592\"\n }\n}\n```\n6. create /pages folder and index.vue\n7. add \u003CNuxtPage /> to app.vue\n8. start the project via npm run dev\n9. open created localhost link in browser\n[Minimal reproduction link](https://stackblitz.com/edit/github-dksvnc-l71vra)\n\n### Describe the bug\n\nRunning in development mode (and shortly seems to be an issue for production build also) and opening app in browser leads to error in Vue Router. You can still get it work by redirecting to other path by clicking the link to another page, but the error will return after page refresh which is extremely uncomfartable for local work\n\nSetting ssr: false in nuxt.config.ts solves this issue, but we need ssr: true for the project\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue Router warn]: uncaught error during route navigation:\nCannot destructure property '__webpack_ids__' of 'data' as it is undefined.\n\n at installChunk (node_modules\\nuxt\\dist\\core\\runtime\\nitro\\renderer.js:525:1)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Promise.all (index 0)\n at setup (node_modules\\nuxt\\dist\\core\\runtime\\nitro\\renderer.js:525:1)\n at applyPlugin (node_modules\\nuxt\\dist\\core\\runtime\\nitro\\renderer.js:525:1)\n at executePlugin (node_modules\\nuxt\\dist\\core\\runtime\\nitro\\renderer.js:525:1)\n at applyPlugins (node_modules\\nuxt\\dist\\core\\runtime\\nitro\\renderer.js:525:1)\n at createNuxtAppServer (node_modules\\nuxt\\dist\\core\\runtime\\nitro\\renderer.js:525:1)\n at async Object.renderToString (/D:/dev/text-nuxt/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)\n```",[3165,3166,3169],{"name":3135,"color":3136},{"name":3167,"color":3168},"webpack","650C6F",{"name":3170,"color":3171},"❗ p4-important","D93F0B",30165,"[Vue Router warn]: uncaught error during route navigation when building with webpack","2024-12-17T06:37:23Z","https://github.com/nuxt/nuxt/issues/30165",0.72733957,{"description":3178,"labels":3179,"number":3182,"owner":3144,"repository":3145,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.14.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/icon@1.10.3, @nuxt/content@2.13.4, @nuxt/ui@2.20.0, @dargmuesli/nuxt-cookie-control@8.4.20, @pinia/nuxt@0.9.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-dbszxsce?file=app.vue\n\n### Description\n\nWhen I ran chrome lighthouse, the results showed that the breadcrumb section was detected as not complying with the recommendation.\n\nI'm using `icon` only without label with defined `to` at first of Links array, to make it more descriptive as lighthouse said, i pass `'aria-label'` property and its value to object of `Links`, at first i thought it would work because as the documentation said about Breadcrumb:\n\n> You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as to, exact, etc. \n> Reference: https://ui.nuxt.com/components/breadcrumb#usage\n\nwell the attrbute is not rendered, but if i pass `ariaLabel` property, the attribute is rendered correctly (with `-` symbol) **Without reloading or HMR triggered,** , and if the page refreshed, it's broken (`-` symbol missing) \n\nNote: i always apply it to every NuxtLink though, aria-label is working as expected\n\nIs there any such way to apply aria-label without `'label'` on object of the links?\n\n### Additional context\n\nattribute rendered as expected (HMR trigger)\n\n\ndash symbol is missing after page reload\n",[3180,3181],{"name":3135,"color":3136},{"name":3141,"color":3142},3007,"closed","UBreadcrumb wont render aria attribute","2025-03-24T17:55:54Z","https://github.com/nuxt/ui/issues/3007",0.70570403,{"description":3189,"labels":3190,"number":3194,"owner":3144,"repository":3145,"state":3183,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.15.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `devtools`, `experimental`, `modules`, `css`, `compatibilityDate`, `runtimeConfig`, `fonts`, `i18n`, `ui`\n- Runtime Modules: `@pinia/nuxt@0.5.5`, `@nuxt/eslint@0.5.7`, `@nuxt/ui@3.1.3`, `@nuxtjs/i18n@9.5.5`, `nuxt-marquee@1.0.4`, `nuxt-swiper@2.0.1`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gallant-wiles-gm3tvp\n\n### Description\n\nCannot customize active style of dot of `UCarousel`. Adding `data-[state=active]` (`:ui=\"{ dot: 'data-[state=active]:bg-red=500' }\"`) is not working because there is no `data-state` attribute on dots.\n\n\u003Cimg width=\"487\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2adf8cef-bfdf-4041-be69-2215d3a32b23\" />\n\n### Additional context\n\n I pulled nuxtui and ran and checked playground carousel - dot buttons have `data-state` attribute tho.\n\n### Logs\n\n```shell-script\n\n```",[3191,3192,3193],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4312,"Can't customize active state of UCarousel dot","2025-06-08T19:55:49Z","https://github.com/nuxt/ui/issues/4312",0.70978457,{"labels":3200,"number":3210,"owner":3144,"repository":3144,"state":3183,"title":3211,"updated_at":3212,"url":3213,"score":3214},[3201,3204,3207],{"name":3202,"color":3203},"3.x","29bc7f",{"name":3205,"color":3206},"pending triage","E99695",{"name":3208,"color":3209},"needs reproduction","FBCA04",13579,"Router plugin working not working on build","2023-01-19T16:59:49Z","https://github.com/nuxt/nuxt/issues/13579",0.7128564,{"description":3216,"labels":3217,"number":3222,"owner":3144,"repository":3144,"state":3183,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.18.2\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: yarn@4.4.1\r\n- Builder: -\r\n- User Config: future, srcDir, dir, components, alias, typescript, devtools, modules, routeRules, tailwindcss, postcss, compatibilityDate\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.12.1, @nuxt/image@1.8.0, @nuxt/eslint@0.5.5, @nuxt/content@2.13.2\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nNot working hover events demo: nuxt@3.13.1 + vue@3.5.2\r\nhttps://stackblitz.com/edit/nuxt-vue-3-4-beta-squnun?file=src%2Fpages%2Fhome%2FHomePage.vue,src%2Fshared%2Fui%2Fthumb-carousel%2Fuse-thumb-carousel.ts\r\n\r\nWorking demo: nuxt@3.13.0 + vue@3.4.8\r\nhttps://stackblitz.com/edit/nuxt-vue-3-4-beta-uiqqjl?file=src%2Fpages%2Fhome%2FHomePage.vue,src%2Fshared%2Fui%2Fthumb-carousel%2Fuse-thumb-carousel.ts\r\n\r\nWorking non-nuxt demo: Vite(vike) + vue@3.5.2\r\nhttps://stackblitz.com/edit/dajced?file=pages%2Findex%2F%2BPage.vue,components%2Fthumb-carousel%2Fuse-thumb-carousel.ts\r\n\n\n### Describe the bug\n\n- Open non-working demo\r\n- Wait for the server to start up\r\n- Reload the page (1/twice)\r\n- Hover over the thumbs.\r\n- Navigation should work, but nothing happens, although the carousel itself is initialized\r\n\r\nIn working demos all works fine.\n\n### Additional context\n\nI don't understand what must have been changed in nuxt for my code to stop working.\r\nCan you look at the source code of the `useThumbCarousel` hook that links carousel initialization with expected behavior - maybe there is some part of the code there that causes problems? I'm thinking about watchers or refs.\n\n### Logs\n\n_No response_",[3218,3219],{"name":3205,"color":3206},{"name":3220,"color":3221},"possible regression","B90A42",28856,"Something broken with latest vue (3.5.2+) and latest nuxt (3.13.1)","2024-09-11T19:49:43Z","https://github.com/nuxt/nuxt/issues/28856",0.71819127,{"description":3228,"labels":3229,"number":3232,"owner":3144,"repository":3144,"state":3183,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.18.2\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.0\r\n- Package Manager: npm@9.8.1\r\n- Builder: -\r\n- User Config: devtools, modules, srcDir, css, vite, app, eslint, stylelint, gtag, image\r\n- Runtime Modules: @nuxtjs/eslint-module@4.1.0, @nuxtjs/stylelint-module@5.1.0, @nuxt/image@1.1.0, nuxt-icon@0.6.6, nuxt-gtag@1.1.1\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-hqpmmt?file=app.vue\n\n### Describe the bug\n\nTo reproduce, click on one of the two links. This should turn the link colour to pink. Then refresh the playground browser (not the whole browser)\r\n\r\nExpected: The link should have a class of `active` and be pink\r\n\r\nActual: The link doesn't have the class of `active` but the value is true. Also causes the link to no receive the `active` class when clicked again after reload\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3230,3231],{"name":3202,"color":3203},{"name":3205,"color":3206},24723,"v-bind:class isn't reactive on page load","2023-12-19T14:49:34Z","https://github.com/nuxt/nuxt/issues/24723",0.7203547,{"description":3238,"labels":3239,"number":3244,"owner":3144,"repository":3145,"state":3183,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `srcDir`, `routeRules`, `app`, `svgSprite`, `alias`, `css`, `imports`, `modules`, `ssr`, `runtimeConfig`\n- Runtime Modules: `@nuxt/eslint@1.4.1`, `@nuxt/fonts@0.11.4`, `@nuxt/icon@1.14.0`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.8`, `@nuxt/test-utils@3.19.1`, `@nuxt/ui@3.1.3`, `@nuxtjs/svg-sprite@1.0.2`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/dreamy-euler-9595k7\n\n\n### Description\n\n\n\nHi when i select copy payment id i got that error when i console log the row it gives me undefined upon clicking kindly check this link: https://ui.nuxt.com/components/table#with-context-menu\n\n#4259 \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3240,3241,3243],{"name":3135,"color":3136},{"name":3208,"color":3242},"CB47CF",{"name":3138,"color":3139},4452,"UTable context menu error during selection of items","2025-07-13T16:34:46Z","https://github.com/nuxt/ui/issues/4452",0.721633,{"description":3250,"labels":3251,"number":3254,"owner":3144,"repository":3144,"state":3183,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.10.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `ssr`, `css`, `modules`, `vite`\r\n- Runtime Modules: `zetto/nuxt`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-erwzab?file=layouts/default.vue\r\n\r\nFollow the hints inside the pages\n\n### Describe the bug\n\nThe NuxtLink components get into the active state (just active, not exact active) only if the route tree is inside a nested route.\r\n\r\nI've found that [this function](https://github.com/nuxt/framework/blob/54ac7dd481355a795c2d2b3a2a8f8e06b48bbbc7/packages/nuxt/src/pages/utils.ts#L48) create a path with children only if there is a component to nest the children in.\r\n\r\nFollowing the reproduction, it will generate the route like this:\r\n```js\r\n [ {\r\n path: \"/testok\",\r\n file: \"~/pages/testok.vue\",\r\n children: [ {\r\n name\": \"testok-child\",\r\n path\": \"child\",\r\n file\": \"~/pages/testok/child.vue\"\r\n }, {\r\n \"name\": \"testok\",\r\n \"path\": \"\",\r\n \"file\": \"~/pages/testok/index.vue\"\r\n } ]\r\n}, {\r\n \"name\": \"testko-child\",\r\n \"path\": \"/testko/child\",\r\n \"file\": \"~/pages/testko/child.vue\"\r\n}, {\r\n \"name\": \"testko\",\r\n \"path\": \"/testko\",\r\n \"file\": \"~/pages/testko/index.vue\"\r\n} ]\r\n```\r\n\r\ninstead ok:\r\n```js\r\n [ {\r\n path: \"/testok\",\r\n file: \"~/pages/testok.vue\",\r\n children: [ {\r\n name\": \"testok-child\",\r\n path\": \"child\",\r\n file\": \"~/pages/testok/child.vue\"\r\n }, {\r\n \"name\": \"testok\",\r\n \"path\": \"\",\r\n \"file\": \"~/pages/testok/index.vue\"\r\n } ]\r\n}, [ {\r\n path: \"/testko\",\r\n file: \"~/pages/testko.vue\",\r\n children: [ {\r\n name\": \"testko-child\",\r\n path\": \"child\",\r\n file\": \"~/pages/testko/child.vue\"\r\n }, {\r\n \"name\": \"testko\",\r\n \"path\": \"\",\r\n \"file\": \"~/pages/testko/index.vue\"\r\n } ]\r\n} ]\r\n```\r\n\r\nIf this will be recognised as a bug I can submit a PR to fix it :)\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3252,3253],{"name":3202,"color":3203},{"name":3205,"color":3206},15729,"NuxtLink is active only if in a nested route","2023-01-19T18:20:24Z","https://github.com/nuxt/nuxt/issues/15729",0.7219319,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fx-s6jTR5_zSBwNZq-8ppZ65w0w-MLIxZo7QCuQQyn88":-1},"/nuxt/ui/4771"]