Creé una aplicación Vue 3 usando TypeScript. Dentro de la carpeta src creé una nueva enumeración color.ts

 enum Color { Red, Blue } export default Color;

Creé un componente 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>

y modificó el archivo Home.vue para

 <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>

Lamentablemente surgen varios problemas:

• En Home.vue, el Color importado no se usa, aunque estoy tratando de usarlo en la plantilla
• En ColorDisplay.vue, la enumeración parece ser un tipo de accesorio no válido

¿A alguien le importaría decirme cómo crear una enumeración, esperarla como una propiedad de componente y pasarla a componentes?