Vue.js: Component/Library List
In December of 2016, I began creating a Vue.js training course. Last week, this tutorial was released. While spelunking through Vue.js, or simply Vue, I’ve come across some fantastic components and libraries. While a great framework is one thing, a great ecosystem is just as important. I truly believe that Vue has a great ecosystem and it’s been great to see it grow.
In this post, I’m going to list some of the components and libraries in this ecosystem. The components and libraries listed below are ones that I’ve played with. For that reason, this list is a a bit opinionated. Still, all of the items mentioned are MIT licensed. They’re also listed in alphabetical order within one of five categories.
The five categories I’m using in this article are: Themes, Layout, Form Components, Interactivity, and Interoperability. I hope you’ll get a chance to look at them yourself.
A theme can be used to provide a consistent look and feel across components in an app. There are several libraries that bridge Vue with common themes used in web apps. The theme libraries that I’ve seen include the following:
In addition to these four themes, I’ve seen other themes available in Vue mentioned. I simply haven’t had a chance to look at them more closely. I have had a chance to look at several of the layout components available though.
Web page layouts are often handled by CSS frameworks like those listed above. However, more complex layouts demand special attention. The Vue components listed below will help you with several of these special situations.
The above layout options are for special case scenarios. Whether you choose a special kind of layout, or a more traditional layout, you may want to add form components to that layout.
HTML provides a number of form components. However, you may have a more niche scenario. To cover these scenarios, and provide a richer input experience, you may want to use other components. Here are several components that I think you should at least be aware of.
- 3D Carousel
- Color Picker
- Drop Down List
- Infinite Scroll
- Rich Text Editor
- Styled CheckBox
Believe it or not, there are well over 100, potentially even hundreds, of components available for Vue. I’m not intentionally omitting any of them. I’m just sharing a list of those that I’ve had the opportunity to experiment with. If you have a component you really like, I hope you’ll list it in the comments below.
Still, beyond form components, interactivity is also important.
Collecting user input in an app is one thing. Empowering users to interact with your app can also help it really stand out. Here are two items that caught my eye.
Personally, when I think about interactivity, I think of it within the context of an app itself. Occasionally though, you need to reach beyond your app. Thankfully, there are some great options to interoperate outside of your app.
It’s been said that “No man is an island”. This phrase means that people don’t thrive when they’re isolated. In a lot of ways, this phrase can be applied to apps. Given the opportunity to operate with other apps and services, an app can really reach it’s full potential. Here’s a list of components and libraries that can help your app interoperate with their environment and external services.
- Add to Calendar
- Axios Http Client
- Global Event Bus
- Online Indicator
- Google Analytics
- Google Maps
- Google Sign-In
- QR Codes
This a list of the components I’ve had a chance to experiment with. While my list is brief and opinionated, there is a more agnostic list.
There’s a continuously curated list of Vue.js related content at Awesome Vue. In my opinion, this is another testament to the fantastic ecosystem. I highly recommend that you take a moment and just glance through this ever-growing list. If this list inspires you, and you want to learn more about Vue, I hope you’ll check out my training course. Thanks for reading!