\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.70553476,{"description":2865,"labels":2866,"number":2873,"owner":2857,"repository":2874,"state":2859,"title":2875,"updated_at":2876,"url":2877,"score":2878},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.8.2\r\n- Builder: -\r\n- User Config: extends, devtools, vite, ignore, hooks, app, css, modules, supabase, dayjs, runtimeConfig, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.2, @nuxt/test-utils/module@3.14.1, nuxt-lodash@2.5.3, @pinia/nuxt@0.5.4, @vueuse/nuxt@11.0.1, @nuxtjs/supabase@1.3.5, @nuxt/ui@2.18.4, dayjs-nuxt@2.1.9\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nn/a\n\n### Description\n\nI was struggling to figure out my TypeScript error and I only found the solution from this issue's stackblitz example: https://github.com/nuxt/ui/issues/1604\r\n\r\nThe example in the docs provided here does not provide a complete TypeScript example, even though the component is written using `lang=\"ts\"`. https://ui.nuxt.com/components/modal#control-programmatically\r\n\r\nThe use of `defineEmits` must be typed in order for the magical event listeners (such as `onSuccess`) to be picked up by the LSP. I recommend fixing the TS example or omitting `lang=\"ts\"` from the example.\r\n\r\nThanks for the great library!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",2085,"ui","useModal example docs missing TypeScript defineEmits usage","2024-08-27T14:32:02Z","https://github.com/nuxt/ui/issues/2085",0.7445164,{"description":2880,"labels":2881,"number":2887,"owner":2857,"repository":2874,"state":2859,"title":2888,"updated_at":2889,"url":2890,"score":2891},"### Environment\n\n- Operating System: `Windows 11`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.3`\n- Nitro Version: `2.11.12`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.3\n\n### Reproduction\n\n[https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks](https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks)\n\n### Description\n\nHi,\nI've noticed an issue when using backdrop-blur on components that include an arrow (such as DropdownMenu). When the backdrop-blur utility is applied to the background, the arrow becomes hidden or invisible. However, once I remove the backdrop-blur, the arrow displays correctly again.\n\nCould you please look into this? I'm currently using Nuxt UI Pro in development.\n\nUPADTE:\nIt seems that this issue only occurs with the DropdownMenu component.\n\n### Additional context\n\nMy ui config:\n```\ndropdownMenu: {\n slots: {\n content: 'dropdown min-w-32 bg-(--ui-dropdown-bg)/75 backdrop-blur-sm border border-(--ui-dropdown-border) shadow-lg shadow-(--ui-shadow) rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-dropdown-border) divide-y divide-(--ui-dropdown-separator) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',\n arrow: 'fill-(--ui-dropdown-border)',\n group: 'p-1 isolate',\n label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)',\n separator: '-mx-1 my-1 h-px bg-(--ui-dropdown-separator)',\n item: 'relative w-full cursor-pointer flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',\n itemLeadingIcon: 'shrink-0',\n itemLeadingAvatar: 'shrink-0',\n itemLeadingAvatarSize: '',\n itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',\n itemTrailingIcon: 'shrink-0',\n itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',\n itemTrailingKbdsSize: '',\n itemLabel: 'truncate',\n itemLabelExternalIcon: 'inline-block size-3 align-top text-(--ui-text-dimmed)'\n },\n variants: {\n color: {\n primary: '',\n secondary: '',\n success: '',\n info: '',\n warning: '',\n error: '',\n neutral: ''\n },\n active: {\n true: {\n item: 'text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)',\n itemLeadingIcon: 'text-(--ui-text)'\n },\n false: {\n item: [\n 'text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated) data-[state=open]:before:bg-(--ui-bg-elevated)',\n 'transition-colors before:transition-colors'\n ],\n itemLeadingIcon: [\n 'text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)',\n 'transition-colors'\n ]\n }\n },\n loading: {\n true: {\n itemLeadingIcon: 'animate-spin'\n }\n },\n size: {\n xs: {\n label: 'p-1 text-xs gap-1',\n item: 'p-1 text-xs gap-1',\n itemLeadingIcon: 'size-4',\n itemLeadingAvatarSize: '3xs',\n itemTrailingIcon: 'size-4',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'sm'\n },\n sm: {\n label: 'p-1.5 text-xs gap-1.5',\n item: 'p-1.5 text-xs gap-1.5',\n itemLeadingIcon: 'size-4',\n itemLeadingAvatarSize: '3xs',\n itemTrailingIcon: 'size-4',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'sm'\n },\n md: {\n label: 'p-1.5 text-sm gap-1.5',\n item: 'p-1.5 text-sm gap-1.5',\n itemLeadingIcon: 'size-5',\n itemLeadingAvatarSize: '2xs',\n itemTrailingIcon: 'size-5',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'md'\n },\n nm: {\n label: 'p-1.5 text-sm gap-1.5',\n item: 'p-1.5 text-sm gap-1.5',\n itemLeadingIcon: 'size-6 text-lg',\n itemLeadingAvatarSize: '2xs',\n itemTrailingIcon: 'size-6 text-lg',\n itemTrailingKbds: 'gap-0.5',\n itemTrailingKbdsSize: 'md'\n },\n lg: {\n label: 'p-2 text-sm gap-2',\n item: 'p-2 text-sm gap-2',\n itemLeadingIcon: 'size-5',\n itemLeadingAvatarSize: '2xs',\n itemTrailingIcon: 'size-5',\n itemTrailingKbds: 'gap-1',\n itemTrailingKbdsSize: 'md'\n },\n xl: {\n label: 'p-2 text-base gap-2',\n item: 'p-2 text-base gap-2',\n itemLeadingIcon: 'size-6',\n itemLeadingAvatarSize: 'xs',\n itemTrailingIcon: 'size-6',\n itemTrailingKbds: 'gap-1',\n itemTrailingKbdsSize: 'lg'\n }\n }\n },\n compoundVariants: [\n {\n color: 'primary',\n active: false,\n class: {\n item: 'text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10',\n itemLeadingIcon: 'text-(--ui-primary)/75 group-data-highlighted:text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'\n }\n },\n {\n color: 'primary',\n active: true,\n class: {\n item: 'text-(--ui-primary) before:bg-(--ui-primary)/10',\n itemLeadingIcon: 'text-(--ui-primary)'\n }\n }\n ],\n defaultVariants: {\n size: 'md'\n }\n },\n```",[2882,2883,2886],{"name":2868,"color":2869},{"name":2884,"color":2885},"v3","49DCB8",{"name":2871,"color":2872},4204,"Arrow Hidden When backdrop-blur Is Used on DropdownMenu","2025-05-31T11:40:30Z","https://github.com/nuxt/ui/issues/4204",0.751837,{"description":2893,"labels":2894,"number":2897,"owner":2857,"repository":2898,"state":2859,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### Describe the feature\n\n\u003Cimg width=\"1318\" alt=\"Screenshot 2024-03-22 at 3 15 03 AM\" src=\"https://github.com/nuxt/nuxt/assets/15964566/0139b958-a2cd-4ba1-85eb-9012a6f788c5\">\r\n\r\nIt's a doc issue. In sidebar after ```.nuxtignore```, next section is ```app.vue``` but in footer it's showing ```app.config.ts```.\r\n\r\nSimilar issue is visible for the next 2 ~ 3 sections.\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2895],{"name":2868,"color":2896},"ff281a",1540,"nuxt.com","docs: Sidebar and Footer Content Ordering doesn't match","2024-05-03T00:34:25Z","https://github.com/nuxt/nuxt.com/issues/1540",0.75712174,{"description":2904,"labels":2905,"number":2913,"owner":2857,"repository":2874,"state":2859,"title":2914,"updated_at":2915,"url":2916,"score":2917},"",[2906,2909,2910],{"name":2907,"color":2908},"enhancement","a2eeef",{"name":2884,"color":2885},{"name":2911,"color":2912},"reka-ui","56d799",2337,"[DropdownMenu/Popover/Tooltip] Improve arrow styling like `NavigationMenu` ","2024-10-08T10:12:48Z","https://github.com/nuxt/ui/issues/2337",0.7571392,{"description":2919,"labels":2920,"number":2925,"owner":2857,"repository":2874,"state":2859,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### 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.",[2921,2924],{"name":2922,"color":2923},"question","d876e3",{"name":2884,"color":2885},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-05-29T21:37:50Z","https://github.com/nuxt/ui/issues/4254",0.7582338,{"description":2931,"labels":2932,"number":2935,"owner":2857,"repository":2874,"state":2936,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### 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!",[2933,2934],{"name":2922,"color":2923},{"name":2884,"color":2885},3683,"closed","NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.71224785,{"description":2942,"labels":2943,"number":2946,"owner":2857,"repository":2874,"state":2936,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Description\n\nWhen using \u003CUNavigationMenu> with onSelect (instead of to), there's no way to manually set the active state on items. It would be helpful to support an active prop or a value binding (like in buttons #3417) to reflect the selected state visually.\n\n### Additional context\n\n_No response_",[2944,2945],{"name":2907,"color":2908},{"name":2884,"color":2885},4185,"Allow `active` style on `UNavigationMenu` items when using `onSelect`","2025-05-19T15:38:25Z","https://github.com/nuxt/ui/issues/4185",0.71269244,{"description":2952,"labels":2953,"number":2959,"owner":2857,"repository":2874,"state":2936,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### 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```",[2954,2955,2956],{"name":2868,"color":2869},{"name":2884,"color":2885},{"name":2957,"color":2958},"nuxt/ui-pro","00dc82",4177,"UNavigationMenu item children not visible when wrapped in UDashboardToolbar","2025-05-23T12:23:17Z","https://github.com/nuxt/ui/issues/4177",0.7367589,{"description":2965,"labels":2966,"number":2975,"owner":2857,"repository":2874,"state":2936,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Description\n\nHow can i custom content slot in NavigationMenu with orientation is vertical. It just work with orientation is horizontal\n\n\n\n",[2967,2968,2971,2972],{"name":2922,"color":2923},{"name":2969,"color":2970},"needs reproduction","CB47CF",{"name":2884,"color":2885},{"name":2973,"color":2974},"closed-by-bot","ededed",4097,"Custom content slot in NavigationMenu","2025-05-16T02:10:16Z","https://github.com/nuxt/ui/issues/4097",0.7402126,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffCrxvpCmP_jGB9-T_AlxGvgyMUc1Q3RHxvQ9jP20Vrw":-1},"/nuxt/ui/3517"]