How to create, publish and use your own VueJS Component library on NPM using
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
So, let’s get down to it. First things first, you need to install vue-cli to get started.
npm install -g @vue/cli
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:
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
The component can be simply used in the template after registering it as a component named
<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
[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.
build-bundle to my scripts so that I can just run
npm run build-bundle to create my library bundle.
This generates an output similar to this:
For the CodeSandbox example, the entry file should look something like this:
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
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
"files": [ "dist/*", "src/*", "public/*", "*.json", "*.js"],
Step 4— Adding/Logging in on npm as a user
Make sure you’re registered on
npm adduser to register a new user and
npm login to login as an existing user.
Step 5— Verifying npm user credentials
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
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
npm 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.
main.js, or a similar entry point, just import your library using:
Now, you can start using your components out of the box, since we were globally registering those components in Step 1.
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!
Flock Component Library: https://github.com/talk-to/vue-components
How to use from NPM: https://codesandbox.io/s/n9n7yy2lwp