\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```",[3039,3040,3041],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},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.7222001,{"description":3048,"labels":3049,"number":3057,"owner":3029,"repository":3030,"state":3058,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Description\n\nNuxtUI v3 features a Multiple with badges component. While this element provides an excellent user experience, it doesn't fully behave like a traditional Select Menu. The framework does have a multiple select option, but the selected items are not displayed as badges. The badge-based approach makes management easier and provides a more intuitive interface for users to interact with their selections.\n\n\nAdd badge display support to SelectMenu for multiple selections, similar to the existing Multiple with badges component. This would improve UX by making selected items more visible and manageable through clickable badges, while maintaining consistency across NuxtUI's component library and reducing cognitive load when handling multiple selections.",[3050,3053,3056],{"name":3051,"color":3052},"duplicate","cfd3d7",{"name":3054,"color":3055},"enhancement","a2eeef",{"name":3023,"color":3024},3103,"closed","SelectMenu multiple selected options with badges","2025-01-14T20:39:13Z","https://github.com/nuxt/ui/issues/3103",0.7105715,{"description":3064,"labels":3065,"number":3070,"owner":3029,"repository":3030,"state":3058,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### Description\n\nStyles with tailwindcss 4.0.13 seem to be broken after updating from NuxtUI pervious alpha.\n\n```\n\"dependencies\": {\n \"@iconify-json/ri\": \"1.2.5\",\n \"@nuxt/ui\": \"3.0.0\",\n \"@vueuse/core\": \"12.7.0\",\n \"@vueuse/nuxt\": \"12.7.0\",\n }\n```\nmain.css\n```\n@import 'tailwindcss' theme(static);\n@import '@nuxt/ui';\n```\nHas anyone else ran into this issue and if so how did you fix it?",[3066,3069],{"name":3067,"color":3068},"question","d876e3",{"name":3023,"color":3024},3525,"Styles issue have upgrade from 3.0.0-alpha.13 to 3.0.0","2025-03-12T23:28:54Z","https://github.com/nuxt/ui/issues/3525",0.717064,{"labels":3076,"number":3086,"owner":3029,"repository":3029,"state":3058,"title":3087,"updated_at":3088,"url":3089,"score":3090},[3077,3080,3083],{"name":3078,"color":3079},"3.x","29bc7f",{"name":3081,"color":3082},"upstream","E8A36D",{"name":3084,"color":3085},"upstream-bug","B60205",12921,"Navigating away and back looses the styling of the root component element from its parent page (using style scoped and fragments)","2024-06-17T15:09:38Z","https://github.com/nuxt/nuxt/issues/12921",0.7194965,{"description":3092,"labels":3093,"number":3097,"owner":3029,"repository":3029,"state":3058,"title":3098,"updated_at":3099,"url":3100,"score":3101},"\u003Ch2> What's the Problem \u003C/h2>\r\nwhile change the `layout` in page vue file, there are some bugs in hot-load, old layout and new layout vue file will mixed and combined together. (eg. template in old layout, css style in new layout)\r\n\r\n\u003Ch2> How to reproduce\u003C/h2>\r\n\r\n**Platform**: OS X 10.12.5\r\n**Browser**: chrome, firefox, safari\r\n\r\n1. Create `test_layout.vue` in `layouts` dir, mine is below:\r\n\r\n2. Insert `layout: 'test_layout.vue'` in `~pages/index.vue`.\r\n3. Do not reload browser, let nuxt server complete the compilation, and browser presents wrong css style.\r\n\r\n\u003Ch3> What happened \u003C/h3>\r\nIt seems like that the server link the new layout vue file when hot-load trigged, while still link the old file, so the css style is combined with both of them.\r\n\r\n\u003Ch3> Details \u003C/h3>\r\nI created an layout: `test_layout.vue` (there is some `ul`>`li` and `h1 { color: red }`), then i modified `~pages/index.vue`, insert `layout: 'test_layout'` into `export default` block and saved this file, but nothing happend, even after trying reloaded browser, layout didn't changed. \r\n\r\nBut when I comment this insertion line `// layout: 'test_layout'` and saved the file, layout changed to test_layout (\u003C li > tags stood there, but \u003C h1 > is not red ). \r\n\r\nI restarted the nuxt server, layout loaded correct ( no \u003C li > tags, no red \u003C h1 > ). Uncomment the insertion line:\r\n\u003Cpre>\r\nlayout: 'test_layout', \r\ncomponents: { \r\n Logo\r\n}\r\n\u003C/pre>\r\nand then comes \u003C li > tags and red \u003C h1 >, seems correct.\r\n\r\nBut, the `Documentation` and `Github` at bottom are not link style, they are button style. Then I opened chrome inspector, and found the css code in `default.vue` is in there, the page was mixed with `default.vue` and `text_layout.vue`. But at this time, reload the browser will make it correct, and hot-load still mix the new & old layout vue file.\r\n\r\nAnd more, while using `default.vue` layout with red \u003C h1 > supported in `test_layout.vue`, when I change the h1 color in test_layout.vue, the h1 color in browser do change, too. But the `default.vue` layout is in use.\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/c702\">#c702\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3094],{"name":3095,"color":3096},"2.x","d4c5f9",819,"layout hot load bugs. (old and new CSS/template mixed together) ","2023-01-18T15:39:48Z","https://github.com/nuxt/nuxt/issues/819",0.7284424,{"description":3103,"labels":3104,"number":3108,"owner":3029,"repository":3029,"state":3058,"title":3109,"updated_at":3110,"url":3111,"score":3112},"It would be nice enough to be able to create layouts that would imitate other layouts. Let's say this:\r\n```bash\r\n/---layout\r\n | default.vue\r\n |\r\n /---header\r\n index.vue\r\n full-width.vue\r\n sidebar.vue\r\n```\r\nIn the `/layout/header/index.vue` we create the base with header:\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"header-template-root\">\r\n \u003Capp-header>\u003C/app-header>\r\n \u003Cmain>\r\n \u003Cnuxt/>\r\n \u003C/main>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nNext, we complement this layout in an nested `/layout/header/sidebar.vue`:\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"sidebar-template-root\">\r\n \u003Caside>\r\n \u003C!-- -->\r\n \u003C/aside>\r\n \u003Carticle>\r\n \u003Cnuxt/>\r\n \u003C/article>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nFinally, we use this layout on the page\r\n```html\r\n\u003Ctemplate>\r\n \u003Cp>Page content ...\u003C/p>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n layout: 'header/sidebar'\r\n }\r\n\u003C/script>\r\n```\r\nAs a result, we will get a page with the following code:\r\n```html\r\n\u003Cdiv class=\"header-template-root\">\r\n \u003Capp-header>\u003C/app-header>\r\n \u003Cmain>\r\n \u003Cdiv class=\"sidebar-template-root\">\r\n \u003Caside>\r\n \u003C!-- -->\r\n \u003C/aside>\r\n \u003Carticle>\r\n \u003Cp>Page content ...\u003C/p>\r\n \u003C/article>\r\n \u003C/div>\r\n \u003C/main>\r\n\u003C/div>\r\n```\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\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/c2683\">#c2683\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3105,3107],{"name":3054,"color":3106},"8DEF37",{"name":3095,"color":3096},3099,"[Feature request]: Create nested Layouts","2025-03-18T08:49:20Z","https://github.com/nuxt/nuxt/issues/3099",0.7287978,{"description":3114,"labels":3115,"number":3121,"owner":3029,"repository":3029,"state":3058,"title":3122,"updated_at":3123,"url":3124,"score":3125},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.7.0`\r\n- Nuxt Version: `3.7.4`\r\n- CLI Version: `3.9.1`\r\n- Nitro Version: `2.7.0`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `-`\r\n- User Config: `build`, `modules`, `ssr`, `vite`\r\n- Runtime Modules: `()`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-6q9lur?file=README.md\r\n\r\nhttps://github.com/mathiasrando/nuxt3-vuetify-issue-nested-routes\n\n### Describe the bug\n\nThis issue only occurs when you use Nuxt 3. Using the same route structure in Vue 3 doesn't break any styling.\r\n\r\n### Steps to reproduce\r\n1) Install and start the development server (see README) or open the Stackblitz provided.\r\n2) Visit \"Index\" and refresh the page (works as expected)\r\n3) Visit \"Issue\" and refresh the page (theme styling breaks)\r\n4) Visit \"Nested issue\" and refresh the page (theme styling breaks)\r\n5) Visit \"grandchild\" and refresh the page (works as expected)\r\n\r\nWhen visiting \"grandchild\" after the theme is broken it also applies the styles correctly.\r\n\r\nIf you remove `\u003CNuxtPage>\u003C/NuxtPage>` from the route it no longer breaks the theme styling even if the child route is still present.\r\n\r\n### Expected Behavior\r\nThe theme styles should be loaded correctly for all routes.\r\n\r\n### Actual Behavior\r\nThe theme styles does not load correctly when you load a page/route that has children.\r\n\r\n### Help from Vuetify core member\r\nThis is a link for the code where a core member of Vuetify suspects things goes wrong: https://github.com/vuetifyjs/vuetify/blob/f314cd11553d90708d295a03edf18621105724c5/packages/vuetify/src/composables/theme.ts#L302-L307\r\n\r\nExample of the styling being applied(route with `NuxtPage`) and when it's not(parent route with `NuxtPage´):\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3116,3117,3120],{"name":3078,"color":3079},{"name":3118,"color":3119},"pending triage","E99695",{"name":3081,"color":3082},23967,"Nested routes breaks/removes injected styles (e.g. Vuetify theme-related styling)","2023-11-09T11:14:05Z","https://github.com/nuxt/nuxt/issues/23967",0.7294024,{"description":3127,"labels":3128,"number":3131,"owner":3029,"repository":3030,"state":3058,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v21.5.0\n- Nuxt Version: -\n- CLI Version: 3.16.0\n- Nitro Version: -\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nNo production link yet\n\n### Description\n\nThe `title` slot should return the item's title instead of active item's title.\n\nUsage:\n```javascript\n\u003CUStepper\n ref=\"stepper\"\n v-model=\"activeStep\"\n :items=\"items\"\n >\n \u003Ctemplate #title=\"{ item }\">\n \u003Ch2>{{ item.title }}\u003C/h2>\n \u003C/template>\n.....\n\u003C/UStepper>\n```\n\n\n\n### Additional context\n\nInstead of `Project` to be returned in every steps, I would like to display each item's title.\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3129,3130],{"name":3020,"color":3021},{"name":3023,"color":3024},2888,"UStepper - \"title\" slot is returning the active step's title instead of item's title","2024-12-12T23:04:45Z","https://github.com/nuxt/ui/issues/2888",0.7299248,{"description":3137,"labels":3138,"number":3145,"owner":3029,"repository":3030,"state":3058,"title":3146,"updated_at":3147,"url":3148,"score":3149},"### Environment\n\n\n```\n\"@nuxt/ui\": \"^3.1.3\",\n\"@nuxt/ui-pro\": \"^3.1.3\",\n\"nuxt\": \"^3.17.5\",\n```\n\n\n```\nui: {\n prefix: 'Custom',\n},\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\nIf I simply switch out the `CustomHeader` to a basic `header` element and remove the `template` tags the nested CustomNavigationMenu works and I'm not getting unable to resolve component warnings.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\ndefineProps\u003C{\n links: NavigationMenuItem[]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CCustomHeader>\n \u003Ctemplate #left>\n \u003CClientOnly>\n \u003CNuxtLink to=\"/\">\n \u003CBaseLogo />\n \u003C/NuxtLink>\n \u003C/ClientOnly>\n \u003C/template>\n\n \u003CCustomNavigationMenu :items=\"links\" variant=\"link\" />\n\n \u003Ctemplate #right>\n \u003CThemePicker />\n \u003C/template>\n\n \u003Ctemplate #body>\n \u003CCustomNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n />\n \u003C/template>\n \u003C/CustomHeader>\n\u003C/template>\n```\n\nerrors:\n[Vue warn]: Failed to resolve component: UButton\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: UContainer\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: ULink\nIf this is a native custom element, make sure to exclude it from component resolution via ..\n\n### Description\n\nIf i'm setting a custom prefix in the `ui: {}` config object for the components the UHeader component is unable to resolve its nested components.\n\n### Additional context\n\nI think i've seen issues like this previously also posted, and maybe its some import that is missing.\n\n### Logs\n\n```shell-script\n\n```",[3139,3140,3141,3144],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3142,"color":3143},"nuxt/ui-pro","00dc82",{"name":3026,"color":3027},4371,"custom prefix not working when set with UHeader","2025-06-18T09:09:47Z","https://github.com/nuxt/ui/issues/4371",0.73247457,["Reactive",3151],{},["Set"],["ShallowReactive",3154],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1LjA-GwFVo7-5wLe3tLLfGeLqQqZNw-6yJ1-dtcPJt0":-1},"/nuxt/ui/2686"]