How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0

Even though I’ve been working on VueJS for a while now, I never needed to publish a component on npm. The reason we’re doing it now is because we build applications for Flock, and it gets pretty crazy rewriting components in different applications. The third time I was developing an application using Vue.js, I felt that we needed some highly configurable yet reusable components.

Flock, being a developer friendly enterprise communication tool, has its own design language and allows seamless third-party integrations. Meaning — any developer can build an application for their Flock teams or, he/she can even develop it for the whole ecosystem. Therefore, there was a need for all UI Components to be consistent with the theme and colours of the application. Having pre-built components which adhered to the design theme would make development much faster(and more fun). This is why I started to write some components that could be reused via npm.

So, let’s get down to it. First things 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

We’re using the vue-cli 3.0 beta version. You might notice a warning that says “Do not use in production yet unless you are adventurous”, but we’ll go ahead and ignore that.

You should now end up that looks something like this:

Contents of the my-vue-library folder

Now all you have to do to get started is:

npm run serve

Let’s get started with creating a simple component now. Let’s take the example of a Banner component.

src/components/Banner.vue

The component can be simply used in the template after registering it as a component named Banner:

<Banner>This is a banner!</Banner>

Check out the code on CodeSandbox for a working demo of the components! A huge shoutout to Ives van Hoorne for making this amazing application. Now, if you want to use this component via npm, you have to do a few things.

We’ve written a few components for Flock here, you might find it helpful for reference.

Step 1 — Setting up the library build

You will need to leverage vue-cli for building your components as a library. Add vue-cli-service build --target lib --name myLib [entry] to your package.json scripts.

[entry] is your App.vue by default but you can change it to the relative path of any file in which you are importing those components. You may or may not choose to globally register those components, although I would register them with my library name as a prefix if I were you. The lesser code for the developer who uses these components, the better.

I’ve added build-bundle to my scripts so that I can just run npm run build-bundle to create my library bundle.

Add your build command to the scripts

This generates an output similar to this:

Building your library

For the CodeSandbox example, the entry file should look something like this:

src/components/index.js

Step 2 — Pointing towards your output file in package.json

Make sure your main attribute in package.json is correctly pointing towards your output file. I prefer using the commonjs bundle.

main attribute in your package.json points towards your output file

Step 3 — Add files attribute to your package.json

This is an important step. We need to specify what files should be uploaded to `npm` whenever we publish our package. We will just push out all the files that we’re concerned about, in case someone wants to use the SFC(Single File Component) from the src folder.

"files": [
  "dist/*",
  "src/*",
  "public/*",
  "*.json",
  "*.js"
],

Step 4— Adding/Logging in on npm as a user

Make sure you’re registered on npm. npm adduser to register a new user and npm login to login as an existing user.

Step 5— Verifying npm user credentials

Type npm whoami to verify your username.

Step 6— Naming your component library

Choose a name for your package, you have to make sure that it’s not already taken. Make sure to put it in your package.json.

Choose a unique name and modify it in your package.json

Step 7— Build

Build your bundle by executing the package script you added in step 1.

npm run build-bundle

Step 8— Publishing your component library on npm

Runnpm publish --access public to publish the library for public access.

And that’s it. You’re done with publishing your Vue Component library on npm!

Step 9(Edited) — How to use your newly published library

All that is left is to install your component library from npm and import the components into your code. To install:

npm install --save [myLibName]

myLibName is the name of your library that you gave in Step 6.

In your main.js, or a similar entry point, just import your library using:

import 'myLibName';

Now, you can start using your components out of the box, since we were globally registering those components in Step 1.

We had globally registered all our components

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

<flock-banner>This is a sample Banner</flock-banner>

Check out the live example using the component library mentioned above: https://codesandbox.io/s/n9n7yy2lwp

Finally, we’re done. Easy peasy lemon squeezy! After Vue.js team came up with the CLI version 3, it has become super-easy to build your own library of components for reuse. Give this article a clap if you found it helpful!

Resources:

https://github.com/vuejs/vue-cli/blob/dev/docs/build-targets.md
https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#building-as-library-or-web-component
Flock Component Library: https://github.com/talk-to/vue-components
How to use from NPM: https://codesandbox.io/s/n9n7yy2lwp