NuxtN
Nuxt•5mo ago•
4 replies
Swart

NuxtUI3 Custom Variant and Compound Variants Issue

Using Nuxt UI 3, I'm having issues styling a custom variant in a specific color.

Defining the custom variant in the button.variants.variant works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a compoundVariant that includes the custom variant, intellisense breaks and the project no longer builds, as it appears the compoundVariants object is expecting the fixed list of variants specified in the base button.

Example config:
export default defineAppConfig({
  ui: {
    colors: {
      primary: "green",
      neutral: "slate",
    },
    button: {
      variants: {
        variant: {
          custom: {
            label: "uppercase",
          },
        },
      },
      compoundVariants: [{
        variant: 'custom'
        color: 'secondary',
        class: 'text-fuschia-500'
      }],
    },
  },
});


Repro here (this is using nuxt3, but it also reproduces on nuxt4 as well) -
https://codesandbox.io/p/devbox/quizzical-keldysh-wtw7zm

Is this a bug, or am I not configuring things for custom variants correctly?
Was this page helpful?