Creating a Vue.js component library: Introduction

In this series, we’ll focus on structuring a Vue component library as a plugin for use, and reuse. That also includes distribution and documentation. That’s what is so great about Vue - the ability to create your own building blocks for designing a user experience. This series of posts is not about writing components, that’s a subject for another day.

Context #

I like to use existing component libraries until I don’t 😉.

There are many great libraries that already exist in the Vue ecosystem. Adhering to one theme or design system only works for so long, especially if you’re adopting Vue into an enterprise environment. In that case, there is usually a need for some consistency between interfaces (API & UI), style, and UX. For that reason, it’s important to know the basics of setting up your own library.

The information in the next few posts is not earth-shattering, but it’s all in one place. I’ve gone through some of the work of figuring out how the pieces fit together. This is not the end, it is a means to understanding the process to find your own end.

Workflow #

I like quick iteration. We’ll focus on whipping up an environment that lends itself to quick visual feedback 🚀. Once set up, you’ll be able to conceptualize a component, write it, register it, and document the specs. All that, without getting too bogged down in the nitty-gritty.

Series agenda #

I suppose you’ll want to build your own components! Or, you already are?! Now you’ll need to document, distribute, and manage enhancements. The structure outlined in the next few posts will help you achieve that goal.

We’ll step through:

• Structuring a component library with Vue CLI 3
• Creating the plugin to register with Vue
• Documentation using VuePress
• Publishing on npm
• Deploying the documentation

As always, the only way to understand is by rolling up your sleeves and giving it a try. 🎉

To get started, check out Structuring a Vue component library.