Purpose of the Article: How to create a custom Vue component and publish it as an npm package

Intended Audience: Frontend Developers(Vuejs)

Tools and Technology: Vuejs, NPM or YARN, Visual Studio Code

Keywords: vue, plugin

Creation of custom plugin/library in Vuejs

As you work on Vuejs, you’ll see that there are custom-created components that you can use multiple times in the same or different applications. Or it may be the most useful or unique component that you have developed that you wish to share with others.

Time to publish your first part of the Vue component as an npm package or library.

In this blog let’s go through the detailed steps and publish the part of the Vue component as an npm package or library.

Prerequisites:

Vuejs (any version suitable) and NPM

Now Let’s go through the following steps and understand by taking the example of inactive user detection by creating the IdleTimer component and publishing it at npm.

Step 1: Initializing a project

Create an empty folder for our package and launch npm using the npm init.

When you use npm init it will ask a question as shown in the image below and it will generate a package.json file.

Note:-

1. package name and version should be different and unique.
2. entry point should be a file that installs components. in our case it’s install.js.

Step 2: Creation of IdleTimer Component

Create a new folder called src at the root of it add the subfolder folder name components, in which you create a new file IdleTimer.vue, and add the below code to this file.

Template

Javascript

In above component just we have added on mounted() a  window.mousemove() event to detect mousemove event, window.setInterval(this.CheckIdleTime,1000) calls CheckIdleTime method after every 1 sec which increments idleSecondsCounter++  and checks if idleSecondsCounter>idleTimeout if true will show alert popup.

In we are showing the remaining seconds once reaches 0 it will show an alert.

Good! so now using this component idle user will be detected if there is no mouse move event. Similarly, if you want to add more events or features to detect idle users you can refer reference(ArticleName:- How to use custom plugin mt-idle-timer for Detecting Idle Users in Vue App) where you can know how to use the custom-created plugin mt-idle-timer for idle user detection in your Vue apps which is an extension of our plugin i.e idle-timer-vue.

Let’s package it now!

Step 3: Add the install method

Before we start with this section let’s add an install.js file inside the root folder idle-timer. Now we will import our IdleTimer component and define our install method that registers our component with the name ‘idle-timer’ to the Vue instance.

Now your package is ready, all you have to do is publish your package at npm.

Step 4: Publishing your package on Npm

Create an account on npm by adding npm add user on the terminal. After running npm login, you need to enter your username, password, and email. you can also visit the https://www.npmjs.com/   link and an create account here.

After successful login run the npm publish command.

Congratulations! your package is published and you will be able to see it in npm.

To update your package, just increment the version number in your package.json and rerun npm publish.

How to use Published library:

Create a Vuejs Project:

You can install it like other packages:

In your main.js, or a similar entry point for your app:

In your App. vue file call your component in the template:

Run your app using npm run serve and you will see a timer of 10 sec and a message.

If there is no mousemove event for 10 sec alert will be shown.

Reference Link:

https://www.npmjs.com/

Hope you got the idea of the creation of the Vue component and publishing it to npm. so your component can be reusable and also save other developers time.

Thank you!