How to publish a library of Vue.js components?
The best way probably will be to build the module and set main
in your package.json
to my_dist/my_index.js
. Otherwise every project that will use your module will have to add it to include
which is tedious.
You will also want your webpack build to follow UMD (Universal Module Definition). For that you must set libraryTarget
to umd
:
...output: { filename: 'index.js', library:'my_lib_name', libraryTarget: 'umd'},...
Also a good thing will be to add Vue
to externals
so that you didn't pack extra 200kb of vue library.
externals: { vue: 'vue'},resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }}
And add it to peerDependencies
in package.json
:
..."peerDependencies": { "vue": "^2.0.0"},"devDependencies": { "vue": "^2.0.0"}...
If you need an existing example of how to pack a vue.js component, you can take a look in one of the modules I maintain:
https://github.com/euvl/vue-js-popover
Particularly webpack.config.js
and package.json
will be interesting for you.
I was searching for a similar solution and found rollup https://github.com/thgh/rollup-plugin-vue2 (but was not able to make it work) and this component https://github.com/leftstick/vue-expand-ball where all the component code gets compiled to one reusable js-file.I know that's not a proper solution but maybe it's sufficient for your needs.