\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst flip = ref(false);\r\n\u003C/script>\r\n```\r\n\r\nWhile this works fine with nuxt-icon during development, it breaks in a Prod build. The transformations no longer get applied.\r\n\r\nIt would be great if nuxt-icon could also support these props, if possible. I'm open to help with this issue if someone could give me some pointers where to start.",[],138,"nuxt","icon","open","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.7326143,{"description":2876,"labels":2877,"number":2884,"owner":2868,"repository":2885,"state":2870,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### 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?",[2878,2881],{"name":2879,"color":2880},"question","d876e3",{"name":2882,"color":2883},"v3","49DCB8",4279,"ui","Targeting active menu styles","2025-06-02T10:32:24Z","https://github.com/nuxt/ui/issues/4279",0.76850283,{"description":2891,"labels":2892,"number":2895,"owner":2868,"repository":2885,"state":2870,"title":2896,"updated_at":2897,"url":2898,"score":2899},"### Description\n\nHey! Thanks for trying to make nuxt/ui even more awesome.\n\nI've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states. \nI'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.\nI see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with \"v-if\" and switched on collapsed. \n\nIn some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?\nOnly a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.\nPlease point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge. \n\nofftop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.",[2893,2894],{"name":2879,"color":2880},{"name":2882,"color":2883},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.7768537,{"description":2901,"labels":2902,"number":2910,"owner":2868,"repository":2885,"state":2870,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Description\n\nHello,\n\nI've spent the last couple of hours trying to implement right-click functionality on UTable rows. I've reviewed existing issues but couldn't find a solution that fits this need.\n\nWhat I want to achieve is to show a UContextMenu with actions related to the clicked row when the user right-clicks on it.\n\nCurrently, there is no way I could find to detect right-click events on individual rows along with their row data. If UTable had a #row slot or a dedicated @click.right event that provides the clicked row’s data, this would be easily achievable.\n\nIf there is any workaround or method to implement this right-click behavior on rows with access to row data, I would really appreciate if someone could share it.\n\nThank you!\n\n\n\n### Additional context\n\n_No response_",[2903,2906,2907],{"name":2904,"color":2905},"enhancement","a2eeef",{"name":2882,"color":2883},{"name":2908,"color":2909},"triage","ffffff",4259,"Add support for @click.right event on UTable rows to enable context menus","2025-05-30T14:35:19Z","https://github.com/nuxt/ui/issues/4259",0.7869143,{"description":2916,"labels":2917,"number":2923,"owner":2868,"repository":2885,"state":2870,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: modules, devtools, app, css, runtimeConfig, future, compatibilityDate, telemetry, eslint\n- Runtime Modules: @nuxt/ui-pro@3.0.0, @nuxt/eslint@1.0.1, @vueuse/nuxt@12.5.0, @nuxt/image@1.9.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3\n\n### Reproduction\n\nJust use `UAvatar` with `size=\"md\"`\n\n### Description\n\nHey,\n\nThe sizing and padding of UAvatar espicaly when fallback alt is being used does not look right on v3. See below same component first one on v2, second on v3 (yes it can be changed using config, but dont think this is good as a sane default. Issue also visible in UAvatarColorComponent on ui3 site light mode with vue logo)\n\n\u003Cimg width=\"712\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0b9c4827-9078-4064-bace-5d724df24b86\" />\n\n\u003Cimg width=\"712\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0a9f273f-cb27-4824-ac2f-6497980294ec\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2918,2921,2922],{"name":2919,"color":2920},"bug","d73a4a",{"name":2882,"color":2883},{"name":2908,"color":2909},3558,"Padding and Sizing on UAvatar","2025-03-13T13:44:50Z","https://github.com/nuxt/ui/issues/3558",0.79363334,{"description":2929,"labels":2930,"number":2933,"owner":2868,"repository":2885,"state":2934,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\n\nIn the vertical pill variant I want the background of the active item to be white. It's not clear how to achieve this through the `ui` prop\n\n\n\n```\n\u003CUNavigationMenu\n orientation=\"vertical\"\n variant=\"pill\"\n :items=\"items\"\n\n :ui=\"{\n variants: {\n compoundVariants: [\n {\n variant: 'pill',\n active: true,\n highlight: false,\n class: {\n link: 'before:bg-white' // tried this but it's not working\n }\n }\n ]\n }\n }\"\n/>\n```",[2931,2932],{"name":2879,"color":2880},{"name":2882,"color":2883},3517,"closed","How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.7400305,{"description":2940,"labels":2941,"number":2945,"owner":2868,"repository":2868,"state":2934,"title":2946,"updated_at":2947,"url":2948,"score":2949},"Hey!\r\n\r\nWith our current project, me and the team was wondering what was the reasoning behind the decision to not support slots in layouts?\r\n\r\nWe ran into it when we realized that a CSS grid layout would work best for our responsive view, since each page knows what kind of sidebar or extra content is required in this specific case. For that the structure would need to be like this:\r\n\r\n```\r\nhtml\r\n head\r\n ...\r\n body\r\n my-header\r\n nuxt\r\n #content\r\n slot\r\n #sidebar\r\n slot(name=\"sidebar\")\r\n #extra\r\n slot(name=\"extra\")\r\n my-footer\r\n```\r\nRight now the two options we see are using a separate layout component or somehow coordinating sidebar and extra components to make their own requests according to current route, but both feel at odds with overall simplicity Nuxt aims for.\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/c941\">#c941\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2942],{"name":2943,"color":2944},"2.x","d4c5f9",1079,"Why no slots in layouts?","2023-01-18T15:40:44Z","https://github.com/nuxt/nuxt/issues/1079",0.75615317,{"description":2951,"labels":2952,"number":2956,"owner":2868,"repository":2885,"state":2934,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Description\n\nHi,\n\nI believe that it would be very interesting to implement in the NavigationMenu an attribute similar to the Accordion multiple to allow to open only branch of the menu when the menu is vertical.\n\nKind regards...Antonio\n\n### Additional context\n\n_No response_",[2953,2954,2955],{"name":2904,"color":2905},{"name":2882,"color":2883},{"name":2908,"color":2909},4072,"NavigationMenu implement Accordion multiple attribute","2025-05-20T14:47:06Z","https://github.com/nuxt/ui/issues/4072",0.7623158,{"description":2962,"labels":2963,"number":2966,"owner":2868,"repository":2885,"state":2934,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\n\nI'm trying to apply styling to specific elements, this is my current code for initializing my NavigationMenu items:\n```js\nconst items = ref\u003CNavigationMenuItem[]>([\n [\n {\n label: \"Something\",\n icon: \"\",\n to: \"/\"\n }\n ],\n [\n {\n icon: \"i-simple-icons-discord\",\n to: \"https://discord.gg/....\"\n }\n ]\n ])\n```\n\nI am trying to apply styling using tailwind like you would via `:ui=\"\"` on the `UNavigationMenu` element but in this case I want to change `linkLeadingIcon` only for the discord element, and replace `list` entirely for the `Something` element. I've been scouring the docs and such and I haven't been able to really find a way to do this. As far as I can tell I can't do styling based on label/icon/etc using compound variants.\n\nI'm fairly new to Nuxt UI so might be missing a obvious solution, thanks!",[2964,2965],{"name":2879,"color":2880},{"name":2882,"color":2883},3683,"NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.7701645,{"description":2972,"labels":2973,"number":2977,"owner":2868,"repository":2868,"state":2934,"title":2978,"updated_at":2979,"url":2980,"score":2981},"Hello,\r\n\r\nit would be nice if `slot` areas would assignable in layout files. Often parts of the pages need to be rendered inside of the top toolbar. Thanks\r\n\r\n\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/c162\">#c162\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2974,2976],{"name":2904,"color":2975},"8DEF37",{"name":2943,"color":2944},190,"support the use of slot in layout files","2023-01-22T15:50:41Z","https://github.com/nuxt/nuxt/issues/190",0.7736152,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEOERQmk5FBhPs0we7EyJzgIRg2WlfEI8dd3IczdLzMQ":-1},"/nuxt/ui/4097"]