Publishing VueJs Components to NPM

Front-end is all about components and re-usability these days. You create components, publish to the NPM and the world can start using it.

Modern front-end frameworks like Angular, Vuejs provides pre-configured skeletons to generate the node module or library projects. Its pretty much straight forward to create a library project for Angular and publish the same to the node modules though it’s quite tricky and challenging for Vuejs. As the official documentation is very confusing and finding a complete reference online is a nightmare(At least this was the case with me). So I tried different approaches to publish a node module for the VueJs and successfully performed the same with one of them which I am sharing through this article.

Steps to create NPM module

1. Create a Vuejs project using vue cli by running a command

vue init webpack my-project

configure the project attributes as per the requirement. I have selected below configuration for the project.

create vuejs project using cli

2. Create a your components and test it within this project.

Once you feel that the component is ready it’s now time to move it to the NPM

3. Create a folder where we will create an NPM project.

4. Run the command to start the NPM project

npm init

you will be prompted for a bunch of configuration questions. For most of them the defaults will work except the one for the entry file.

Provide the name of the entry file. We will include our component files in this entry file.

initializing npm project for vuejs

I have 3 files which creates my “autoComplete” component as shown in below snap.

component files

5. Include these files into the entry file (for me, its “autoCompleteComponent.vue”).

<template src="./autoComplete/autoComplete.html"></template>
<script src="./autoComplete/autoComplete.js"></script>
<style src="./autoComplete/autoComplete.css" scoped></style>

Finally my project structure will look something as snap below.

Final project structure

Now our project is NPM ready. We just need to publish it to npm.

6. Go to the root of the npm project and run

npm login

once logged in run

npm publish

Note: Every time you publish on npm, update the version number in the package.json

Now you can use this module just like any other node module in your project.

I hope this was an interesting and useful article!!!