\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3176,3179,3182],{"name":3177,"color":3178},"bug","d73a4a",{"name":3180,"color":3181},"v3","49DCB8",{"name":3183,"color":3184},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6666354,{"description":3194,"labels":3195,"number":3199,"owner":3186,"repository":3187,"state":3188,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Environment\n\n\"nuxt\": \"^3.17.5\",\n\"@nuxt/ui\": \"^3.1.3\",\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nFollowing is my `components/AppHeader.vue`:\n\n```\n\u003Ctemplate>\n \u003Cheader class=\"bg-white sticky top-0 z-50\">\n \u003Cnav class=\"hidden lg:flex flex-1 justify-center\">\n \u003CUNavigationMenu\n v-model=\"activeSection\"\n :items=\"navItems\"\n class=\"space-x-2\"\n highlight\n highlight-color=\"primary\"\n >\n \u003Ctemplate #item=\"{ item, active }\">\n \u003CULink\n as-child\n :to=\"{ path: '', hash: `#${item.to}` }\"\n exact-hash\n class=\"px-4 py-2 rounded-md transition\"\n aria-label=\"Go to {{ item.label }}\"\n >\n \u003Cspan class=\"inline-flex items-center\">\n \u003CUIcon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-5 mr-2\" />\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```",[3196,3197,3198],{"name":3177,"color":3178},{"name":3180,"color":3181},{"name":3183,"color":3184},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.6685734,{"description":3205,"labels":3206,"number":3210,"owner":3186,"repository":3186,"state":3188,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.17.0`\n- Nuxt Version: `4.0.3`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@10.12.1`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nVue SSR (correct order): https://stackblitz.com/edit/github-ifxk7hsj?file=src/components/BlueSquare.vue,src/pages/Home.vue\n\nVue (correct order in dev mode): https://stackblitz.com/edit/vitejs-vite-h4thdsyp?file=src/components/BlueSquare.vue,src/App.vue&terminal=dev\n\nNuxt (wrong order in prod): https://stackblitz.com/edit/github-ristas3f-hetgu6mm?file=app%2Fcomponents%2FBlueSquare.vue,app%2Fapp.vue\n\n### Describe the bug\n\nThis is a follow-up on:\n- https://github.com/nuxt/nuxt/issues/25229\n- https://github.com/nuxt/nuxt/issues/23785\n\nThe styles are now correctly ordered in the `entry.css` file, but the rendered `\u003Cstyle>` tags are not.\nStyles from the parent component should always have a higher priority _(in the case of equal specificity - be defined later)_ than the styles from children.\n\nCurrently, after the `entry.css` file loads, the correct styles get applied, however, **while the css file is loading**, the styles are broken due to the rendered `\u003Cstyle>` tags being ordered incorrectly. This can cause layout shifts / flashes / etc.\n\n\n```vue\n// CHILD\n\u003Ctemplate>\n \u003Cdiv class=\"blue\" />\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3207],{"name":3208,"color":3209},"pending triage","E99695",33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.68701136,{"description":3216,"labels":3217,"number":3221,"owner":3186,"repository":3187,"state":3188,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.3.2, @nuxt/eslint@1.8.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.2\n\n### Reproduction\n\nI attempted to reproduce the issue using the official Nuxt UI CodeSandbox template, but it seems that the `class` property is not applied at all in that environment. Therefore, the bug cannot be reproduced there.\n\nHowever, in my local environment (Nuxt v4.0.3 / Nuxt UI v3.3.2), the issue is consistently reproducible. \nPlease refer to the attached screenshot for visual confirmation.\n\nHere is the code I used:\n\n```vue\n\u003CUInputMenu\n :items=\"[\n {\n label: 'Blue',\n class: 'text-blue-500!',\n },\n {\n label: 'Red',\n class: 'text-red-500!',\n },\n {\n label: 'Green',\n class: 'text-green-500!',\n },\n ]\"\n/>\n```\n\n\n### Description\n\nWhen using `UInputMenu`, each item can be assigned a custom class. However, after filtering, the class assignment seems to mismatch. For example, the \"Green\" item may be displayed in red color.\n\n### Additional context\n\n- Initial state (before filtering): \n\u003Cimg width=\"328\" height=\"243\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f556d5b4-554e-4328-98f1-e3bb037504bf\" />\n\n- After filtering with \"r\": \n\u003Cimg width=\"338\" height=\"206\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/bbed6c9b-2eae-4c55-9d68-2991f64c26ca\" />\n\nIn the filtered state, the \"Green\" item is incorrectly displayed in red.\n\n### Logs\n\n```shell-script\n\n```",[3218,3219,3220],{"name":3177,"color":3178},{"name":3180,"color":3181},{"name":3183,"color":3184},4752,"UInputMenu item class mismatch after filtering","2025-08-15T01:57:20Z","https://github.com/nuxt/ui/issues/4752",0.6898665,{"description":3227,"labels":3228,"number":3232,"owner":3186,"repository":3187,"state":3188,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: -\n- CLI Version: 3.28.0\n- Nitro Version: -\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-9khbefry?file=src/App.vue (please open in blink-based browsers, something in the reproduction webcontainer really does not want to run in firefox)\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CUNavigationMenu\n :items=\"[\n {\n label: 'Nuxt UI',\n href: 'https://ui.nuxt.com',\n target: '_self',\n },\n ]\"\n />\n \u003C/UApp>\n\u003C/template>\n```\n\n### Description\n\n`NavigationMenu` is passed an item with a set `href` and `target` set to `_self`. Rendered `\u003Ca>` ignores passed `target` and sets it to `_blank`:\n\n\u003Cimg width=\"578\" height=\"320\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e0dea426-2ed6-4dac-b1dd-f805792348af\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3229,3230,3231],{"name":3177,"color":3178},{"name":3180,"color":3181},{"name":3183,"color":3184},5012,"`NavigationMenu`: `NavigationMenuItem.target` seems to be ignored","2025-09-19T04:45:20Z","https://github.com/nuxt/ui/issues/5012",0.69219697,{"description":3238,"labels":3239,"number":3245,"owner":3186,"repository":3187,"state":3246,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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```",[3240,3241,3242],{"name":3177,"color":3178},{"name":3180,"color":3181},{"name":3243,"color":3244},"nuxt/ui-pro","00dc82",4177,"closed","UNavigationMenu item children not visible when wrapped in UDashboardToolbar","2025-05-23T12:23:17Z","https://github.com/nuxt/ui/issues/4177",0.6543622,{"description":3252,"labels":3253,"number":3257,"owner":3186,"repository":3187,"state":3246,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\n\n\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, components, css, devServer, ssr, vuefire, runtimeConfig\n- Runtime Modules: @nuxt/image@1.10.0, @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nThis is noticeable on the documentation [page](https://ui.nuxt.com/components/navigation-menu#orientation) for any vertical navigation menu with children navigation items. \n\n### Description\n\nThe parent item renders as a `\u003Cbutton>` tag instead of the `\u003Ca>` tags of other navigation menu items. This means the `to:` attribute is ignored (and target) and can't be clicked on. This is likely due to the parent and children being converted to a Collapsible component under the hood. \n\nWhen the orientation is horizontal, however, you can have both the parent and children be links - where they render `\u003Ca>` tags. Hovering over the horizontal parent shows the children, but the parent can still be a link.\n\nIdeally, we could set a boolean to control whether the children are converted to a Collapsible or not. Or wrap the Collapsible parent around a link. Understandably, the click then couldn't trigger opening/closing the collapsible (maybe the icon triggers opening/closing, while the label can still have the Link attributes available).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3254,3255,3256],{"name":3177,"color":3178},{"name":3180,"color":3181},{"name":3183,"color":3184},3911,"[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3911",0.6562014,{"description":3263,"labels":3264,"number":3267,"owner":3186,"repository":3187,"state":3246,"title":3268,"updated_at":3269,"url":3270,"score":3271},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-svgo@4.0.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter upgrading from `alpha.8` to `alpha.9`, the border radius is wrong (different from the rest of the application) when using badge in the [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu). When inspecting HTML, this is the class (related to border radius) applied to the badge: `rounded-[calc(var(--ui-radius)]`.\n\nI also tried passing the [class](https://ui3.nuxt.dev/components/badge#class-prop) to `BadgeProps` but it doesn't work:\n```vue\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n class: \"rounded-full\", // ! NOT WORKING\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\nHowever, IMO the border radius should be inherited (no need to pass `class`).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3265,3266],{"name":3177,"color":3178},{"name":3180,"color":3181},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.66295296,{"description":3273,"labels":3274,"number":3276,"owner":3186,"repository":3186,"state":3246,"title":3277,"updated_at":3278,"url":3279,"score":3280},"### Environment\n\nLinux `6.16.5-arch1-1` with nuxt `4.1.1`. \nBrowser used: Librewolf 142.0.1-1 and Chrome 139.0.7258.154\n\n```\n- Operating System: `Linux`\n- Node Version: `v22.13.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.5`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n```\n\n### Reproduction\n\nBarebones code example to reproduce this issue, no styling. \nIf you add Tailwind styling the issue becomes even more prominent, as the styling of the inner button gets applied to the outer button, breaking the layout entirely.\n\nI couldn't get any of the two code sandboxes to work, sorry, so here is the code directly:\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n\n \u003Cbutton v-for=\"thisItem in storedItems\" :key=\"thisItem.id\">\n \u003Clabel>{{ thisItem.title }}\u003C/label>\n\n \u003Cdiv>\n \u003Cbutton v-for=\"thisLabel in thisItem.labels\" :key=\"thisLabel.id\">\n {{ thisLabel.name }}\n \u003C/button>\n \u003C/div>\n \u003C/button>\n\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript setup>\n\nconst storedItems = ref([{\n id: \"0\",\n title: \"0\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n },\n {\n id: \"1\",\n title: \"1\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n },\n {\n id: \"2\",\n title: \"2\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n }\n]);\n\n\u003C/script>\n```\n\n### Describe the bug\n\nTwo button elements, nested inside of each other, each containing a `v-for` instruction, causes the layout to break. \nThe for loop is executed an incorrect amount of times and the styling of the inner button can get applied to the outer button, starting with iteration >0.\n\nChanging one of the two button elements to a div/anchor/... fixes the issue.\n\n### Additional context\n\nThis is how it looks on page load:\n\u003Cimg width=\"1196\" height=\"649\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/520c3c98-61c7-4b40-9b97-a634d13d3e2f\" />\n\nThis is how it looks after a hot reload and *should* look:\n\u003Cimg width=\"1196\" height=\"649\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/99a6c586-13e4-4ff6-84f7-b79c4e301844\" />\n\nThe behavior does not change in \"build\" mode, so without the dev server. It technically is even worse because there is no hot-reload to circumvent the issue anymore.\n\n \n\nThis is how it looks in my app with Tailwind styling ^-^:\n\u003Cimg width=\"1849\" height=\"1171\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e73db657-9526-418a-b611-772a73a4a22f\" />\n\n...and this is how it should look like:\n\u003Cimg width=\"1837\" height=\"1167\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b34dd8fe-e625-4c84-9666-e46afd238b23\" />\n\n### Logs\n\n```shell-script\n\n```",[3275],{"name":3208,"color":3209},33188,"Nested button elements with v-for loop are processed incorrectly and break layout","2025-09-09T19:05:58Z","https://github.com/nuxt/nuxt/issues/33188",0.6650289,{"description":3282,"labels":3283,"number":3291,"owner":3186,"repository":3186,"state":3246,"title":3292,"updated_at":3293,"url":3294,"score":3295},"### 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_",[3284,3287,3288],{"name":3285,"color":3286},"3.x","29bc7f",{"name":3208,"color":3209},{"name":3289,"color":3290},"upstream","E8A36D",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.6680469,["Reactive",3297],{},["Set"],["ShallowReactive",3300],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fUM4mp1VPe5RKnRZlEnykM6dAs6lhjd4g3VSxq7SQuzg":-1},"/nuxt/ui/5223"]