Vue Props as enums

component.vue

<script setup lang="ts">
enum VariantEnum {
  PRIMARY = 'primary',
  SECONDARY = 'secondary',
}

// Turn enums into string union types!
type TypeFromEnum<T> = T extends `${infer U}` ? U : never;

type VariantType = TypeFromEnum<VariantEnum>;
//     ^? type VariantType = 'primary' | 'secondary'

withDefaults(
  defineProps<{
    variant: VariantType; // as a type 💫
  }>(),
  {
    variant: VariantEnum.PRIMARY, // as a value ⭐️
  }
);
</script>