Publish Vue.js components on NPM powered by Falcon 9

Fastest way to publish a Vue.js component on NPM

No ES6 loader was hurted during this tutorial

Let’s say you have just created a new Vue.js component and you want to share it to the world, how can you do it?

The faster and easiest approach is to just place your *.vue file directly on NPM as it is.

Let’s see and example, shall we?

Remember, to create a NPM project you just need to type npm init on the shell in your working directory and follow the instructions.

In our case, our project’s structure looks like;

.
├── package.json
└── example.vue

We have just one component: example.vue. To publish on NPM, open package.json and put its patch into the main field. Of course, you can name your component as you want.

//package.json
{
  "name": "vue-npm-example",
 ...
  "main": "example.vue", // just put the path here
 ....
}

That’s it! We can now publish it.

npm publish

It works!

https://www.npmjs.com/package/vue-npm-example

Then you can use it anywhere by installing using the npm command line as always

npm install vue-npm-example

and then you can import it in your component

//Vue.js component
<template>
   <npm-example></npm-example>
</template>
<script>
import npmExample from 'vue-npm-example'
export default {
  name: 'app',
  components: {
    npmExample
  }
}
</script>

The component renders correctly.

Et voilà. We have now shared our component to the world.

Conclusion

Sharing a Vue.js component is really easy and can be done in seconds. Be aware that directly putting the .vue file on NPM may not be always the best thing to do since somebody may not be using the classic webpack configuration with the vue-loader. In that case, compiling it to ES5 using babel can increase the compatibility.

You can read more about it in this wonderful tutorial by Anthony Gore

How To Publish Your Vue.js Component On NPM

You may also find this articles interesting

Async in Vue.js - Part 1

From Draw.io to Vue.js app

Thank you for reading

Francesco Saverio