EGOIST
EGOIST
Sep 27, 2017 · 2 min read

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

Poi - delightful web development

Making web app in a delightful way.

EGOIST

Written by

EGOIST

I am GOD’S CHILD.

Poi - delightful web development

Making web app in a delightful way.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade