\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,"icon","[Feature Request] Support Iconify Transformations","2024-03-15T09:15:14Z","https://github.com/nuxt/icon/issues/138",0.7679868,{"description":3047,"labels":3048,"number":3053,"owner":3030,"repository":3031,"state":3054,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Description\n\nCan components be imported manually in Vue projects",[3049,3052],{"name":3050,"color":3051},"question","d876e3",{"name":3024,"color":3025},3340,"closed","Can components be imported manually in Vue projects","2025-02-17T10:10:41Z","https://github.com/nuxt/ui/issues/3340",0.69429857,{"description":3060,"labels":3061,"number":3068,"owner":3030,"repository":3031,"state":3054,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: modules, compatibilityDate, devtools, css, ui, devServer, future, telemetry, hooks, eslint\n- Runtime Modules: @nuxt/eslint@0.6.2, @nuxt/ui-pro@3.0.1, nuxt-jsonld@2.1.0, @pinia/nuxt@0.10.1\n- Build Modules: -\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt v3.16.1\nui-pro v3.0.1\n\n### Reproduction\n\nWhen I add the following to my nuxt.config.ts:\n\n```ts\n{\n ui: {\n colorMode: false\n }\n}\n```\n\n...then `npx nuxi typecheck` fails with 8 errors.\n\n```\n[...snip]\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n18 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\n\nFound 8 errors in 8 files.\n\nErrors Files\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSwitch.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/content/ContentSearch.vue:89\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/DashboardSearch.vue:57\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10\n\n ERROR Process exited with non-zero status (2)\n```\n\n### Description\n\nI think that there probably needs to be a stub export set up in all cases? Or these files should not be gathered by the typechecking script?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3062,3063,3064,3067],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3065,"color":3066},"pro","5BD3CB",{"name":3027,"color":3028},3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.7399918,{"description":3074,"labels":3075,"number":3081,"owner":3030,"repository":3031,"state":3054,"title":3082,"updated_at":3083,"url":3084,"score":3085},"### Environment\n\nOperating System: Windows_NT\nNode Version: v20.18.0\nNuxt Version: -\nCLI Version: 3.14.0\nNitro Version: -\nPackage Manager: unknown\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nCannot use v3 on stackblitz so no repo.\n\n### Description\n\nSelect menu, dropdown, input menu etc are displayed under the modal.\nHappens when modal is fullscreen as well. Didn't check every component, but most are like this.\n\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3076,3077,3080],{"name":3021,"color":3022},{"name":3078,"color":3079},"duplicate","cfd3d7",{"name":3024,"color":3025},2378,"[Select/Dropdown/Modal] Modal z-index not properly configured","2024-10-21T10:15:45Z","https://github.com/nuxt/ui/issues/2378",0.74216145,{"description":3087,"labels":3088,"number":3091,"owner":3030,"repository":3031,"state":3054,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### Description\n\nIn V2 we had `primary` util classes out of the box. E.g. `text-primary`. What happend in V3 with this? Looking at the Nuxt UI website, I can see that this has been done with the var syntaxt. E.g. `text-(--ui-primary)`, but this doesn't really makes sense to me...\n\nI'm creating some pages in `.vue` files, where I'd like to have to flexility to write normal classes and not variables all over the place. I now came up with something like this.\n\n```css\n@theme {\n --color-primary: var(--ui-primary);\n\n --color-primary-50: var(--ui-color-primary-50);\n --color-primary-100: var(--ui-color-primary-100);\n --color-primary-200: var(--ui-color-primary-200);\n --color-primary-300: var(--ui-color-primary-300);\n --color-primary-400: var(--ui-color-primary-400);\n --color-primary-500: var(--ui-color-primary-500);\n --color-primary-600: var(--ui-color-primary-600);\n --color-primary-700: var(--ui-color-primary-700);\n --color-primary-800: var(--ui-color-primary-800);\n --color-primary-900: var(--ui-color-primary-900);\n --color-primary-950: var(--ui-color-primary-950);\n}\n```\n\nAdditionally, what I also find quite annoying is the fact that my intellisense is bloated with all tailwind colors. But like in V2, you can't easily disable them, since some colors are being used throughout the Nuxt UI config.\n\nWould be nice to have some more flexibility in this or some maybe some extra docs?",[3089,3090],{"name":3050,"color":3051},{"name":3024,"color":3025},3334,"Default classes like `primary`","2025-02-17T05:57:12Z","https://github.com/nuxt/ui/issues/3334",0.755244,{"description":3097,"labels":3098,"number":3101,"owner":3030,"repository":3031,"state":3054,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### 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```",[3099,3100],{"name":3021,"color":3022},{"name":3024,"color":3025},2766,"Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.7553157,{"description":3107,"labels":3108,"number":3116,"owner":3030,"repository":3031,"state":3054,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\r\n\r\nN/A\r\n\r\n### Version\r\n\r\nv2.18.3\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Description\r\n\r\nIf you look closely to the slider in the docs page: https://ui.nuxt.com/components/range\r\n\r\nThe slider looks okay when a lower value is set:\r\n\r\n\r\nIf the value is set around the maximum (>=95 ish?), the design breaks:\r\n\r\n\r\nWhich is even more visible when the value is 100:\r\n\r\n\r\nAnd it's prominent when the size is set to `2xl`:\r\n\r\n\r\n**Also notice that the foreground isn't respecting the border radius of the \"container\"**\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3109,3110,3111,3114],{"name":3021,"color":3022},{"name":3027,"color":3028},{"name":3112,"color":3113},"closed-by-bot","ededed",{"name":3115,"color":3113},"stale",2016,"URange's UI breaks after a certain value","2025-06-18T09:06:39Z","https://github.com/nuxt/ui/issues/2016",0.7556542,{"description":3122,"labels":3123,"number":3126,"owner":3030,"repository":3031,"state":3054,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### 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```",[3124,3125],{"name":3050,"color":3051},{"name":3024,"color":3025},3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.75608057,{"description":3132,"labels":3133,"number":3136,"owner":3030,"repository":3031,"state":3054,"title":3137,"updated_at":3138,"url":3139,"score":3140},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.0\n- Builder: -\n- User Config: compatibilityDate, future, devtools, modules, css\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.12, @nuxt/content@3.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\n```vue\n\u003Cscript setup>\nconst links = ref([\n {\n label: 'Components',\n to: '/components',\n active: route.path.startsWith('/components'),\n children: [\n {\n label: 'Sections',\n to: '/components/sections',\n icon: 'i-lucide-lightbulb',\n description:\n 'Sections are used to create a layout for your components.',\n active: route.path.startsWith('/components/sections')\n },\n {\n label: 'Snippets',\n to: '/components/snippets',\n icon: 'i-lucide-lightbulb',\n description:\n 'Snippets are used to create a layout for your components.',\n active: route.path.startsWith('/components/snippets')\n }\n ]\n }\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUHeader>\n \u003CUNavigationMenu :items=\"links\" />\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Description\n\nThe width of the menu depends on the amount of items it contains. When you have to few items, the width will be to small for the horizontal dropdown.\n\nNormally a dropdown is not related to the width of the menu, but in case of this animation I'm not sure enough to say how that could be fixed if the menu was not the relative parent.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3134,3135],{"name":3021,"color":3022},{"name":3024,"color":3025},3268,"`UNavigationMenu` dropdown has wrong relative parent","2025-05-23T13:02:31Z","https://github.com/nuxt/ui/issues/3268",0.7562978,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fHUW3Ez_ggHggWOaT5yDeyL3qmIDhoB04wdR845JLbZo":-1},"/nuxt/nuxt.com/1271"]