I'm making a Vue3 Single File Component for a custom list. In my single file component, I want to export the main default Vue component, but also the enum declaring what type of list it is:
child:
<template>
<Listbox>
<template #header>
<h5>{{listType}}</h5>
</template>
</Listbox>
</template>
<script lang="ts">
export enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
};
export default {
props: {
listType: PagesListType
},
data() {
return {
pages: [],
PagesListType
};
},
};
</script>
The enum only makes sense within the context of this component, so I don't want to put it in some other folder of types. It only relates to the behavior of this list. But when I try to do this in the parent component, it fails:
parent:
<template>
<div>
<PagesList :listType="PagesListType.RecentlyCreated"></PagesList>
<PagesList :listType="PagesListType.RecentlyModified"></PagesList>
<PagesList :listType="PagesListType.Starred"></PagesList>
</div>
</template>
<script lang="ts">
import PagesList, { PagesListType } from './PagesList.vue';
export default {
//parent component details
};
</script>
When I import the named PagesListType enum, it is just undefined. What do I need to do to export the named enum correctly? Thanks!
I opine you need to export enum into a separate file and import it in different files to use it. Where do you put this file depends on you mainly, how you want to structure your project.
For instance, types.ts file in the src folder can define and export the enum like:
export enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
}
you can use the enum anywhere by importing it like:
import { PagesListType } from '@/types';
you have to use @/ instead of src/. because of the src folder to @ in your TypeScript configuration available in the tsconfig.json file.
I was able to kinda get this to work by not exporting the enum, but adding it as a property to the exported default component:
child:
enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
};
export default {
props: {
listType: PagesListType
},
PagesListType,
data() {
return {
pages: [],
PagesListType
};
},
};
parent:
<template>
<div>
<PagesList :listType="created"></PagesList>
<PagesList :listType="modified"></PagesList>
<PagesList :listType="starred"></PagesList>
</div>
</template>
<script lang="ts">
import PagesList from './PagesList.vue';
export default {
computed: {
created() {
return PagesList.PagesListType.RecentlyCreated;
},
modified() {
return PagesList.PagesListType.RecentlyModified;
},
starred() {
return PagesList.PagesListType.Starred;
}
},
//other parent implementation details omitted
};
</script>