Any good view rendering library should have plenty of third-party components available for developers to work with. Vue is no exception. It has a plethora of amazing component libraries for you to use in whatever projects you see fit.
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.
Additionally, I’m only including component libraries with releases that support Vue 2.0+. Chances are if you’re looking to build a new app with Vue, you’ll be using Vue 2.0.
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-mdl
vue-mdl is a wrapper around Material Design Lite, a lightweight, pure-CSS implementation of Material Design. As such, it has many of the input and display components, but not much in the way of layout.
Rundown
- Actively Developed: Yes
- Popularity: ~1,000 stars
- License: MIT
- Size: (pre-gzip) 48.1KB + MDL CSS
- Primary Developer: Eduardo San Martin Morote (Vue core developer)
- Documentation Quality: Good
- Documentation Language: English
- Components: Inputs, Indicators, Navigation, Dialogs
- Animations: Minimal
- Themeability: Through Material Design Lite
- Modularity: High (ability to import components directly with tree-shaking)
- Spec Accuracy: Medium
- Repository: https://github.com/posva/vue-mdl
Conclusion (TL;DR) Great for people who want Material Design with as little extra baggage as possible, or need only a few high-quality components for their site or app.
Keen UI
Keen UI is one of the more complete Material Design UI libraries available for Vue at the present time, having pretty much everything except side panes. It provides a significant set of interactive UI components, leaving you to chose how you’d like to do layout yourself.
Rundown
- Actively Developed: Yes
- Popularity: ~2,300 stars
- License: MIT
- Size: (pre-gzip) 264KB
- Primary Developer: Josephus Paye II
- Documentation Quality: Thorough
- Documentation 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 significant variety of interactive components, and are happy to handle layout yourself.
Vue Material
Vue Material has pretty much everything. Inputs, cards, sidebars, themes, a grid system, you name it. The only things that might be considered lacking are advanced inputs, such as datepickers or autocomplete components.
Rundown
- Actively Developed: Yes
- Popularity: ~2,000 stars
- License: MIT
- Size: (pre-gzip) 267KB
- Primary Developer: Marcos Moura
- Documentation Quality: Thorough
- Documentation Language: English
- Components: Inputs, Indicators, Navigation, Dialogs, Layout
- Animations: Medium
- Themeability: Dynamic, in-code. Can be swapped in compoonents.
- Modularity: High (ability to import components directly with tree-shaking)
- Spec Accuracy: High
- Repository: https://github.com/marcosmoura/vue-material
Conclusion (TL;DR) It would be a good choice to develop your entire app with this. More advanced inputs, like datepickers, may require other third-party components, but for pretty much everything else, Vue Material has you covered.
Muse-UI
If Vue Material has everything, Muse-UI has everything and then some. It includes things that you probably didn’t even think of when considering a UI library, such as Infinite Scroll components, Refresh drag-down support, and a component to show what step users are on in your app. The only disadvantage (for non-Chinese developers) is that the English documentation can be a bit difficult to understand.
Rundown
- Actively Developed: Yes
- Popularity: ~2,000 stars
- License: MIT
- Size: (pre-gzip) 356KB
- Primary Developer: Myron Liu
- Documentation Quality: Thorough
- Documentation Languages: 中文 (Chinese), English (can be difficult to understand)
- Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
- Animations: High
- Themeability: LESS themeing, global config
- Modularity: High (ability to import components directly with tree-shaking)
- Spec Accuracy: Seems High
- Repository: https://github.com/museui/muse-ui
Conclusion (TL;DR) If you need the full kitchen sink for your app, and maybe the cabinet on the wall too, Muse-UI would be your best choice. You probably wouldn’t need anything third-party, even for more complicated apps. It has a grid system, typography, date and time inputs, and pretty much anything else you could think of, all in a pretty and well-animated package.
Vuetify
Vuetify is another great Material Design component library. It weighs far less than the above alternatives, while only sacrificing the Advanced Inputs component category. It also comes with direct support for server-side rendering and advanced themeing. It contains quite a few layout components that are designed to be responsive on desktop and mobile form-factors and anything in-between, making this a good choice for responsive web apps.
Rundown
- Actively Developed: Yes
- Popularity: ~1,600 stars
- License: MIT
- Size: (pre-gzip) 356KB
- Primary Developer: John Leider
- Documentation Quality: Thorough
- Documentation Language: English
- Components: Inputs, Indicators, Navigation, Dialogs, Layout
- Animations: High
- Themeability: Stylus themeing, Materialize Colors
- Modularity: Low
- Spec Accuracy: High
- Repository: https://github.com/vuetifyjs/vuetify
Conclusion (TL;DR) Vuetify should provide everything you need in a significantly smaller package than most other comparable libraries, provided you can handle more advanced data input components yourself.
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.
As Alibaba uses Vue for a variety of development purposes, it’s no surprise that there are plenty of Ant Design UI libraries available. (However, many of them have not been updated to Vue 2.0 yet, and therefore are not in this list.)
Vue Beauty
(The current release of Vue Beauty is for Vue 1.0, but the next branch is under active development and appears to be largely functional for Vue 2.0)
Vue Beauty contains components of all sorts, including many that are appropriate out-of-the-box for more enterprise-focused uses, such as tree views, advanced tables, timelines, cascade selectors, and more. All excellently animated. It also provides a basic grid system.
Rundown
- Actively Developed: Yes
- Popularity: ~550 stars
- License: MIT
- Size: (pre-gzip) Unknown
- Primary Developer: Liu Guang Hui
- Documentation Quality: Good
- Documentation Language: 中文 (Chinese)
- Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs
- Animations: High
- Themeability: Custom CSS (write your own overrides)
- Modularity: Low / Unknown
- Spec Accuracy: High
- Repository: https://github.com/FE-Driver/vue-beauty
Conclusion (TL;DR) You probably won’t use Vue Beauty unless you’re able to read Chinese or can get by with very basic documentation. Of all the libraries in this article, it’s probably the best for displaying and manipulating complex data, and it looks and feels great too.
Vue-Blu
While it uses Bulma as its CSS framework, Vue-Blu is inspired by and highly reminiscent of Ant Design. It contains a comparable amount of components to Vue Beauty above, and Element below, though there are a few conspicuously missing. The theme documentation is considerably more than most of the other libraries on this list, so if you’re looking for good custom theme support, this might be a good one.
Rundown
- Actively Developed: Yes
- Popularity: ~500 stars
- License: MIT
- Size: (pre-gzip) 329KB
- Primary Developer: Chenz
- Documentation Quality: Good
- Documentation Languages: 中文 (Chinese), English (fairly good)
- Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
- Animations: Low
- Themeability: SASS Variables
- Modularity: Low
- Spec Accuracy: Low
- Repository: https://github.com/chenz24/vue-blu
Conclusion (TL;DR) Vue-Blu, while relatively new, looks incredibly promising. If you’re looking for the ability to use custom themes in a fairly vast library based on modern CSS, Vue-Bulma might be for you!
Element
Element is my personal favorite on this list. I’ve used it several times to make quick Vue utility apps in the space of an hour or two. While its component library might not be as specialized as Vue Beauty’s, it makes up for it by having a considerable variety of styles and configuration options for each component that cover a variety of use-cases. It’s also designed for internationalization by default, supporting quite a few languages out of the box.
It doesn’t follow Ant Design directly, but does borrow quite a few cues from it.
Rundown
- Actively Developed: Yes
- Popularity: ~8,600 stars
- License: MIT
- Size: (pre-gzip) 790KB
- Primary Developers: Eleme
- Documentation Quality: Thorough
- Documentation Languages: 中文 (Chinese), English (fairly good)
- Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
- Animations: High
- Themeability: Custom theme build tool, or CSS overrides
- Modularity: High (ability to import components directly with tree-shaking, officially supported)
- Spec Accuracy: Low
- Repository: https://github.com/ElemeFE/element
Conclusion (TL;DR) Element is a bit of a heavy hitter. The default package weighs in at almost 1MB. You’ll probably want to use it with tree shaking and such from the start.
That said, 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.
Other
There are a few component collections that don’t fit into the categories above, but are also worth a look.
Bootstrap-Vue
No component collection would be complete without something Bootstrap-related sneaking in somewhere. Bootstrap-Vue provides interactivity for Bootstrap 4 in place of the JavaScript Bootstrap normally ships with. The component list isn’t extensive, but is plenty for a basic site, and is still expanding.
Rundown
- Actively Developed: Yes
- Popularity: ~400 stars
- License: MIT
- Size: (pre-gzip) 77KB + Bootstrap 4 CSS
- Primary Developer: Pooya Parsa
- Documentation Quality: Thorough
- Documentation Language: English
- Components: Inputs, Indicators, Navigation
- Animations: Low
- Themeability: Bootstrap 4 Themeing
- Modularity: High (ability to import components directly with tree-shaking, officially supported)
- Repository: https://github.com/bootstrap-vue/bootstrap-vue
Conclusion (TL;DR) It’s Bootstrap 4, for Vue. If you like either of those things, Bootstrap-Vue might be for you. :P
Vuikit
Vuikit, a Vue wrapper for UIKit takes a different approach from most of the other libraries here. It only has components that require Javascript. It lets CSS handle the rest. As a result, it’s considerably more lightweight.
The result is a very lightweight and minimalist library, both in code and in looks.
Rundown
- Actively Developed: Yes
- Popularity: ~600 stars
- License: MIT
- Size: (pre-gzip) 80KB + UIKit CSS
- Primary Developer: Miljan Aleksic
- Documentation Quality: Good
- Documentation Language: English
- Components: Inputs, Indicators, Navigation
- Animations: None
- Themeability: UIKit Themeing, with minor workarounds.
- Modularity: High (ability to import components directly with tree-shaking, officially supported)
- Repository: https://github.com/vuikit/vuikit
Conclusion (TL;DR) This is a good collection for a website. It’s lightweight, has a distinct and minimalist look, and straightforward documentation. I’d recommend against it for a web app though, as it’s a little too basic to handle the more demanding requirements of a web app, and you’ll probably end up having to add a few things yourself.
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.