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