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

button.variants.variant

works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a

compoundVariant

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'
      }],
    },
  },
});

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?

Nuxt•7mo 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

button.variants.variant

works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a

compoundVariant

compoundVariant

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

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

NuxtUI3 Custom Variant and Compound Variants Issue

Similar Threads

NuxtUI3 Custom Variant and Compound Variants Issue

Similar Threads

Similar Threads

Similar Threads