By Joshua Bemenderfer
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Any good view rendering library should have plenty of third-party components available for developers to work wtih. Vue is no exception. It has a plethora of amazing component libraries for you to use in whatever projects you see fit.
Last Updated on November 27th, 2017.
Over the past year, the number of quality desktop / web appropriate component libraries and frameworks for Vue.js has exploded, meaning it’s time to give this article an update. Here I’ll try and give a rundown of various features and stats for each library in order to help you make an informed decision for your next project.
For the sake of brevity and avoiding choice paralysis, I will be actively excluding libraries that may be extensive, but appear poorly maintained or lack complete documentation.
The majority of these component collections follow either Material or Ant design guidelines, though there are a couple of outliers. For that reason, I’m going to split them into categories based on design language.
Component categories will be used to indicate which components a library has without having to list every single one. Here are a list of possible categories. If a library does not have the majority of the components specified in each category, then that category will not be indicated as present.
Many people are familiar with Material Design, the design language created by Google that combines a flat style with realistic lighting and shadows in order to create a familiar interface. Vue has a variety of libraries available that implement Material Design.
Vue Material is a powerful library with a significant number of components covering almost the entirety of the Material Design spec. It adheres to the specification as closely as possible, and as a result, the components are nearly indistinguishable from Google’s native implementations. Just anecdotally, however, it does seem a bit on the slow side.
Conclusion (TL;DR) It would be a good choice to develop your entire app with this. More advanced inputs, like file uploaders or autocomplete comboboxes may require other third-party components, but for pretty much everything else, Vue Material has you covered.
Vuetify is another great Material Design component library. It’s designed from the ground-up to take your app from 0 to production. And as such, it includes eight CLI templates which cover everything from the simplest use-case, to full SSR, Electron, PWA, and Nuxt.js examples. While, like Vue Material, it follows the Material Design spec, it goes even further with extra options and customization for components to cover almost every possible use-case. Vuetify also has a large community behind it, and a number of corporate sponsors.
Conclusion (TL;DR) Vuetify has everything you need and then some. You probably won’t go wrong if you select it. It does seem to make quite a few choices for you, but on the other hand it leaves you with plenty of options to work with.
Quasar Framework is intended as a be-all, end-all framework. It previously earned a spot in our Mobile Component roundup, but has since expanded its capabilities yet again to include common desktop and web app components. It even has a CLI! It’s basically a kitchen sink, with almost everything you could think of. Along with the
Material Design theme it also includes an
iOS theme with more to come. My only complaint is that the components feel rather low-quality, with inconsistent font and animation usage.
Conclusion (TL;DR) Quasar is excellent when you want to cover as many platforms and components as possible with as little custom work as possible. While it is improving all the time, at the moment it seems a bit more geared towards prototypes than full-fledged commercial apps.
Keen UI provides a significant set of Material-Design-style components. It doesn’t quite follow the spec directly, often opting for lighter components and faster transitions, but as a result, it feels faster than some of the more heavy-weight libraries here. It doesn’t include much else other than the components. There’s no layout or typography system. Depending on what your goals are, this might be a plus or a minus. As a result, it’s a bit more lightweight than some of the previously mentioned options.
Conclusion (TL;DR) A good choice if you need a variety of components, but are handling everything else (such as layout, typography, and tooling,) yourself. Also seems a bit lacking in the performance department.
Ant design is a popular design language in China. It was created by Alibaba, one of the largest e-commerce companies in the world. Ant Design favors familiar spacing and cues with friendly, slightly rounded interface elements. If you’ve ever used Chinese applications, either on your phone or desktop, you’ll probably notice they all have a familiar and somewhat friendly feeling, opting for smaller margins and bright-colors-on-white. That’s the feeling that Ant Design intends to convey.
As Alibaba uses Vue for a variety of development purposes, it’s no surprise that there are plenty of Ant Design UI libraries available.
You really cannot write a roundup of Vue component toolkits without including Element UI. It’s one of the oldest and most well-know UI libraries available for Vue, and has since been ported to React and Angular as well. The guys over at Eleme have recently released the 2.0 version of Element UI which includes a new theme, improve accessibility, Typescript support, new icons, and a variety of new components and options.
It doesn’t follow Ant Design directly, but does borrow quite a few cues from it.
Conclusion (TL;DR) Element is a bit of a heavy hitter. It’s got everything you could need and more. Some of the conventions are a bit odd, but otherwise it does a good job covering most use-cases. The quality of Element’s components and capabilities is hard to beat, and it’s incredibly convenient for anything from quick throw-away projects to large-scale sites and apps.
Like Element, iView contains a huge number of components roughly following the Ant design language. It also has a few community tools for handling theming and a custom webpack loader. It’s currently under active development. My only concern would be that it occasionally has odd spikes of poor performance.
Conclusion (TL;DR) iView is a worthy competitor to Element with a huge number of high-quality components available. However, it suffers in the weight department as a result.
There are a few component collections that don’t fit into the categories above, but are also worth a look.
Built on top of Bulma, Buefy tries to get out of your way as much as possible, only providing the logic needed to work with Bulma styles. As such, it is fairly lightweight but still looks awesome. It doesn’t include all the components other frameworks do, but it has most of the common ones.
Conclusion (TL;DR) Buefy is great for when you need some interesting and flexible UI components for your site. Maybe not as great a choice for hardcore web apps.
The venerable Bootstrap is back again with version 4, and looking slicker than ever. The Vue community, never to be left behind, has responded with BootstrapVue, a library that replaces the jQuery parts of Bootstrap 4 with proper Vue components, and adds a ton of other useful bits as well. BootstrapVue covers a great deal in the layout department, though one might find it lacking a bit when it comes to more advanced inputs, which are geared much more toward desktop usage than mobile.
Conclusion (TL;DR) If you like Bootstrap, you’ll probably like BootstrapVue. It’s great for sites that will be primarily used on desktop and / or keyboarded systems. Your mileage on mobile or more advanced apps may vary. BootStrapVue also does a much better job in the accessibility department than most of the other toolkits here.
If there’s anything you think is missing or should be added, or would like to inform us of your choice of component library, we’d love to hear from you.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.