Function: mergeClasses()

function mergeClasses(
  original:
    | string
    | (
        | string
        | {
            [key: string]: boolean;
          }
      )[]
    | undefined,
  additional:
    | string
    | (
        | string
        | {
            [key: string]: boolean;
          }
      )[]
    | undefined,
  ...more: (
    | string
    | (
        | string
        | {
            [key: string]: boolean;
          }
      )[]
    | undefined
  )[]
): (
  | string
  | {
      [key: string]: boolean;
    }
)[];

Merges CSS classes from multiple sources into a single array suitable for Vue's class binding. This utility is designed for component development where you need to combine built-in component classes with user-provided class additions (not overrides) while maintaining Vue's flexible class binding format.

The function preserves the exact structure expected by Vue's class binding system and handles deep flattening of nested arrays while maintaining object references for conditional classes. All input formats are normalized into a consistent output format that Vue can process efficiently.

Parameters

Parameter	Type	Description
original	| string | ( | string | { [key: string]: boolean; })[] | undefined	The base classes (typically from component internals)
additional	| string | ( | string | { [key: string]: boolean; })[] | undefined	User-provided classes to add to the base classes
...more	( | string | ( | string | { [key: string]: boolean; })[] | undefined)[]	Additional class sources to merge (supports unlimited arguments)

Returns

( | string | { [key: string]: boolean; })[]

A flattened array of strings and conditional class objects ready for Vue's class binding

Example

// Component usage - merging internal classes with user classes
const componentClasses = ["btn", "btn-primary"];
const userClasses = "btn-large";
const conditionalClasses = { "btn-disabled": isDisabled };

const finalClasses = mergeClasses(
  componentClasses,
  userClasses,
  conditionalClasses,
);
// Result: ['btn', 'btn-primary', 'btn-large', { 'btn-disabled': true }]

// In Vue component template
h("button", { class: mergeClasses(baseClasses, props.class) });

// Complex nested structure flattening
const nestedClasses = [
  "base",
  ["nested-1", { "conditional-1": true }],
  [["deeply-nested", "another"], { "conditional-2": false }],
];
const flattened = mergeClasses(nestedClasses);
// Result: ['base', 'nested-1', { 'conditional-1': true }, 'deeply-nested', 'another', { 'conditional-2': false }]