I am trying to create a vuejs component library in typescript with vue-class-component and vue-property-decorator with the following requirements:
- The library components should be written in class-style typescript.
- The library components should be exported as es6 modules to allow treeshaking in the project.
For The library I used the latest version of @vue/cli to scaffold the project. Within that library-project the components are working just fine.
The Application on the other hand is using a webpack-setup and in here I want to use the vue-components.
Usually when I want to build a typescript based library in es6, I use tsc to transpile the ts-files to es6 js-files. But following that approach the components do not know the templates. Is there a way to combine tsc with vue-template-compiler?
I found a another way to make this work, but I'm not satisfied at all by that approach:
I used "vue-cli-service build --target lib --name vue-lib ./src/index.ts"
This way the vue-cli-service will create a umd-bundle and commonjs-bundle as stated in the docs here. In the project I can use the component with an //@ts-ignore statement above. So I lose the declarations and the components are not in es6 syntax :/
To get a better understanding of the Issue I have, I've created a minimal example on github that you can find here:
Library: https://github.com/Sh4bbY/vue-lib
Application: https://github.com/Sh4bbY/vue-project