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.
As an aside, while thinking through this project (and others), I've come around to the idea of renderless components for reuse. This series will not focus on building out a generic renderless component library but it's worth a read if you're not familiar.
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.
Top comments (8)
I don't recommend building libraries with the Vue CLI, because it doesn't use Rollup for ESM (tree-shaking) and also because it doesn't externalize all dependencies, which means your library is bloated with unnecessary distributions of the dependencies you used. I suggest looking up a CLI, similar to TSDX and using that instead.
github.com/team-innovation/vue-sfc... ? any better alternatives?
That could work. I like to stick to the mainstream tooling though (more future-proof). There's also the new cli tool Vite.
Thanks for the great series. There was some parts that are just for vue2.
Are you thinking to update to Vue3?
Thank you for this series. Is very helpful.
I'm happy to hear that!
Thank you,
Do you know if it is supported with Vue3?
Since this is coupled with VuePress, you'll need to adjust/accommodate for the the pre-release version github.com/vuepress/vuepress-next. Regarding Vue3, the migration guide is probably the best place to identify what needs to be changed.
v3.vuejs.org/guide/migration/intro...
Also, this might be able to be ported to VitePress at some point... :)