How to publish a library of Vue.js components?

Question

I am working on a project containing a Vuex module and an abstract components that users can extend from.

I would love to publish this on NPM to clean up my codebase and pull this away from my project as a solid well tested module. I have specified the main file in package.json to load an index which imports everything I want to expose:

https://github.com/stephan-v/vue-search-filters/

The index contains this at the moment:

import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue';
import Search from './src/store/modules/search';

module.exports = {
    AbstractFilter,
    Search
};

For this to work I need to transpile this since a babel compiler normally won't transpile files imported from node_modules(Correct me if I am wrong here). Besides that I would probably be a good idea to do this so it can be used by different systems.

How do I transpile only the files that I need though with Webpack? Do I have to create a separate config for this?

What does a config like that look like? I know the vue-cli has a build command for one single file component but this is a bit different.

Any tips or suggestions on how to transpile something like this are welcome.

Edit

This seems like a good start as well:

https://github.com/Akryum/vue-share-components

The most import thing for Webpack users to notice is that you need to transpile your files in UMD which can be set by:

libraryTarget: 'umd'

This will make sure your are transpiling for Universal Module Definition, meaning your code will work in different environments like AMD,CommonJS, as a simple script tag, etc.

Besides that it is import to provide the externals property in webpack:

externals: {}

Here you can define which libraries your project users but should not be built into your dist file. For example you don't want the Vue library to be compiled / transpiled into the source of your NPM package.

I will research a bit more, so far the best options looks like to create a custom project myself If I want flexibility and unit testing.

Webpack docs

This is also a useful page which goes in depth about how to publish something with Webpack:

https://webpack.js.org/guides/author-libraries/#add-librarytarget

I am baffled at how much of a pain it is to simply create a vue components library that uses SCF files with Typescript blocks, and transpiles itself to esm modules. You'd think that nowadays, given the maturity of each tools, this would be a breeze, but no! Makes me want to scream... — Crono, Jan 04 '19 at 15:47

euvl · Accepted Answer · 2017-07-25T14:31:55.103

18

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.

edited Jul 25 '17 at 14:31

answered Jul 25 '17 at 09:56

euvl

4,716
2
25
30

Thanks this looks like a very good start and probably what I am looking for. I will check it out tonight and let you know if it answers my question. – Stephan-v Jul 25 '17 at 10:19
Just curious, did you create the webpack config for this project yourself or did you took parts from another project that also builds for `umd`? – Stephan-v Jul 25 '17 at 13:44
1

Also, how do you develop with this project? There is no watcher and no import of Vue.js. It looks like you can only develop by hooking this entire project up to a repo which actually imports Vue how do you deal with this? I would preferably have a completely independent project so I can run unit tests, e2e tests, etc. as well. – Stephan-v Jul 25 '17 at 14:17
@Stephan-v at first I used vue cli webpack-simple config, because I could not understand a thing in webpack conf :D But with doing more projects & getting more experience with it - I've tweaked it to fit my needs. – euvl Jul 25 '17 at 14:19
@Stephan-v the setup I have found convenient for myself is: i build the library manually when i make changes using `npm run build` and i have `demo` folder where I run `npm run dev` once and test the changes using my regression tests (basically my demo use-cases). – euvl Jul 25 '17 at 14:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150101/discussion-between-yev-and-stephan-v). – euvl Jul 25 '17 at 14:33

score 0 · Answer 2 · answered Jul 25 '17 at 09:39

0

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.

answered Jul 25 '17 at 09:39

Reiner

1,621
1
16
22

Rollup is just another bundling tool though, I would like to stay within the Webpack eco system since that is what I am already using. I know how to transpile files I just need a way to transpile each file separately into generic ES5 files suitable for all module systems. Thanks for your answer though. – Stephan-v Jul 25 '17 at 09:42

How to publish a library of Vue.js components?

2 Answers2

Linked