How to use Enums with Props?

Is there any way to get type checking with Enums. I know that if I pass a invalid value, it will ignore it and apply the default which is nice. But I don’t get any type checking.

<template>
  <section :class="theme">
    <div class="container" :class="layout">
      <slot/>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "nuxt-property-decorator";

export enum Layouts {
  Small = "small",
  Medium = "medium",
  Large = "large"
}

export enum Themes {
  Light = "light",
  Grey = "grey",
  Dark = "dark"
}

@Component({})
export default class BaseSection extends Vue {
  @Prop({ default: Layouts.Medium })
  private layout!: Layouts;
  @Prop({ default: Themes.Light }) private theme!: Themes;
}
</script>

<style scoped>
section {
  font-family: "Montserrat", sans-serif;
}

.container {
  padding: 0.5rem 2.5vw 1.5rem;
  max-width: 90rem;
  margin: 0 auto;
}

.small {
  padding: 2rem 0;
}

.medium {
  padding: 4rem 0;
}

.large {
  padding: 6rem 0;
}

.light {
  background-color: #fff;
}

.grey {
  background-color: #e1e4ea;
}

.dark {
  background-color: #010b19;
  color: #fff;
}
</style>

[drewcook]

If you are writing it in the SFC style with Vue 3, you can cast your prop type to a function that returns that of the enum type. This is how the syntax would look within the <script> tag:

<script lang="ts">
  enum Layouts {
    Small = 'small',
    Medium = 'medium',
    Large = 'large'
  }
  
  enum Themes {
    Light = "light",
    Grey = "grey",
    Dark = "dark"
  }
  
  export default {
    name: 'Layout',
    props: {
      layout: {
        type: String as () => Layouts // cast it
        default: Layouts.Medium
      },
      theme: {
        type: String as () => Theme // cast it
        default: Theme.Light
      },
    },
  }
</script>

This way, you can work with your enums within TypeScript and allow the API of the component to support native strings as props when implementing it throughout the application.

[kaorun343]

This library only supports the features that is available at Vue itself.

Instead, you can define EnumProp function like this below to avoid writing a lot of boilerplate code.

enum Fruit {
    Apple = 'Apple',
    Banana = 'Banana',
}
function EnumProp<T extends string | number>(d: T, e: Record<T, any>) {
    return {
        default: d,
        validator(v: T) {
            return e[v] !== undefined
        }
    }
}

@Component
class YourComponent extends Vue {
  @Prop(EnumProp(Fruit.Apple, Fruit)) fruit!: Fruit
}