\n\n### Logs\n\n```shell-script\n\n```",[3038,3041,3042],{"name":3039,"color":3040},"bug","d73a4a",{"name":3022,"color":3023},{"name":3043,"color":3044},"triage","ffffff",4449,"Interfering Dropdown in `UNavigationMenu` component when using sections","2025-07-08T21:08:13Z","https://github.com/nuxt/ui/issues/4449",0.7320037,{"description":3051,"labels":3052,"number":3057,"owner":3028,"repository":3029,"state":3030,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Description\n\n## No Clear Documentation for Targeting Active Styles in `NavigationMenu` Component\n\n### Description\n\nI'm trying to apply custom styles to the active state of a menu item in the `NavigationMenu` component, but there doesn't seem to be any clear documentation on how to do this.\n\nThe [theming docs](https://ui.nuxt.com/getting-started/theme#props) mention using the `:ui` attribute to target internal parts of a component, and the [theme structure for `NavigationMenu`](https://ui.nuxt.com/components/navigation-menu#theme) shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering `[object Object]`, which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.\n\nEven large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:\n\n```js\nlink: {\n base: 'px-3 py-2 rounded-md',\n active: 'bg-primary text-white font-medium'\n},\nvariants: {\n active: {\n true: {\n item: 'bg-primary text-white font-medium'\n }\n }\n}\n```\n\nThe only working solution so far is using data-* attributes like this:\n```js\nlink: 'text-md data-active:bg-primary data-active:text-white'\n```\nWhile this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.\n\n### Question\nWhat is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?",[3053,3056],{"name":3054,"color":3055},"question","d876e3",{"name":3022,"color":3023},4279,"Targeting active menu styles","2025-06-02T10:32:24Z","https://github.com/nuxt/ui/issues/4279",0.7543676,{"description":3063,"labels":3064,"number":3072,"owner":3028,"repository":3029,"state":3073,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n\n### Version\n\n2.19.2(vite@5.4.11)(vue@3.5.13)\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-dvarzb\n\n### Description\n\nI tried to add new functionality on USelectMenu to have information icon on select menu option so that when you hover on it, it will trigger UPopover to display important detail of the object including an action button to open a slideover. \n\nI tried it on multiple mode and single mode. But the implementation was not working on single mode. To give you more context, I'm using `@mouseenter` and `@mouseleave` events on the popover panel slot in order to detect whether I'm on the popover panel and to prevent clicking the option when I'm clicking the `Open detailed view` button.\n\n\n\nThe issue was when I'm in single mode and tried to hover on the icon then clicked the `Open detailed view` button, it closes both the popover and the select menu.\n\nI expect it would open the slide over both in multiple and single select menu.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3065,3066,3067,3070],{"name":3039,"color":3040},{"name":3043,"color":3044},{"name":3068,"color":3069},"closed-by-bot","ededed",{"name":3071,"color":3069},"stale",2753,"closed","[USelectMenu] [UPopover] Can't open click button inside popover panel in select menu option","2025-06-18T09:05:35Z","https://github.com/nuxt/ui/issues/2753",0.70381844,{"description":3079,"labels":3080,"number":3084,"owner":3028,"repository":3029,"state":3073,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Description\n\nThe UNavigationMenu component in collapsed mode provides a space-efficient navigation experience.\n\nHowever, when a navigation item has submenus, the current behavior on click is to add the submenu items with a new list of icons at the same level. This can be confusing, as it’s not immediately clear that a submenu was opened, it looks like a flat continuation of the main menu.\n\nhttps://github.com/user-attachments/assets/809d7216-d707-48a6-bfeb-d6f3f4c292a5\n\n\n👉 A potential improvement would be to show a popover menu on hover (like Stripe does) when an item with children is hovered in collapsed mode.\n\n\n\n### Additional context\n\n_No response_",[3081,3082,3083],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3043,"color":3044},4186,"Show a popover menu on hover in `UNavigationMenu` when collapsed, for items with submenus","2025-05-21T16:39:05Z","https://github.com/nuxt/ui/issues/4186",0.7095889,{"description":3090,"labels":3091,"number":3096,"owner":3028,"repository":3029,"state":3073,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.6.2, @nuxt/fonts@0.10.3, @nuxt/ui@2.20.0, @vueuse/nuxt@12.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.13.2\n\n### Reproduction\n\n1. Use this template: https://github.com/nuxt-ui-pro/dashboard\n2. Run the app (npm run dev) (or run the demo: https://dashboard-template.nuxt.dev/)\n3. Open devtools and toggle device toolbar\n4. Click on the menu icon and then the nuxt text on the top. \n5. It is buggy because the hover mode is not taking into account the touch device input.\n\n\n\n\n### Description\n\nI use the template from https://github.com/nuxt-ui-pro/dashboard and tested it on mobile.\nThe component UDropdown has a mode of 'hover'. This however breaks the interaction on mobile/touch devices.\n\n\u003CUDropdown v-slot=\"{ open }\" mode=\"hover\" :items=\"[teams, actions]\" class=\"w-full\" :ui=\"{ width: 'w-full' }\"\n :popper=\"{ strategy: 'absolute' }\">\n\nThis is reproduced in the devtools using the mobile emulator, as well as your own device (ios).\n\n### Additional context\n\nI believe this to be a bug since an example should be working properly on all devices without workarounds.\n\n### Logs\n\n```shell-script\n\n```",[3092,3093,3094,3095],{"name":3039,"color":3040},{"name":3043,"color":3044},{"name":3068,"color":3069},{"name":3071,"color":3069},2989,"Dropdown with mode=\"hover\" breaks interaction on touch device","2025-06-18T09:05:08Z","https://github.com/nuxt/ui/issues/2989",0.7159667,{"description":3102,"labels":3103,"number":3106,"owner":3028,"repository":3107,"state":3073,"title":3108,"updated_at":3109,"url":3110,"score":3111},"- [ ] Delay when hovering\n- [ ] Button shouldn't be clickable\n- [ ] When moving the mouse between the trigger and the popover, it disappears\n\n> I assume this would also be applicable to `Dropdown` component",[3104],{"name":3039,"color":3105},"ff281a",315,"nuxt.com","Navbar popover issues with hover mode","2023-02-15T12:32:07Z","https://github.com/nuxt/nuxt.com/issues/315",0.7169822,{"description":3113,"labels":3114,"number":3106,"owner":3028,"repository":3118,"state":3073,"title":3119,"updated_at":3120,"url":3121,"score":3111},"Hi all,\r\n\r\nI am trying to test my nuxt app with @nuxt/test-utils, but I am stuck with this error (all components and layouts are listed as errors).\r\n\r\n```\r\nFAIL tests/start.test.js (51.639 s)\r\n browser\r\n ✕ setup nuxt (49957 ms)\r\n ✕ renders the index page (794 ms)\r\n\r\n ● browser › setup nuxt\r\n\r\n\r\n ERROR in ./layouts/error.vue\r\n Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):\r\n NonErrorEmittedError: (Emitted value instead of an instance of Error) SyntaxError: Invalid or unexpected token\r\n\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:313:13\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:172:11\r\n at loadLoader (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/loadLoader.js:32:11)\r\n at iteratePitchingLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)\r\n at runLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:2)\r\n at NormalModule.doBuild (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:295:3)\r\n at NormalModule.build (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:446:15)\r\n at Compilation.buildModule (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:739:10)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:981:14\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:409:6\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:155:13\r\n at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), \u003Canonymous>:6:1)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:138:29\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:346:9\r\n @ ./.nuxt/t12hfdrq/index.js 27:0-48 550:0-32\r\n @ ./.nuxt/t12hfdrq/client.js\r\n @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/t12hfdrq/client.js\r\n ERROR in ./layouts/default.vue\r\n Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):\r\n NonErrorEmittedError: (Emitted value instead of an instance of Error) SyntaxError: Invalid or unexpected token\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:313:13\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:172:11\r\n at loadLoader (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/loadLoader.js:32:11)\r\n at iteratePitchingLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)\r\n at runLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:2)\r\n at NormalModule.doBuild (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:295:3)\r\n at NormalModule.build (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:446:15)\r\n at Compilation.buildModule (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:739:10)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:981:14\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:409:6\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:155:13\r\n at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), \u003Canonymous>:6:1)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:138:29\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:346:9\r\n @ ./.nuxt/t12hfdrq/App.js 28:0-50 30:32-41\r\n @ ./.nuxt/t12hfdrq/index.js\r\n @ ./.nuxt/t12hfdrq/client.js\r\n @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/t12hfdrq/client.js\r\n```\r\nMy `jest.config.js`:\r\n\r\n```js\r\n/*\r\n * For a detailed explanation regarding each configuration property, visit:\r\n * https://jestjs.io/docs/configuration\r\n */\r\n\r\nmodule.exports = {\r\n clearMocks: true,\r\n collectCoverage: true,\r\n coverageDirectory: 'coverage',\r\n coverageProvider: 'v8',\r\n preset: '@nuxt/test-utils',\r\n transformIgnorePatterns: [\r\n 'node_modules/(?!(nuxt-i18n|@nuxtjs/vuetify|@nuxtjs/i18n|nuxt-highcharts)/)',\r\n ],\r\n setupFilesAfterEnv: ['./tests/setup.js'],\r\n moduleNameMapper: {\r\n '^@/(.)$': '\u003CrootDir>/$1',\r\n '^~/(.)$': '\u003CrootDir>/$1',\r\n '^./(.)$': '\u003CrootDir>/$1',\r\n '^vue$': 'vue/dist/vue.common.js',\r\n },\r\n}\r\n```\r\n\r\nMy `setup.js`:\r\n\r\n```js\r\nimport path from 'path'\r\nimport glob from 'glob'\r\nimport Vue from 'vue'\r\n\r\nglob.sync(path.join(__dirname, './components/**/*.vue')).forEach((file) => {\r\n const name = file.match(/(\\w*)\\.vue$/)[1]\r\n Vue.component(name, require(file).default)\r\n})\r\n\r\nglobal.Vue = Vue\r\n```\r\n\r\nI am using nuxt components with `components: true` in my `nuxt.config.js`.\r\n\r\nHere my `package.json`:\r\n\r\n```json\r\n{\r\n \"name\": \"ui\",\r\n \"version\": \"1.0.0\",\r\n \"private\": true,\r\n \"scripts\": {\r\n \"dev\": \"nuxt\",\r\n \"build\": \"nuxt build\",\r\n \"start\": \"nuxt start\",\r\n \"generate\": \"nuxt generate\",\r\n \"lint:js\": \"eslint --ext \\\".js,.vue\\\" --ignore-path .gitignore .\",\r\n \"lint:prettier\": \"prettier --check .\",\r\n \"lint\": \"yarn lint:js && yarn lint:prettier\",\r\n \"lintfix\": \"prettier --write --list-different . && yarn lint:js --fix\",\r\n \"test\": \"nuxt build && jest\"\r\n },\r\n \"dependencies\": {\r\n \"@nuxtjs/auth-next\": \"5.0.0-1648802546.c9880dc\",\r\n \"@nuxtjs/axios\": \"^5.13.6\",\r\n \"@nuxtjs/dayjs\": \"^1.4.1\",\r\n \"@nuxtjs/i18n\": \"^7.2.2\",\r\n \"@nuxtjs/pwa\": \"^3.3.5\",\r\n \"core-js\": \"^3.23.1\",\r\n \"nuxt\": \"^2.15.8\",\r\n \"nuxt-highcharts\": \"^2.0.4\",\r\n \"vue\": \"^2.6.14\",\r\n \"vue-server-renderer\": \"^2.6.14\",\r\n \"vue-template-compiler\": \"^2.6.14\",\r\n \"vued3tree\": \"^5.1.0\",\r\n \"vuetify\": \"^2.6.6\",\r\n \"vuetify-confirm\": \"^2.0.6\",\r\n \"vuetify-toast-snackbar-ng\": \"^0.7.5\",\r\n \"vuex\": \"^3.6.2\",\r\n \"webpack\": \"^5.73.0\"\r\n },\r\n \"devDependencies\": {\r\n \"@babel/eslint-parser\": \"^7.18.2\",\r\n \"@nuxt/test-utils\": \"^0.2.2\",\r\n \"@nuxtjs/eslint-config\": \"^10.0.0\",\r\n \"@nuxtjs/eslint-module\": \"^3.1.0\",\r\n \"@nuxtjs/vuetify\": \"^1.12.3\",\r\n \"eslint\": \"^8.18.0\",\r\n \"eslint-config-prettier\": \"^8.5.0\",\r\n \"eslint-plugin-nuxt\": \"^3.2.0\",\r\n \"eslint-plugin-vue\": \"^9.1.1\",\r\n \"glob\": \"^8.0.3\",\r\n \"jest\": \"^28.1.1\",\r\n \"playwright\": \"^1.22.2\",\r\n \"prettier\": \"^2.7.1\"\r\n }\r\n}\r\n```\r\n\r\nAny ideas?\r\n\r\nThank you very much for your help.",[3115],{"name":3116,"color":3117},"v0","4137F6","test-utils","Problem with components","2024-05-01T16:05:18Z","https://github.com/nuxt/test-utils/issues/315",{"description":3123,"labels":3124,"number":3127,"owner":3028,"repository":3029,"state":3073,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAFAIK there is currently no documented way to prevent the popover from opening automatically through click or hover.\n\nExample API:\n\n```\n\u003CUPopover mode=\"manual\">\n \u003CUButton>I don't do anything\u003C/UButton\n\u003C/UPopover>\n```\n\n### Additional context\n\nRelated to #721 (but not fixed)",[3125,3126],{"name":3019,"color":3020},{"name":3022,"color":3023},2925,"Popover manual mode with no click nor hover","2025-05-10T17:19:51Z","https://github.com/nuxt/ui/issues/2925",0.73702896,{"description":3133,"labels":3134,"number":3136,"owner":3028,"repository":3107,"state":3073,"title":3137,"updated_at":3138,"url":3139,"score":3140},"Hello,\r\n\r\n\r\n\r\nThe button on this screenshot (github, discord and twitter) does nothing and you could use X (instead of Twitter) like in footer!",[3135],{"name":3039,"color":3105},1409,"Home 'Built by developers around the world.' buttons does nothing","2023-11-03T10:28:58Z","https://github.com/nuxt/nuxt.com/issues/1409",0.742183,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuihdjqu7sWGjLmXfZwRKmLwSnoU2W7_a4YS0baT6MJ8":-1},"/nuxt/ui/2138"]