How to publish a library of Vue.js components? How to publish a library of Vue.js components? vue.js vue.js

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.