i'm trying to build my own Component-Library with Vue and Typescript. Vite is used for the bundling process. The Component-Lib does only have two components because I wanted to test the whole process before I dive deeper. So the components are basically buttons which have some props attached to them. The entry point for the bundling process is an index.ts which exports the components:
//[src/index.ts]
export { default as Button } from "./components/button/Button.vue";
export { default as CircleButton } from "./components/button/CircleButton.vue";
For example we have a button which imports the following types from the index.ts:
//[Button.vue]
import { ButtonType, ButtonFont } from "./index";
export interface ButtonProps {
value: string;
type: ButtonType;
fontType: ButtonFont;
}
const props = withDefaults(defineProps<ButtonProps>(), {
value: "Test",
type: ButtonType.Default,
fontType: ButtonFont.Medium,
});
//[src/components/button/index.ts]
export enum ButtonType {
Default = "default",
Primary = "primary",
}
export enum ButtonFont {
Small = "small",
Medium = "medium",
Big = "big",
}
export interface ButtonModel {
value: string;
type: ButtonType;
fontType: ButtonFont;
}
After bundling with : "vite build && vue-tsc --declaration --emitDeclarationOnly" i'll get the following output in my dist folder.
- App.vue.d.ts
- index.d.ts
- main.d.ts
- components/button/index.d.ts
- components/button/Button.d.ts
- components/button/CircleButton.d.ts
I'm currently fine with those d.ts files because they have the content that I expected. The index.ts which provide the enums and interfaces for the Button.vue results in
// [index.d.ts]
export declare enum ButtonType {
Default = "default",
Primary = "primary"
}
export declare enum ButtonFont {
Small = "small",
Medium = "medium",
Big = "big"
}
export interface ButtonModel {
value: string;
type: ButtonType;
fontType: ButtonFont;
}
So everything looks fine to me until this moment. I can point to e specific enum in Button.vue.d.ts and my IDE (VSCode) can jump to the location of the specific enum. When im now trying to use this library in a different project:
<script setup lang="ts">
import {Button} from 'library';
</script>
<template>
<Button :type="" value="Test"/>
</template>
then my IDE is saying that the type for the property type should be ButtonType or undefined. So thats what i expected. Everything is totally fine. enter image description here
But now my IDE cant access the enums and interfaces which were declared before and are necessary for the Button. I can't type <Button :type="ButtonType.Primary" /> becasue my IDE can't find the specific type.
So I imported the ButtonType
import { ButtonType } from "library/dist/components/button";
and therefore I can use the Button like this:
<Button :type="ButtonType.Primary" value="Test" />.
Now my IDE nows were the ButtonType is stored and finds the specific enum. But now is vite complaining because
Missing "./dist/components/button" export in "library" package.
Can someone help me with the solution of this problem or has simiular issues with this topic?