Bundle and publish your Vue component like a pro

Update (2017/11/22): We now have library option which makes bundling components even easier.

To make your fantastic .vue component available for everyone who uses webpack, you need to bundle it into a valid CommonJS or ES module.

Given that you have a component MyComponent.vue :

<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'hello'
}
}
}
</script>

With Poi, let’s try this first:

poi build MyComponent.vue — format cjs

Basically now you have your component bundled in CommonJS format and hey it was populated at dist folder:

In most cases you would not want a random client.js in dist folder but index.js or with your component name. The sourcemap file and html file are not what we want either, let’s achieve this by:

This is equivalent to running poi build with following Poi config:

// poi.config.js
module.exports = {
entry: './MyComponent.vue',
filename: {
js: 'MyComponent.js'
},
sourceMap: false,
html: false,
format: 'cjs'
}

Publish

To publish you need to:

  • Point main to dist/MyComponent.js
  • Only include dist folder in files field in package.json

Here is how your package.json may look like:

{
"name": "vue-component",
"version": "1.0.0",
"author": "User <Email>",
"license": "MIT",
"main": "dist/MyComponent.js",
"files": ["dist"]
}

Finally, end users can enjoy your talent work:

import Component from 'vue-component'
// Use the component