\n \u003C/UFormField>\n\u003C/template>\n```\n[Here](https://skrinshoter.ru/vSpJnffwygq) is video demonstration :)\n\n### Description\n\n`placeOpen.value = true` is not opening dropdown after fetching places.",[2017,2020,2023],{"name":2018,"color":2019},"bug","d73a4a",{"name":2021,"color":2022},"v3","49DCB8",{"name":2024,"color":2025},"triage","ffffff",2724,"ui","UInputMenu property OPEN not working properly","2024-11-23T20:32:41Z","https://github.com/nuxt/ui/issues/2724",0.6779551,{"description":2033,"labels":2034,"number":2039,"owner":1997,"repository":2027,"state":2040,"title":2041,"updated_at":2042,"url":2043,"score":2044},"### Description\n\nIn v3, we seem to have lost any focus indication on Buttons. This looks intentional as I see `focus:outline-hidden` on the base. For a11y and good keyboard navigation, it's best practice to have a visual indication of focus: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#discernibleandpredictablekeyboardfocus\n\nIt seems we've taken a step backward from v2 in this regard. Was this intentional? Is the intent for users to add their own `focus-visible:*` classes via app config?",[2035,2038],{"name":2036,"color":2037},"question","d876e3",{"name":2021,"color":2022},3658,"closed","Button Focus Indication","2025-03-24T09:50:12Z","https://github.com/nuxt/ui/issues/3658",0.6312506,{"description":2046,"labels":2047,"number":2053,"owner":1997,"repository":2027,"state":2040,"title":2054,"updated_at":2055,"url":2056,"score":2057},"### Environment\n\n- Vue Version: 3.5.13\n- Package Mannger: bun\n- Bun Version: 1.1.45\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.0.0-alpha.11\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/morning-grass-t68z6n\n\n### Description\n\nAs shown in the example, components in Nuxt UI cannot be imported automatically. \nWhen unplugin-vue-components is imported and used separately, the auto import in Nuxt UI is disabled.\n\nHowever, unplugin-auto-import seems to work properly with Nuxt UI.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2048,2049,2050],{"name":2018,"color":2019},{"name":2021,"color":2022},{"name":2051,"color":2052},"vue","42b883",3151,"unplugin-vue-components conflict","2025-01-30T11:17:43Z","https://github.com/nuxt/ui/issues/3151",0.6561693,{"description":2059,"labels":2060,"number":2065,"owner":1997,"repository":2027,"state":2040,"title":2066,"updated_at":2067,"url":2068,"score":2069},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.12.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/devtools@1.6.4, @nuxt/ui@2.20.0, @vueuse/nuxt@12.2.0, @vueuse/motion/nuxt@2.2.6, @nuxtjs/device@3.2.4, @nuxt/image@1.8.1, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @vite-pwa/nuxt@0.10.6, nuxt-snackbar@1.1.2, nuxt-gtag@3.0.2, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n no reproduction\n\n### Description\n\nI notice there's a syntax error in the code;\nThe error is coming from a syntax error in the Headless UI Vue component code. Specifically, there's an unexpected semicolon in this line: \n(0,;__vite_ssr_import_5__.match)(i.value,{\nThis appears to be a build/compilation issue with the Headless UI Vue component. Let me check if there are any Headless UI Vue dependencies in the package.json.\n\nThe error appears when using nuxt v3.15.0 \nWith the previous \"nuxt\": \"3.14.1592\", no error. I 'm not sure if i should fill the bug Report here or in Nuxt directly!\n\n\n### Additional context\n\nUnexpected token ';'\n\n function g(e=\"\"){return e.split(/\\s+/).filter(t=>t.length>1)}let R=Symbol(\"TransitionContext\");var pe=(a=>(a.Visible=\"visible\",a.Hidden=\"hidden\",a))(pe||{});function me(){return (0,__vite_ssr_import_0__.inject)(R,null)!==null}function Te(){let e=(0,__vite_ssr_import_0__.inject)(R,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}function ge(){let e=(0,__vite_ssr_import_0__.inject)(N,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}let N=Symbol(\"NestingContext\");function L(e){return\"children\"in e?L(e.children):e.value.filter(({state:t})=>t===\"visible\").length>0}function Q(e){let t=(0,__vite_ssr_import_0__.ref)([]),a=(0,__vite_ssr_import_0__.ref)(!1);(0,__vite_ssr_import_0__.onMounted)(()=>a.value=!0),(0,__vite_ssr_import_0__.onUnmounted)(()=>a.value=!1);function s(n,r=__vite_ssr_import_6__.RenderStrategy.Hidden){let l=t.value.findIndex(({id:f})=>f===n);l!==-1&&((0,__vite_ssr_import_5__.match)(r,{[__vite_ssr_import_6__.RenderStrategy.Unmount](){t.value.splice(l,1)},[__vite_ssr_import_6__.RenderStrategy.Hidden](){t.value[l].state=\"hidden\"}}),!L(t)&&a.value&&(e==null||e()))}function h(n){let r=t.value.find(({id:l})=>l===n);return r?r.state!==\"visible\"&&(r.state=\"visible\"):t.value.push({id:n,state:\"visible\"}),()=>s(n,__vite_ssr_import_6__.RenderStrategy.Unmount)}return{children:t,register:h,unregister:s}}let W=__vite_ssr_import_6__.Features.RenderStrategy,he=(0,__vite_ssr_import_0__.defineComponent)({props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s,expose:h}){let n=(0,__vite_ssr_import_0__.ref)(0);function r(){n.value|=__vite_ssr_import_2__.State.Opening,t(\"beforeEnter\")}function l(){n.value&=~__vite_ssr_import_2__.State.Opening,t(\"afterEnter\")}function f(){n.value|=__vite_ssr_import_2__.State.Closing,t(\"beforeLeave\")}function S(){n.value&=~__vite_ssr_import_2__.State.Closing,t(\"afterLeave\")}if(!me()&&(0,__vite_ssr_import_2__.hasOpenClosed)())return()=>(0,__vite_ssr_import_0__.h)(Se,{...e,onBeforeEnter:r,onAfterEnter:l,onBeforeLeave:f,onAfterLeave:S},s);let d=(0,__vite_ssr_import_0__.ref)(null),y=(0,__vite_ssr_import_0__.computed)(()=>e.unmount?__vite_ssr_import_6__.RenderStrategy.Unmount:__vite_ssr_import_6__.RenderStrategy.Hidden);h({el:d,$el:d});let{show:v,appear:A}=Te(),{register:D,unregister:H}=ge(),i=(0,__vite_ssr_import_0__.ref)(v.value?\"visible\":\"hidden\"),I={value:!0},c=(0,__vite_ssr_import_1__.useId)(),b={value:!1},P=Q(()=>{!b.value&&i.value!==\"hidden\"&&(i.value=\"hidden\",H(c),S())});(0,__vite_ssr_import_0__.onMounted)(()=>{let o=D(c);(0,__vite_ssr_import_0__.onUnmounted)(o)}),(0,__vite_ssr_import_0__.watchEffect)(()=>{if(y.value===__vite_ssr_import_6__.RenderStrategy.Hidden&&c){if(v.value&&i.value!==\"visible\"){i.value=\"visible\";return}(0,;__vite_ssr_import_5__.match)(i.value,{[\"hidden\"]:()=>H(c),[\"visible\"]:()=>D(c)})}});let j=g(e.enter),M=g(e.enterFrom),X=g(e.enterTo),_=g(e.entered),Y=g(e.leave),Z=g(e.leaveFrom),ee=g(e.leaveTo);(0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{if(i.value===\"visible\"){let o=(0,__vite_ssr_import_3__.dom)(d);if(o instanceof Comment&&o.data===\"\")throw new Error(\"Did you forget to passthrough the ref to the actual DOM node?\")}})});function te(o){let E=I.value&&!A.value,p=(0,__vite_ssr_import_3__.dom)(d);!p||!(p instanceof HTMLElement)||E||(b.value=!0,v.value&&r(),v.value||f(),o(v.value?(0,__vite_ssr_import_7__.transition)(p,j,M,X,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&l()}):(0,__vite_ssr_import_7__.transition)(p,Y,Z,ee,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&(L(P)||(i.value=\"hidden\",H(c),S()))})))}return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watch)([v],(o,E,p)=>{te(p),I.value=!1},{immediate:!0})}),(0,__vite_ssr_import_0__.provide)(N,P),(0,__vite_ssr_import_2__.useOpenClosedProvider)((0,__vite_ssr_import_0__.computed)(()=>(0,__vite_ssr_import_5__.match)(i.value,{[\"visible\"]:__vite_ssr_import_2__.State.Open,[\"hidden\"]:__vite_ssr_import_2__.State.Closed})|n.value)),()=>{let{appear:o,show:E,enter:p,enterFrom:V,enterTo:Ce,entered:ye,leave:be,leaveFrom:Ee,leaveTo:Ve,...U}=e,ne={ref:d},re={...U,...A.value&&v.value&&__vite_ssr_import_4__.env.isServer?{class:(0,__vite_ssr_import_0__.normalizeClass)([a.class,U.class,...j,...M])}:{}};return (0,__vite_ssr_import_6__.render)({theirProps:re,ourProps:ne,slot:{},slots:s,attrs:a,features:W,visible:i.value===\"visible\",name:\"TransitionChild\"})}}}),ce=he,Se=(0,__vite_ssr_import_0__.defineComponent)({inheritAttrs:!1,props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s}){let h=(0,__vite_ssr_import_2__.useOpenClosed)(),n=(0,__vite_ssr_import_0__.computed)(()=>e.show===null&&h!==null?(h.value&__vite_ssr_import_2__.State.Open)===__vite_ssr_import_2__.State.Open:e.show);(0,__vite_ssr_import_0__.watchEffect)(()=>{if(![!0,!1].includes(n.value))throw new Error('A \u003CTransition /> is used but it is missing a :show=\"true | false\" prop.')});let r=(0,__vite_ssr_import_0__.ref)(n.value?\"visible\":\"hidden\"),l=Q(()=>{r.value=\"hidden\"}),f=(0,__vite_ssr_import_0__.ref)(!0),S={show:n,appear:(0,__vite_ssr_import_0__.computed)(()=>e.appear||!f.value)};return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{f.value=!1,n.value?r.value=\"visible\":L(l)||(r.value=\"hidden\")})}),(0,__vite_ssr_import_0__.provide)(N,l),(0,__vite_ssr_import_0__.provide)(R,S),()=>{let d=(0,__vite_ssr_import_6__.omit)(e,[\"show\",\"appear\",\"unmount\",\"onBeforeEnter\",\"onBeforeLeave\",\"onAfterEnter\",\"onAfterLeave\"]),y={unmount:e.unmount};return (0,__vite_ssr_import_6__.render)({ourProps:{...y,as:\"template\"},theirProps:{},slot:{},slots:{...s,default:()=>[(0,__vite_ssr_import_0__.h)(ce,{onBeforeEnter:()=>t(\"beforeEnter\"),onAfterEnter:()=>t(\"afterEnter\"),onBeforeLeave:()=>t(\"beforeLeave\"),onAfterLeave:()=>t(\"afterLeave\"),...a,...y,...d},s.default)]},attrs:{},features:W,visible:r.value===\"visible\",name:\"Transition\"})}}});\n\n\n SyntaxError: Unexpected token ';'\n at new Script (node:vm:116:7)\n at createScript (node:vm:268:10)\n at Object.runInThisContext (node:vm:316:10)\n at ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:398:19)\n at ViteNodeRunner.directRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:381:16) \n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async ViteNodeRunner.cachedRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:206:14) \n at async ViteNodeRunner.dependencyRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:259:12)\n at async node_modules\\@headlessui\\vue\\dist\\headlessui.esm.js:23:32\n at async ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:399:5) \n\n### Logs\n\n```shell-script\n\n```",[2061,2062],{"name":2018,"color":2019},{"name":2063,"color":2064},"duplicate","cfd3d7",2972,"Syntax error in the Headless UI Vue component code","2024-12-25T10:39:30Z","https://github.com/nuxt/ui/issues/2972",0.6571775,{"description":2071,"labels":2072,"number":2075,"owner":1997,"repository":2027,"state":2040,"title":2076,"updated_at":2077,"url":2078,"score":2079},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nhow to add second icon on the right for button in UTab component\n\n\n\nSOLVE: need to use the #trailing slot, I didn't see it in the documentation\n\n",[2073,2074],{"name":2036,"color":2037},{"name":2021,"color":2022},2717,"second icon in UTab component","2024-12-09T11:15:15Z","https://github.com/nuxt/ui/issues/2717",0.6673838,{"description":2081,"labels":2082,"number":2085,"owner":1997,"repository":2027,"state":2040,"title":2086,"updated_at":2087,"url":2088,"score":2089},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9\n- Build Modules: -\n------------------------------\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\nCreate a brand new Nuxt project with NuxtUI 3\n\nconfig:\n```js\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n\tcompatibilityDate: \"2024-11-01\",\n\tdevtools: { enabled: true },\n\tfuture: { compatibilityVersion: 4 },\n\tmodules: [\"@nuxt/ui\"],\n\tcss: [\"~/assets/css/main.css\"],\n\n});\n```\napp.vue:\n```vue\n\u003Ctemplate>\n\t\u003CUApp>\n\t\t\u003CNuxtPage />\n\t\u003C/UApp>\n\u003C/template>\n```\n\n\nRemoving the `UApp` for a `div` or `NuxtLayout` works\n\n### Description\n\nCrashes the app. The error seems to be related to the Button component, but even on a brand-new Nuxt project with no content (without even a page) it show the error below:\n\nWhen I use NuxtLayout (or other) instead of `UApp` and use the `UButton` component anywhere, it also cause the same issue\n\n### Logs\n\n```shell-script\n500\n[vite-node] [plugin:vite:vue] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/runtime/components/Button.vue\n\n\u003Cscript lang=\"ts\">\nimport { tv, type VariantProps } from 'tailwind-variants'\nimport type { AppConfig } from '@nuxt/schema'\nimport _appConfig from '#build/app.config'\nimport theme from '#build/ui/button'\nimport type { LinkProps } from './Link.vue'\nimport type { UseComponentIconsProps } from '../composables/useComponentIcons'\nimport { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'\nimport type { AvatarProps } from '../types'\nimport type { PartialString } from '../types/utils'\n\nconst appConfig = _appConfig as AppConfig & { ui: { button: Partial\u003Ctypeof theme> } }\n\nconst button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })\n\ntype ButtonVariants = VariantProps\u003Ctypeof button>\n\nexport interface ButtonProps extends UseComponentIconsProps, Omit\u003CLinkProps, 'raw' | 'custom'> {\n label?: string\n color?: ButtonVariants['color']\n variant?: ButtonVariants['variant']\n size?: ButtonVariants['size']\n /** Render the button with equal padding on all sides. */\n square?: boolean\n /** Render the button full width. */\n block?: boolean\n /** Set loading state automatically based on the `@click` promise state */\n loadingAuto?: boolean\n onClick?: ((event: MouseEvent) => void | Promise\u003Cvoid>) | Array\u003C((event: MouseEvent) => void | Promise\u003Cvoid>)>\n class?: any\n ui?: PartialString\u003Ctypeof button.slots>\n}\n\n// Injects props to use as default in the devtools playground.\nextendDevtoolsMeta\u003CButtonProps>({ defaultProps: { label: 'Click me!' } })\n\nexport interface ButtonSlots {\n leading(props?: {}): any\n default(props?: {}): any\n trailing(props?: {}): any\n}\n\u003C/script>\n\n\u003Cscript setup lang=\"ts\">\nimport { type Ref, computed, ref, inject } from 'vue'\nimport { useForwardProps } from 'radix-vue'\nimport { useComponentIcons } from '../composables/useComponentIcons'\nimport { useButtonGroup } from '../composables/useButtonGroup'\nimport { formLoadingInjectionKey } from '../composables/useFormField'\nimport { omit } from '../utils'\nimport { pickLinkProps } from '../utils/link'\nimport UIcon from './Icon.vue'\nimport UAvatar from './Avatar.vue'\nimport ULink from './Link.vue'\n\nconst props = defineProps\u003CButtonProps>()\nconst slots = defineSlots\u003CButtonSlots>()\n\nconst linkProps = useForwardProps(pickLinkProps(props))\n\nconst { orientation, size: buttonSize } = useButtonGroup\u003CButtonProps>(props)\n\nconst loadingAutoState = ref(false)\nconst formLoading = inject\u003CRef\u003Cboolean> | undefined>(formLoadingInjectionKey, undefined)\n\nasync function onClickWrapper(event: MouseEvent) {\n loadingAutoState.value = true\n const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]\n try {\n await Promise.all(callbacks.map(fn => fn?.(event)))\n } finally {\n loadingAutoState.value = false\n }\n}\n\nconst isLoading = computed(() => {\n return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))\n})\n\nconst { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(\n computed(() => ({ ...props, loading: isLoading.value }))\n)\n\nconst ui = computed(() => button({\n color: props.color,\n variant: props.variant,\n size: buttonSize.value,\n loading: isLoading.value,\n block: props.block,\n square: props.square || (!slots.default && !props.label),\n leading: isLeading.value,\n trailing: isTrailing.value,\n buttonGroup: orientation.value\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CULink\n :type=\"type\"\n :disabled=\"disabled || isLoading\"\n :class=\"ui.base({ class: [props.class, props.ui?.base] })\"\n v-bind=\"omit(linkProps, ['type', 'disabled'])\"\n raw\n @click=\"onClickWrapper\"\n >\n \u003Cslot name=\"leading\">\n \u003CUIcon v-if=\"isLeading && leadingIconName\" :name=\"leadingIconName\" :class=\"ui.leadingIcon({ class: props.ui?.leadingIcon })\" />\n \u003CUAvatar v-else-if=\"!!avatar\" :size=\"((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])\" v-bind=\"avatar\" :class=\"ui.leadingAvatar({ class: props.ui?.leadingAvatar })\" />\n \u003C/slot>\n\n \u003Cslot>\n \u003Cspan v-if=\"label\" :class=\"ui.label({ class: props.ui?.label })\" data-v-inspector=\"../../../node_modules/@nuxt/ui/dist/runtime/components/Button.vue:112:7\">\n {{ label }}\n \u003C/span>\n \u003C/slot>\n\n \u003Cslot name=\"trailing\">\n \u003CUIcon v-if=\"isTrailing && trailingIconName\" :name=\"trailingIconName\" :class=\"ui.trailingIcon({ class: props.ui?.trailingIcon })\" />\n \u003C/slot>\n \u003C/ULink>\n\u003C/template>\n\nat /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/runtime/components/Button.vue\n```\n\n### Additional context\n\n_No response_\n```",[2083,2084],{"name":2018,"color":2019},{"name":2021,"color":2022},2824,"`UApp` / `UButton` crashes the whole app","2024-12-05T13:49:01Z","https://github.com/nuxt/ui/issues/2824",0.6704127,{"description":2091,"labels":2092,"number":2095,"owner":1997,"repository":2027,"state":2040,"title":2096,"updated_at":2097,"url":2098,"score":2099},"### Description\n\nIn the current implementation the color schemes for primary and success, as well as secondary and info, are overlapping. This creates ambiguity and limits customization options for users who wish to differentiate these colors for better visual distinction.\n\nPrimary and Success : Both use the same green color palette.\nSecondary and Info : Both use the same blue color palette.\nThis overlap forces developers to manually override the CSS variables in the root to achieve distinct colors for each category. For example:\n\n```\n:root {\n--ui-color-primary-50: #ccf1ef;\n--ui-color-primary-100: #99e3df;\n--ui-color-primary-200: #66d5ce;\n--ui-color-primary-300: #33c7be;\n--ui-color-primary-400: #00b9ae;\n--ui-color-primary-500: #00948b;\n--ui-color-primary-600: #006f68;\n--ui-color-primary-700: #004a46;\n--ui-color-primary-800: #002523;\n--ui-color-primary-900: #001311;\n--ui-color-primary-950: #000a08;\n\n--ui-color-secondary-50: #fff6ca;\n--ui-color-secondary-100: #fff3b6;\n--ui-color-secondary-200: #ffefa1;\n--ui-color-secondary-300: #ffec8d;\n--ui-color-secondary-400: #fee564;\n--ui-color-secondary-500: #fedf3c;\n--ui-color-secondary-600: #fed813;\n--ui-color-secondary-700: #e2be01;\n--ui-color-secondary-800: #b49701;\n--ui-color-secondary-900: #9e8401;\n--ui-color-secondary-950: #7a6e01;\n}\n```\n\nDoes it a correct way?",[2093,2094],{"name":2036,"color":2037},{"name":2021,"color":2022},3286,"Request for Distinct Color Schemes for Primary/Success and Secondary/Info","2025-02-11T04:33:39Z","https://github.com/nuxt/ui/issues/3286",0.67524743,{"description":2101,"labels":2102,"number":2104,"owner":1997,"repository":2027,"state":2040,"title":2105,"updated_at":2106,"url":2107,"score":2108},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nHello,\n\nI've been trying to make PurgeCSS work properly with Nuxt UI and the deeper I get the more cumbersome of a process it becomes.\n\nIt seems that even though I provided the paths towards the NuxtUI components to PurgeCSS, it still removes CSS that should be used by the specified components, as well as colors which should be available out of the box (i.e yellow). I've even tried to safelist different classes, but again, the more I dig through it the more classes I eventually have to add - so I will be ending up with a never ending list of classes.\n\nAre there any official guidelines on how PurgeCSS should be configured so that it works correctly for the NuxtUI components/colors?\n\nCurrent config:\n\n```javascript\ndefineNuxtConfig({\n...\n purgecss: {\n safelist: [... big list ...],\n paths: [\n './components/**/*.vue',\n './layouts/**/*.vue',\n './pages/**/*.vue',\n './plugins/**/*.js',\n './nuxt.config.ts',\n './app.config.ts',\n './node_modules/@nuxt/ui/dist/runtime/components/**/*.vue',\n './node_modules/@nuxt/ui/dist/runtime/ui.config/**/*.js',\n './node_modules/@nuxt/ui/dist/runtime/utils/*.js',\n ],\n content: [\n './components/**/*.vue',\n './layouts/**/*.vue',\n './pages/**/*.vue',\n './plugins/**/*.js',\n './nuxt.config.ts',\n './app.config.ts',\n './node_modules/@nuxt/ui/dist/runtime/components/**/*.vue',\n './node_modules/@nuxt/ui/dist/runtime/ui.config/**/*.js',\n './node_modules/@nuxt/ui/dist/runtime/utils/*.js',\n ],\n}\n});\n```\n\nThanks in advance :-)",[2103],{"name":2036,"color":2037},2850,"Nuxt UI & PurgeCSS","2025-03-28T17:38:11Z","https://github.com/nuxt/ui/issues/2850",0.6759324,["Reactive",2110],{},["Set"],["ShallowReactive",2113],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"fbAom1s8GqCbM6qnND1z3ng05zdNxe_GxMkGSRPRKRc":-1},"/nuxt/ui/3202"]