What do I need to do to publish my Vue components?

[curtisblackwell]

I've written a handful of components, and now I want to publish them to npm, so that I can use my components on separate, unrelated sites.

For simpler components, I know I can just add this to my package.json:

"main": "src/components/MyComponent.vue",

…but some of my components are comprised of multiple components. I'm pretty sure I could use Vue.extend() on a "parent" component, but it seems like there would be a better way than that.

I experimented with Browserify, too, and with that I achieved what I wanted by placing this in the file specified by package.json's main.

Component's main.js

exports.MyComponentA = require('./components/A.vue');
exports.MyComponentB = require('./components/B.vue');
exports.MyComponentC = require('./components/C.vue');
exports.MyComponentD = require('./components/D.vue');

Website's main.js

var MyComponent = require('vue-hex-accordion');

new Vue({
  components: {
    MyComponentA: MyComponent.MyComponentA,
    MyComponentB: MyComponent.MyComponentB,
    MyComponentC: MyComponent.MyComponentC,
    MyComponentD: MyComponent.MyComponentD,
  }
}

Is there something similar (or better) that can be done with Vue's webpack-simple template?

[curtisblackwell]

I'm not sure what I was doing earlier, but I've got this working now.

Component.vue (used as main in package.json

<script>
  import MyComponentA from './components/MyComponentA.vue';
  import MyComponentB from './components/MyComponentB.vue';
  import MyComponentC from './components/MyComponentC.vue';
  import MyComponentD from './components/MyComponentD.vue';

  export default {
    MyComponentA,
    MyComponentB,
    MyComponentC,
    MyComponentD,
  };
</script>

If there's a better/recommended way to go about this, please share.

[yyx990803]

Your original approach should work the same regardless of whether you are using Browserify or Webpack.

[samayo]

I answered the very same question on Stack Overflow. If anyone wants to know the process/steps for very basic demo, check this link: https://stackoverflow.com/questions/47754244/create-component-to-be-used-via-npm/47757050#47757050