How to publish a VueJS component on NPM?

For the past 3 months, I have worked on many parts of vuejs applications that have enabled me to greatly develop my VueJS knowledge. In Inventiv, one of my responsibility has been to publish Vue components on NPM.

In this tutorial, I will be showing you how you can publish and package a Vue component using vue-cli 3 on NPM.

You can find the plugin’s final code on my Github.

Let’s get started.

Create a Vue project

This step deals with the basic project setup. You need to install vue-cli to get started.

npm install -g @vue/cli

Now create a new project using vue-cli. Select default options, wait until vue-cli creates all necessary boilerplate files for you.

vue create v-breadcrumbs
# use default options
cd v-breadcrumbs

This is file structure you should have:

├───public
│     favicon.ico
│     index.html
└───src
    │ App.vue
    │ main.js
    ├───assets
    │ logo.png
    └───components
      HelloWorld.vue

Delete everything inside the src folder and delete the completely public folder. Because you won’t be needing them.

Now, let’s create vue component. Create a new file called breadcrumb.vue inside the src folder.

Now create index.js file in the src folder, this will be an entry point to our package.

Add the following code inside it.

The above code is a basic code for creating a vuejs plugin. You can find details about creating vue.js plugin here.

Now create a new folder called config, it should be next to the src folder in the root directory, and add webpack.config.js inside it.

Add following code inside webpack.config.js.

So the project structure is as follows:

│
├───config
│     webpack.config.js
└───src
      main.js
      simple-popover.vue

Configure package.json file

You will need to edit your package.json to include build command.

Now, let install minimum dev dependencies you need for your component. Install dev dependencies using the method above by adding the suffix -dev to --save.

npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm install --save-dev cross-env
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev node-sass
npm install --save-dev sass-loader
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev webpack-cli

At this point, libraries will be installed and package.json will be updated to look like the following.

I have added "build": "webpack --config config/webpack.config.js" to build our plugin with webpack. Now it’s ready to build.

Now let’s edit for NPM.

• name — Name for the package that will appear in NPM.
• version — Semantic version.
• description, author, repository, bugs, keywords, license — Additional info for use in NPM.
• scripts.build:npm — This is the build script for the package.

After that’s done, type npm run build, that will create a new folder called dist with all the files we need to push to NPM in order for other users to consume our component.

Publish the package to NPM

To publish on npmjs.com, you need a free NPM account. Create it from the command line or signup from npmjs.com.

npm adduser

Login and verify your email:

npm login

After that you have successfully logged in, let’s publish the package.

npm run build
npm publish

If everything works well, you should get the following message.

You can also confirm, by going to NPM package page

v-breadcrumbs

Now the package is ready to use by simply doing an NPM install.

How to use your published library?

We have completed the release of our UI component library. You can use it in any vue project:

npm install --save v-breadcrumps

After the plugin is installed, go to the root file of your app(such as src/main.js).

Add the following code:

You now can use your component in a template of Vue:

Conclusion

Finally, we’re done. You learned how to package your first component and publish it on NPM.

You can find the plugin’s final code on my GitHub. Feel free to give me your feedback.

Take care :) Happy codings!

References:

Plugins - Vue.js

Installation - Vue.js

Publish a VueJS component on NPM (it’s not scary)

How To Make a Breadcrumb Navigation