\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2865,2868],{"name":2866,"color":2867},"bug","d73a4a",{"name":2869,"color":2870},"v3","49DCB8",2963,"nuxt","ui","closed","v3: UBadge conflict with UTabs","2024-12-23T21:08:29Z","https://github.com/nuxt/ui/issues/2963",0.7341409,{"description":2880,"labels":2881,"number":2888,"owner":2872,"repository":2872,"state":2874,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.15.1`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.15.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`\n- Runtime Modules: `@nuxt/ui@2.20.0`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jxcmyybr?file=app.vue\n\n### Describe the bug\n\nAfter looping though all items in useAppConfig().ui.colors, i get a false positive error after assigning the item to a UBadge's color property, the color is still applied.\n\n### Logs\n\n```shell-script\n[The expected type comes from property 'color' which is declared here on type 'Partial\u003C{ size: BadgeSize; class: any; ui: { base?: string | undefined; rounded?: string | undefined; font?: string | undefined; size?: DeepPartial\u003C{ xs: string; sm: string; md: string; lg: string; }, any> | undefined; ... 4 more ...; default?: DeepPartial\u003C...> | undefined; } & { ...; } & { ...; }; ... 7 more ...; t...'](https://github.com/nuxt/nuxt/issues/30535#issue-2781450805)\n```",[2882,2885],{"name":2883,"color":2884},"pending triage","E99695",{"name":2886,"color":2887},"needs reproduction","FBCA04",30535,"Type 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)","2025-01-12T23:05:37Z","https://github.com/nuxt/nuxt/issues/30535",0.7353283,{"description":2894,"labels":2895,"number":2901,"owner":2872,"repository":2873,"state":2874,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.3`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `bun@1.2.13`\n- Builder: `-`\n- User Config: `future`, `compatibilityDate`, `devtools`, `modules`, `css`, `components`, `i18n`, `icon`, `runtimeConfig`, `app`, `hooks`, `site`, `sitemap`, `pwa`, `fonts`\n- Runtime Modules: `@nuxt/eslint@1.4.0`, `@nuxt/fonts@0.11.4`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.7`, `@nuxt/ui@3.1.2`, `@nuxtjs/i18n@9.5.4`, `@vueuse/nuxt@13.2.0`, `@pinia/nuxt@0.11.0`, `@nuxtjs/sitemap@7.2.10`, `@vite-pwa/nuxt@1.0.1`\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\nhttps://codesandbox.io/p/devbox/wizardly-shamir-f8924y\n\n### Description\n\nThe `URadioGroup` component's table variant renders borders incorrectly in RTL mode. This appears to be a visual issue specific to RTL layouts. The expected result is that borders should match the appearance of the LTR layout, but they do not.\n\n### Additional context\n\nIn LTR Mode:\n\n\nIn RTL Mode:\n",[2896,2897,2898],{"name":2866,"color":2867},{"name":2869,"color":2870},{"name":2899,"color":2900},"triage","ffffff",4190,"URadioGroup table variant borders display incorrectly in RTL mode","2025-05-22T12:36:45Z","https://github.com/nuxt/ui/issues/4190",0.73920107,{"description":2907,"labels":2908,"number":2913,"owner":2872,"repository":2872,"state":2874,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify](https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify)\n\n### Steps to reproduce\n\nI cloned the whole Nuxt repo at: https://github.com/nuxt/nuxt.js\n\nThen navigated to: `nuxt.js/examples/with-vuetify`\n\nThen installed dependencies with `yarn install` and ran the server with `yarn dev`.\n\nThen opened `http://localhost:3000` and saw that no colors are being presented. It's all black and white.\n\nIf I have something like `\u003Cv-btn color=\"primary\">Something\u003C/v-btn>` the text is not visible as it is colored white.\n\n### What is expected ?\n\n\n\n\n### What is actually happening?\n\n\n\n\n### Additional comments?\n\nI'm on Linux Manjaro.\nNode 10.9.0.\nit's the same with Nuxt 1.4.2 or nuxt-edge.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7607\">#c7607\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2909,2910],{"name":2883,"color":2884},{"name":2911,"color":2912},"2.x","d4c5f9",3777,"Vuetify theme colors are not rendered properly","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3777",0.7410223,{"labels":2919,"number":2922,"owner":2872,"repository":2872,"state":2874,"title":2923,"updated_at":2924,"url":2925,"score":2926},[2920,2921],{"name":2883,"color":2884},{"name":2911,"color":2912},4204,"Inconsistent css in dev vs prod","2024-08-03T20:53:43Z","https://github.com/nuxt/nuxt/issues/4204",0.7427488,{"description":2928,"labels":2929,"number":2934,"owner":2872,"repository":2873,"state":2874,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.17.1`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.6.2`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `app`, `css`, `site`, `content`, `runtimeConfig`, `build`, `future`, `experimental`, `compatibilityDate`, `typescript`, `cookieControl`, `eslint`, `i18n`, `icon`, `image`, `ogImage`, `sitemap`, `turnstile`\n- Runtime Modules: `@vueuse/nuxt@13.1.0`, `@nuxt/eslint@1.3.0`, `@nuxt/ui-pro@3.1.0`, `@nuxtjs/sitemap@7.2.10`, `@nuxtjs/robots@5.2.10`, `@nuxt/content@3.5.1`, `nuxt-og-image@5.1.3`, `@nuxt/image@1.10.0`, `@nuxtjs/turnstile@1.0.0`, `@dargmuesli/nuxt-cookie-control@9.0.2`, `@nuxtjs/robots@5.2.10`, `nuxt-auth-utils@0.5.20`, `@nuxtjs/i18n@9.5.3`\n- Build Modules: `-`\n\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed for this situation\n\n### Description\n\nI'm hoping this just turns into a question, but I'm trying to figure out if custom variants are supported by TypeScript, I tried adding a variant to a button using this methodology:\n\n```ts\n button: {\n variants: {\n variant: {\n gradient: 'shadow-sm shadow-emerald-300/5 border border-emerald-300/10 hover:shadow hover:border-emerald-300 hover:shadow-emerald-300 transition-all duration-200 text-white bg-gradient-to-br from-logo-a via-logo-a-dark to-logo-a focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',\n },\n },\n defaultVariants: {\n color: 'neutral',\n variant: 'subtle',\n },\n default: {\n color: 'white',\n loadingIcon: 'i-mdi-loading',\n },\n },\n```\nI also tried adding it via `compoundVariants` as well - and while this strategy works fine in both situations, I get TS errors whenever I try to apply it at the component.\n\n```\nType '\"gradient\"' is not assignable to type '\"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\" | undefined'.ts-plugin(2322)\n```\n\n\u003Cimg width=\"975\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c38d6ba5-ccae-4609-bfdb-38c8d084a442\" />\n\nAm I doing something wrong? Or is TS support for variants just not completed yet?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2930,2931,2933],{"name":2866,"color":2867},{"name":2886,"color":2932},"CB47CF",{"name":2869,"color":2870},4046,"provide a custom TS-safe custom variant","2025-05-23T13:22:19Z","https://github.com/nuxt/ui/issues/4046",0.74428344,{"description":2940,"labels":2941,"number":2944,"owner":2872,"repository":2872,"state":2874,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Version\r\n\r\n[2.0.0-25371809.c4ff714](https://github.com/nuxt/nuxt.js/releases/tag/2.0.0-25371809.c4ff714)\r\n\r\n### Reproduction link\r\n\r\n[https://github.com/dojineko/reproduction-nuxt-edge-css-modules](https://github.com/dojineko/reproduction-nuxt-edge-css-modules)\r\n\r\n### Steps to reproduce\r\n\r\n1. npm install (or yarn)\r\n2. npx nuxt\r\n3. see http://localhost:3000, and you can see RED typography, but I want BLUE one.\r\n\r\n### What is expected ?\r\n\r\n\u003Cimg src=\"https://user-images.githubusercontent.com/1488898/38083586-fb7d2d80-3384-11e8-906c-5793ca7c3d97.png\" width=\"300\">\r\n\r\n### What is actually happening?\r\n\r\n\u003Cimg src=\"https://user-images.githubusercontent.com/1488898/38083587-fba47278-3384-11e8-84a5-32dc288e03e8.png\" width=\"300\">\r\n\r\n----\r\n\r\nIf you rewrite it as follows it will turn blue.\r\n\r\n```diff\r\n\u003Ctemplate>\r\n \u003Cdiv :class=\"$style.text\" style=\"font-size:32pt; color:red;\">\r\n EXPECT BLUE\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle module>\r\n- .text\r\n+ :local(.text) {\r\n color: blue !important;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n### Additional comments?\r\n\r\nI want cssModules to behave like the current version Nuxt.js.\r\n\r\nPerhaps it is necessary to set the vue-loader.\r\nThe README of vue-loader 15 beta had the following description.\r\nhttps://github.com/vuejs/vue-loader/tree/next#css-modules\r\n\r\n(and it seems not works scopedCSS too.... maybe)\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6794\">#c6794\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2942,2943],{"name":2883,"color":2884},{"name":2911,"color":2912},3149,"[edge] cssModules does not work","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3149",0.7489032,{"description":2950,"labels":2951,"number":2955,"owner":2872,"repository":2873,"state":2874,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: hooks, app, runtimeConfig, supabase, routeRules, sitemap, site, compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, @nuxtjs/supabase@1.5.1, @nuxtjs/seo@3.0.3, @storyblok/nuxt@6.2.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.2\n\n### Reproduction\n\nchange the border color(I assume should be this variable: --ui-border) in your project to red or blue and check if this color is applied when using only the classes: `border` or `border-b` without specifying the color.\n\n### Description\n\nI want to set the default border color, by default is very dark.\n\nI found that `--ui-border` variable is not used in the border style, maybe I could be wrong.\n\n\u003Cimg width=\"374\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f25806c-f5ea-43a1-a2a3-095d71448d43\" />\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2952,2953,2954],{"name":2866,"color":2867},{"name":2869,"color":2870},{"name":2899,"color":2900},4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.7494363,{"description":2961,"labels":2962,"number":2967,"owner":2872,"repository":2873,"state":2874,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Description\n\nBefore v3.1 I was able to use non-custom color names such as `green`, `red`, `cyan` on the `color` prop of all applicable components, for example:\n\n`\u003CUButton label=\"test\" color=\"red\" />` would render this:\n\n\n\nI achieved this by adding the color names on both `app.config.ts` and `nuxt.config.ts`:\n\n```js\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'green',\n neutral: 'zinc',\n red: 'red',\n }\n }\n})\n```\n```js\n...\n ui: {\n theme: {\n colors: [\n 'red'\n ]\n }\n },\n...\n```\nBut after 3.1 the same setup renders the buttom like this (I had to highlight the text):\n\n\n\nI can use custom names like `new` or `tertiary` as color name, and that would work, but I still have use cases for the previous mechanism, what's the new approach for this?\n",[2963,2966],{"name":2964,"color":2965},"question","d876e3",{"name":2869,"color":2870},4035,"How to use normal color names such as red or green after v3.1","2025-05-01T22:14:49Z","https://github.com/nuxt/ui/issues/4035",0.7501234,{"description":2973,"labels":2974,"number":2977,"owner":2872,"repository":2872,"state":2874,"title":2978,"updated_at":2946,"url":2979,"score":2980},"### Version\r\n\r\n[v1.4.0](https://github.com/nuxt.js/releases/tag/v1.4.0)\r\n\r\n### Reproduction link\r\n\r\n[https://fork-glider.glitch.me/](https://fork-glider.glitch.me/)\r\n\r\n### Steps to reproduce\r\n\r\n- Go to the link provided https://fork-glider.glitch.me/\r\n\r\nI use `vue-styled-components` for my styles but instead of being rendered properly, they flash the unstyled component before.\r\n\r\nLive example here: https://fork-glider.glitch.me/\r\nSource: https://glitch.com/edit/#!/fork-glider\r\n\r\nMy component looks like:\r\n\r\n```\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Capp-title>Welcome!\u003C/app-title>\r\n \u003Crouter-link to=\"/about\">About page\u003C/router-link>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import styled from 'vue-styled-components';\r\n\r\n const Title = styled.h1`\r\n font-size: 36px;\r\n color: red;\r\n `;\r\n\r\n export default {\r\n components: {\r\n \"app-title\": Title\r\n }\r\n };\r\n\u003C/script>\r\n```\r\n\r\nHere is a quick gif reproducing the issue:\r\n\r\n\r\n### What is expected ?\r\n\r\n- Title shows styled size and color\r\n\r\n### What is actually happening?\r\n\r\n- Title flashes original size and color before changing to styled one.\r\n\r\n(As this problem is not happening while using plain css, I am wondering if the issue has to do with the run-time of the `script` tag. 🤔)\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7294\">#c7294\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2975,2976],{"name":2883,"color":2884},{"name":2911,"color":2912},3479,"Unstyled css flashes while using vue-styled-components","https://github.com/nuxt/nuxt/issues/3479",0.7518134,["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fiu7nRSJNbFreCtbn653AgbrNjnkohKGWc35OvUFj6Os":-1},"/nuxt/ui/3378"]