Vue.js - How to Build Your First Package & Publish It on NPM

We'll learn how to make our own plugin for Vue.js, and distribute it on NPM for everyone to use.

Plugins are what makes our lives as developers so much more productive. Most of our projects depend on them as they allow us to ship new features with great speed.

As stated in the Official Vue.js documentation, there is no strictly defined scope for a plugin. It simply adds global-level functionality to your project. But they typically fall into these five categories based on the things we are trying to achieve with them:

Add some global methods or properties (e.g. this is what Vuex or vue-router does).

Add one or more global assets (e.g. something like a stylesheet with/or a JavaScript library).

Add some component options by global mixin (e.g. this is what vue-html-to-paper does).

Add some Vue instance methods by attaching them to Vue.prototype (e.g. this is what vue-axios does).

A library that provides an API of its own, while at the same time injecting some combination of the above.

Now that you understand how handy plugins can be and what needs they can fulfill, let’s see how to add one to your project. Then, we’ll learn how to make our own and distribute it on NPM for everyone to use (yes, it’s going to be super fun!).

How to Add a Vue.js Plugin to Your Project.

To use your plugin after you’ve installed it with npm install (or yarn add), you need to go to your main.js file. This is the entry point that drives our Vue application. Import it and call the Vue.use() global method. One word of caution though: All plugins must instantiated before you start your app with new Vue().

Sometimes, you would like to customize how a plugin behaves. You can easily do so by passing some options to it when calling Vue.use(). Here is how it works:

Vue.use(YourPlugin,{
someOption:false,
anotherOption:false})

For instance with vue-chartist, you can choose the text to display when no data is available to properly draw the chart as follows:

Vue.use(VueChartist,{
messageNoData:"You have not enough data"});

Now let’s get back to the main event — building your first Vue.js plugin together. 💪

How to Build Your Own Vue.js Plugin from Scratch

If you are reading this, you are probably a frontend developer like me. And like any other frontend developer, you probably love having nice handsome buttons for your interfaces! So that’s what we’ll be building: a bunch of nice handsome buttons that we’ll be able to reuse. This will save us a lot of time for future projects! You’ll also have the knowledge to package all your remaining base components and why not release your own design system?

Step 1: Initializing the Plugin Structure

Let’s create an empty folder for our package and initialize NPM. This will generate a new package.json file. We’ll deal with it later.

$ mkdir nice-handsome-button &&cd nice-handsome-button
$ npm init
# The command above will create a new package.json# Press enter to answer all the following questions

Add a new folder called src at the root, in which you create a new file NiceHandsomeButton.vue. You can rapidly prototype with just a single *.vue file with the vue serve and vue buildcommands, but they require an additional global addon to be installed first:

npminstall -g @vue/cli
npminstall -g @vue/cli-service-global

Now if you run:

$ vue serve src/NiceHandsomeButton.vue

Visit http://localhost:8080/. A blank page should appear in your browser. Let’s work on our button component from now on! 👩‍💻👨‍💻

Step 2: Working on Our Handsome Button Component

Template

As this tutorial is not about learning how to write Vue components, I expect you to be familiar with the basics. The full code of our nice handsome button is available below (the template, the JavaScript logic and the style). Copy it, open NiceHandsomeButton.vue and paste the content inside.

Step 3: Write the Install Method

Before we start this section, let’s create an index.js file in your src folder.

Remember that Vue.use() global we talked about earlier? Well… what this function does is call the install() method that we will define now.

This function takes two parameters: the Vue constructor and the options object that a user can set. You can skip the last argument if you don’t need it as it is optional. But if you want to make your plugin customizable, remember this is where you will catch the different parameters:

Vue.use({
param:"something"})`;
// Then in your install method options.param will equal to "something"

Back to our pluging. Now in index.js, let’s import our component and define our install method.

private is set to false. This means your package is public (i.e. everyone is able to see and install it).

Choose a name for your package. You have to make sure that it’s not already taken.

The version number is set to 0.0.1. You will have to increment this number every time you publish an update for your package. If you are not familiar with semantic versioning, I highly recommend you read this.

Choose a description that describes your package in a few words. This will help other developers understand what pain your plugin solves.

The main is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module’s exports object will be returned.

The scripts property is a dictionary containing script commands that you can easily run with npm run.

The files property specifies which files should be published on NPM. It is usually a bad idea to publish everything. We’ll be using bili, so all files in dist folder should be included.

Bundling Your Library

In case you don’t know, bundling is the process of grouping all your code from all your files in your project into one single file. The reason behind this is simply to increase performance. This will also minify the code and accomplish some other cool things.

To do so, we’ll use Bili, a fast and zero-config library bundler that uses Rollup.js under the hood.

First make sure you have the latest version of Node.js (Bili requires Node.js 8 or above):

# Check your Node.js version

$ node -v

If the version of Node you’re using is outdated, head to node.js.org to update it.

Sharing Your Wonder on NPM

Now that your package is ready, the only thing left for you is to publish your package on NPM.

Start by creating an account on NPM (you can also run npm adduser if you prefer using the command lines). Then go to your terminal and run npm login. You will have to input your username, password and email.

You can check that you are logged in by typing npm whoami. This should display your username.

There is now only one terminal command that stands between you and publishing your package:

$ npm publish

And voilà! 🎉

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

Where to Go from There?

There is a lot you can do now and that’s awesome! You learned how to package your first component and publish it on NPM for everyone to use. But don’t stop now! Here are a few ideas that may inspire you:

Improving this button component by allowing people to set an icon on the left, managing other events like mouseenter or mouseout and so on.

Adding new components to this one and releasing a design system.

Building a different plugin like a directive or a mixin.

Easy peasy! Finally, we’re done. You can find the plugin’s final code on my GitHub. Feel free to give me your feedback or to reach me on Twitter @RifkiNada if you need help. Enjoy and have a good day! 👋

Nada Rifki

Nada is a JavaScript developer who likes to play with UI components to create interfaces with great UX. She specialises in Vue.js and loves sharing anything and everything that could help her fellow front-end web developers. Nada also dabbles in digital marketing, dance and Chinese.

Latest Stories
in Your Inbox

I agree to receive email communications from Progress Software or its Partners, containing information about Progress Software’s products. Consent may be withdrawn at any time.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.

Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.