I created a Vue 3 app using TypeScript. Inside the src folder I created a new enum color.ts

enum Color {
    Red,
    Blue
}

export default Color;

I created a component ColorDisplay.vue

<template>
  <div>
    {{ color }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Color from "../color";

export default defineComponent({
  props: {
      color: {
          type: Color,
          required: true
      }
  }
});
</script>

and modified the Home.vue file to

<template>
  <div>
    <color-display :color="Color.Red" />
    <color-display :color="Color.Blue" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ColorDisplay from "../components/ColorDisplay.vue";
import Color from "../color";

export default defineComponent({
  components: {
    'color-display': ColorDisplay,
  }
});
</script>

Unfortunately several problems come up:

• In Home.vue the imported Color is unused although I'm trying to use it in the template
• In ColorDisplay.vue the enum seems to be an invalid prop type

Would someone mind telling me how to create an enum, expect it as a component property and pass it to components?