I am in the process of developing a Vue library as an NPM package with the intention of making it available for use in other projects.
The main entry point is main.ts
, which exposes a plugin and some commonly used functions. Here's a simplified example of what main.ts
looks like:
import Vue from 'vue'
import Button from '@/components/button.vue'
const myPlugin = {
install (vue: typeof Vue): void {
vue.component('the-button', Button)
}
}
function someFunction(a: number, b: number) {
return a + b
}
export { myPlugin, someFunction }
To build the project, I use the command
vue-cli-service build --target lib --name myLibrary src/main.ts
.
Now, my question is: how do I specify or generate typings correctly? It seems there are two options available:
Setting
"typings": "src/main.ts"
in mypackage.json
and using the .ts files themselves as type references. While it appears to work, I have not come across any examples of this approach being used, so I'm unsure if it's considered best practice?Enabling
"declaration": true
and setting"outDir": "types"
in my.tsconfig.json
. With some adjustments invue.config.js
as mentioned here, typings seem to be generated correctly. In this case, I would specify"typings": "types/main.d.ts"
in the package.json file. Is this the recommended method?