You’ve probably NPM someone else’s package thousands of times, but have you ever created, distributed, and used your own NPM package?

  • How to create, publish and use your own VueJS Component library on NPM using @vue/ CLI 3.0
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

Although I’ve been using vue.js for work for a while now, I’ve never had to publish components on NPM. But lately it’s been a pain to rewrite components in different projects, so by the time I started working on my third project with vue.js, I decided it was time for some highly configurable and reusable components.

First, you need to install vue-CLI to get started.


npm install -g @vue/cli
# or
yarn global add @vue/cli

vue create my-vue-library

Copy the code

We are using vuE-CLI 3.0 beta. You might see a warning on Github’s Readme.md: “Don’t use it in production unless you’re adventurous.” Apparently I’m adventurous, haha.

Your control surface should now look like this:

Now you just need to start doing the following:


npm run serve

Copy the code

Now to create a simple component, look at an example of a Banner component.

<template>
  <div class="banner" :style="bannerStyles" :class="`banner__${position}`">
    <slot></slot>
  </div>
</template>

<script>
const defaultStyles = {
  left: 0.right: 0};export default {
  props: {
    position: {
      type: String.default: 'top',
      validator(position) {
        return ['top'.'bottom'].indexOf(position) > - 1; }},styles: {
      type: Object.default: (a)= > ({}),
    },
  },
  data() {
    return {
      bannerStyles: {... defaultStyles, ... this.styles, }, }; }};</script>

<style lang="scss" scoped>
.banner {
  padding: 12px;
  background-color: #fcf6cd;
  color: #f6a623;
  text-align: left;
  position: fixed;
  z-index: 2;
}
.banner__top {
  top: 0;
}
.banner__bottom {
  bottom: 0;
}
</style>
Copy the code

Once you have registered the component as Banner, you can simply use it in your template:

<Banner>Fundebug: The most professional application error monitoring platform!</Banner>
Copy the code

You can view a demo of this component at CodeSandbox

Fundebug error real-time monitoring for your Vue project escort!

Now, if you want to use this component through NPM, you have to do a few things.

Step 1 – Set up the library build

You need to use vue-CLI to build your components into libraries. Add vue-cli-service build –target lib –name myLib [entry] to your package.json script.

By default, [Entry] is your app.vue, but you can change it to a relative path to any files you import into these components. You may or may not choose to register these components globally, but if I were you, I would prefix them with my library name. When programmers use components, the less code the better.

I have added the build-bundle to my script so that I can run NPM run build-bundle to create my library package.

Step 2 – Point to the output file in package.json

To ensure that the main property in package.json points to the output file correctly. I prefer to use the CommonJS package.

Step 3 – Add/log in as user on NPM

Make sure you register with NPM. NPM adduser registers a new user and NPM login logs in as an existing user.

Step 4 – Verify NPM user credentials

Type NPM whoami to verify your username.

Step 5 – Name your component library

To choose a name for your package, you must make sure it is not already in use. Make sure to put it in your package.json.

Step 6 – Build

Build the bundled software by executing the package scripts added in Step 1.


npm run build-bundle

Copy the code

Step 7 – Publish the component library on NPM

Run NPM publish — Access Public to publish the library for public access.

That’s it. You’ve finished publishing your Vue component library on NPM!

Step 8 – How do I use your newly released library

Install the component library from NPM and import the components into the code. Installation:

NPM install --save [your library name]Copy the code

Where [your library name] is the name of the library you gave in step 5.

From your main.js or similar entry point, simply import your library using the following command:


import 'Your library name';

Copy the code

Now you can start using your components because we registered them globally in the first step.

For our example component Banner, the component name is FlockBanner when we register the component. So, you can use it directly in your template:


<flock-banner>This is an example of your Banner</flock-banner>

Copy the code

Using the above mentioned component library view instance: https://codesandbox.io/s/n9n7yy2lwp

We’re done with the whole process. After the vue.js team came up with CLI version 3, it became very easy to build your own component libraries for reuse. If you find this process helpful, give it a thumbs up and support Fundebug as well!