Vue.js (or Vue) is a JavaScript library used for creating SPAs. It’s a popular choice of millions of front-end developers around the globe. Although comparatively new, Vue.js has already given a stiff competition to its rival Angular. Vue came out as a result of making the best out of React and Angular. It basically provides the best of both worlds, in a smaller package. If you’re looking for a highly-interactive, light-weight, high-performance web application development library, then Vue is the ideal choice.

What is a UI component library?

Vue.js is only a library which you can use to create functional components. The basic building blocks of any web application. A UI component library can help you speed up your development process by providing so many reusable, customisable, stable components out of the box. The components can be anything from form fields, date pickers, buttons, cards, loaders to more complicated ones like data lists, auto complete drop down menus, steppers, etc.

Which is the best UI component library for Vue.js?

As you might have guessed already, there is no right answer. It depends on the definition of best here. Best in what? Looks? Features? Support? Backward compatibility? Number of Github stars? To make it easier, here I’ve created an articulated table. This might help you choose if you’re not looking for a detailed explanation. Please keep in mind, these suggestions are solely based on my personal experience using them. Others’ opinions may vary.

Data analysis of the most downloaded Vue libraries – Numbers don’t lie!

If we look at the data of the most downloaded Vue UI libraries (weekly) over the span of last 5 years, this is what we have (source: npm trends):

You’ll notice that Vuetify, BootstrapVue and Element UI have a large number of install base as compared to all the other frameworks. I’ll be explaining the reasons for these in a bit. However, from the graph it’s worth noticing that the growth of Vuetify and BootstrapVue has been fairly stable. Element UI, on the other hand seems to have a higher bounce rate comparatively.

Ant Design Vue also seems to have a better stability in growth over the past 1 year. Quasar seems to have a consistent growth rate ever since it was launched (9 years ago from now). The growth rate of Quasar is highest among all the libraries having weekly downloads less than 100k. Still, it is only one third as popular as the third most popular library on the list, Element UI.

Which UI component library has the most downloads and stars?

Most of these are open-source frameworks and are available on Github or other repositories. Many of us consider weekly downloads and the number of stars received a deciding factor on how popular a framework is. Let’s have a look at the top 10 frameworks I’m going to list about by weekly downloads (as of December, 2020):

Now, let’s have a deeper dive at each of the component libraries:

1. Vuetify

Vuetify is popular not only for it’s huge collection of components with highly customizable APIs (props). But also for the huge community support it’s got over the past years. It is also maintained by a good team of developers who continuously work on it. There have been multiple cases where I was reading their docs and all of a sudden a notification popped up asking me to refresh the page as they updated some content. There have been very few cases (compared to other libraries) where I was not able to implement a project requirement using Vuetify and had to come up with a custom solution.

The library also comes with multiple ready-to-use tools, like, webpack loader, Vuetify configuration files, internationalization, a boilerplate code to kickstart your project and much more.

The only concern you might have is the Vue 3 support because of the much awaited Composition API that it brings. The support is expected to come sometime by February 2022. You can, however, keep a track of the progress on the Github issues page.

Vuetify links: repository | npm | documentation | discord

2. BootstrapVue

If you want to use (or are familiar with Bootstrap) in your Vue.js project, BootsrapVue is what you’e looking for. You won’t need to learn 20 new class names and their child classes just to create a set of columns or rows. BootstrapVue comes with complete Vue methods support, which mean all the functionality which requires native JavaScript code to be executed has already been implemented in the Vue environment. However, although customizable, I found the design principles of BootstrapVue to be slightly behind the current time.

BootstrapVue links: repository | npm | documentation | discord

3. Element UI

If I could have all the customizable APIs from Vuetify in Element UI, I’d have chosen Element UI over Vuetify any given day. The design ethics are elegant, consistent, extendible and highly interactive. Element UI is vastly popular in China followed by Ant Design. It has a good collection of industry standard web components. This library comes with a great TypeScript support out of the box. So, if you’re a TypeScript guy like me, you’ll love using it. The only problem you might face is that most of the active issues of this library on Github are in Chinese.

Element UI links: repository | npm | documentation

4. Quasar

Quasar is a powerful framework having a huge collection of, greatly customisable, high quality components. Quasar is probably the only library in this list providing a great cross-platform support. It has a good team of developers (almost twice the size of Vuetify), and a huge community already contributing to make the project even better. Quasar also has SSR feature (for server-side rendering). It also has a good “Application Extension” (AE) system. It helps developers import generic code for their own development requirements as well as share custom solutions to other developers. You can find more about AE here.

One of the reasons I haven’t put Quasar on the top of this list is that it’s still based on the Material Design system and looks a bit dated compared to other frameworks.

Quasar links: repository | npm | documentation

5. Ant Design Vue

Another popular library which has the same design ethics as Element UI is the Ant Design Vue. It has great administrative templating styles and components. This library was originally created by a group of developers and designers from Alibaba. Therefore, it’s a great library if one wants to target e-commerce platform development in short time. However, just like Element UI, it was mostly targeted for Chinese developers and therefore most of the original documentations are in Chinese. Although there are translated versions available, some fonts and links are still in Chinese which couldn’t be exactly translated to English.

Ant Design Vue links: repository | documentation

6. Buefy

Buefy uses one of the most popular CSS libraries, Bulma. Bulma is mostly static CSS without providing any functional benefit. Buefy fills in that gap by providing functional components using Bulma’s CSS out of the box. So if you’re someone who’s familiar with Bulma, Buefy is a great library to provide a good integration.

Buefy links: repository | documentation | discord

7. Vue Material (Vue MD)

Vue material is a popular framework which strictly follows the Material Design design language. Although material design is a bit outdated, the library still gets a good number of downloads. One of the good things about this library is that it has a 20 column grid system (which is very rare in libraries of this category). But, having personally used this library, I won’t recommend it to anyone anymore. There are not many components available. And those available ain’t maintained very well. I’ve found issues multiple times with their components right in the docs examples themselves. The radio toggle, drop down selection change event, for example, don’t work correctly all the time. If you’re fine with a few bugs and can override them with manual fixes, you can use it.

Vue MD links: repository | documentation | discord

8. iView (View UI)

iView is a good choice if you prefer LESS over SASS/SCSS. It also supports TypeScript. It is basically the lessor known version of Element UI. It provides a good collection of components. From the likes of Baidu, Alibaba, and Tencent, many of the Chinese renowned companies use it for their admin panels. The only problem I notice here is the tremendous usage of Chinese language throughout the documentation and github issues.

iView links: repository | npm | documentation

9. Vuesax

I’m not sure why VueSax is not more popular. Maybe because the library doesn’t boast a material design, flat design or other design system. Instead, it focuses on a unique, gradient styled coloured components set which I personally liked a lot. It also focuses on core JavaScript functionalities instead of the more complicated props system which comes with other frameworks.

VueSax links: repository | npm |documentation | discord

10. Muse UI

Muse UI is one of the early material design implementations of Vue 2. It is being supported by a small team of developers. It’s a good choice for people migrating from a classic styled interface. However, since it’s still not known when, and if, it’ll Vue 3, I won’t recommend anyone using Muse as of December, 2020.

Muse UI links: repository | npm