Roundup: Vue.js Desktop Web App Component Libraries - Updated Q4 2017

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.

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

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.

• Inputs: Buttons, Input fields, Checkboxes, and so on.
• Advanced Inputs: Datepickers, Autocomplete, File uploaders
• Indicators: Badges, Progress indicators, Toasts, Snackbars
• Navigation: Menus, Tabs, etc.
• Dialogs: Dialogs, Modals, Popovers
• Layout: Side panels, Lists, Cards, Grids, Typography

Material Design

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

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.

Rundown

• Actively Developed: Yes
• Popularity: ~5,000 stars
• License: MIT
• Size: (pre-gzip) 390KB
• Primary Developer: Marcos Moura
• Documentation Quality: Thorough
• Documentation Language: English
• Primary Community Language: English
• Components: Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: Medium
• Themeability: Dynamic, in-code. Can be swapped per-component.
• Modularity: High (ability to import components directly with tree-shaking)
• Spec Accuracy: High
• Repository: https://github.com/vuematerial/vue-material

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

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.

Rundown

• Actively Developed: Yes
• Popularity: ~7,000 stars
• License: MIT
• Size: (pre-gzip) 463KB
• Primary Developer: John Leider
• Documentation Quality: Thorough
• Documentation Language: English
• Primary Community Language: English
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: High
• Themeability: Custom Colors, Manual Overrides
• Modularity: High (It’s possible to import components individually, but it’s a bit more complicated than one might hope.)
• Spec Accuracy: High
• Repository: https://github.com/vuetifyjs/vuetify

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

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.

Rundown

• Actively Developed: Yes
• Popularity: ~4,200 stars
• License: MIT
• Size: (pre-gzip) 463KB
• Primary Developer: Razvan Stoenescu
• Documentation Quality: Excellent!
• Documentation Language: English
• Primary Community Language: English
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: Medium
• Themeability: Color Changing / Stylus
• Modularity: Low
• Spec Accuracy: Low
• Repository: https://github.com/quasarframework/quasar

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

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.

Rundown

• Actively Developed: Yes
• Popularity: ~3,000 stars
• License: MIT
• Size: (pre-gzip) 284KB
• Primary Developer: Josephus Paye II
• Documentation Quality: Thorough
• Documentation Language: English
• Primary Community Language: English
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs
• Animations: Medium
• Themeability: SASS Themeing, global config
• Modularity: High (ability to import components directly with tree-shaking)
• Spec Accuracy: Medium
• Repository: https://github.com/JosephusPaye/Keen-UI

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.

---

Special mentions

• Muse-UI didn’t quite make it on this list, unfortunately, due to the English documentation being a bit hard to understand. That said, it has a pretty significant following in China, and feels much snappier than Vue Material and Vuetify.

Ant Design

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.

Element

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.

Rundown

• Actively Developed: Yes
• Popularity: ~20,200 stars
• License: MIT
• Size: (pre-gzip) ??? (Flexible.)
• Primary Developers: Eleme
• Documentation Quality: Thorough
• Documentation Languages: 中文 (Chinese), English, Spanish (coming soon)
• Primary Community Language: 中文 (Chinese) (English is a close second and issues in Chinese are automatically translated to English via. a bot.)
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: Medium
• Themeability: Color Changing, SCSS themes.
• Modularity: High (Only uses what you need by default.)
• Spec Accuracy: Low
• Repository: https://github.com/ElemeFE/element

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.

---

iView

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.

Rundown

• Actively Developed: Yes
• Popularity: ~11,100 stars
• License: MIT
• Size: (pre-gzip) 656KB
• Primary Developers: Alipay & Aresn
• Documentation Quality: Thorough
• Documentation Languages: 中文 (Chinese), English
• Primary Community Language: 中文 (Chinese) (English is a close second and issues in Chinese are automatically translated to English via. a bot.)
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: Medium
• Themeability: LESS / variables
• Modularity: High (ability to import components directly with tree-shaking)
• Spec Accuracy: Low
• Repository: https://github.com/iview/iview

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.

---

Special mentions

• AT-UI looks like a great start for another Ant Design library, with good documentation and some slight style differences that make its components stand out from the pack. Unfortunately, it’s still quite early on and the number of components is limited. Watch this space.
• fish-ui has a neat, no-nonsense style to it, with a number of components already available. However, the documentation is a bit low-quality and largely lacking explanations whatsoever.

Other

There are a few component collections that don’t fit into the categories above, but are also worth a look.

Buefy

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.

Rundown

• Actively Developed: Yes
• Popularity: ~1,600 stars
• License: MIT
• Size: (pre-gzip) 385KB
• Primary Developers: Rafael Beraldo
• Documentation Quality: Good
• Documentation Languages: English
• Primary Community Language: English
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: Low
• Themeability: SASS / variables
• Modularity: Low
• Repository: https://github.com/rafaelpimpa/buefy

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.

---

BootstrapVue

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.

Rundown

• Actively Developed: Yes
• Popularity: ~3,000 stars
• License: MIT
• Size: (pre-gzip) 315KB (188KB + Bootstrap 4 CSS)
• Primary Developers: Pooya Parsa & Troy Morehouse
• Documentation Quality: Thorough
• Documentation Languages: English
• Primary Community Language: English
• Components: Inputs, Indicators, Navigation, Dialogs, Layout
• Animations: Low
• Themeability: SASS / Bootstrap 4
• Modularity: High (Every component can be imported directly or as a plugin containing related components.)
• Repository: https://github.com/bootstrap-vue/bootstrap-vue

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.