Vue is undeniably one of the best JavaScript frameworks to work with. Thanks to its simplicity, learning curve, and modern features, it throws most competitors out of the water in development speed and execution time.
I often switch my projects between Vue and React (due to work requirements), and laugh looking at features React is finally bringing in which have already been there in Vue for years (looking at React 18’s Suspense, Automatic Batching, etc)… anyway, enough with the bashing.
Technology changes too fast and web engineering is no different. Thanks to the UI libraries built on top of Vue.js, we can match up with the pace it brings in new features. Vue 3 brought in some groundbreaking changes with its built-in support with Vite.
Let’s look at some of the best Vue.js UI libraries you can use in 2023. I’ve also added some comprehensive analysis of how they perform the below-mentioned factors:
- Popularity
- Community support
- Upgradability
- Development time
Popularity
Winners: Vuetify, Bootstrap Vue
Going by popularity, I’d say Vuetify is currently the most popular Vue UI library out there. In fact, having used them all, it is one of my favorites for various reasons (explained later in the article).
It has continued to be on top of all the other libraries through downloads and community support.
NPM downloads chart among the Top 5 popular Vue UI libraries (over the past 5 years):
I’ve used all 5 libraries listed above (and a few others) in some of my projects for some time. I found Vuetify and Element UI good to work with. Quasar has a rich component library, but sometimes it can be overkill for smaller projects. For some reason, I didn’t like the way Bootstrap-vue worked. Most of its components are just plain CSS styling with very limited props and poor API support.
Here’s how they perform with average weekly downloads:
| Downloads (weekly) | Chart | |
| Vuetify | 470,000 |  |
| Bootstrap Vue | 360,000 |  |
| Element UI | 330,000 |  |
| Quasar | 120,000 |  |
| Ant Design Vue | 90,000 |  |
Community support
Winners: Vuetify, Quasar
I can’t stress this enough, but community support is a huge thing if you’re looking to build a project that’s going to last long. This is effectively more important a factor with open-source libraries. There’s nothing worse than picking up a library only to see the developers lose interest in working on it and abandoning it later (I’m looking at you Vue Material Design).
That’s why I did some research to bring out how active the communities behind these libraries actually are. Of course, developing a fancy-looking component library is not enough if you can’t maintain it in the rapidly changing world of JavaScript.
| Vuetify | Bootstrap Vue | Element UI | Quasar | Ant Design Vue | |
| Total contributors | 784 | 339 | 603 | 626 | 205 |
| Last commit date on master | 25-02-2023 | 26-12-2022 | 13-02-2023 | 21-02-2023 | 05-02-2023 |
| Total commits in last 1 year | 1287 | 51 | 20 | 800 | 260 |
| Total contributors in last 1 year | 28 | 7 | 4 | 28 | 13 |
| Number of issues in repo | 1200 | 139 | 2200 | 370 | 150 |
| Vue 3 support | Currently in Beta Expected release by Q2, 2023 | Currently in Alpha No release date yet | Released Too many issues in production | Released Some components still in progress | Released |
If you look at the numbers above, you’d notice that Vuetify and Quasar are performing better than the others here. Vuetify has the highest number of total contributors. But in the last year, there has been the same number of contributors for Vuetify and Quasar (28).
There have been a huge number of commits on Vuetify as well, this is mostly because of the Vuetify 3 update which brings in its support to Vue 3. Quasar has been pretty active with development as well, they even brought in support for Vue 3 ahead of Vuetify.
Upgradability
Winners: Quasar, Vuetify
Vue 3 support is a huge thing when choosing a library for the following reasons:
- If you start working on a Vue 2 UI library, bringing in Vue 3 support would almost require you a complete rewrite of the project. So, it’s better to use a library that supports Vue 3 out of the box.
- Vue 3 has Composition API built-in. Most of the plugins and libraries being published these days on NPM are using Composition API. Vue 2 uses options API by default, and adding Composition API even using the bridge is a lot of pain.
- Vue 3 also uses Vite for module bundling which is much faster than Webpack used by Vue 2 for starting the dev server, as well as for building the app package
Vuetify has released Vuetify 3 (beta, with support for Vue 3), since it’s in beta, I still find some bugs here and there. They’re still in the process of finishing up some of the components that were there in Vuetify 2.
Quasar has brought in Vue 3 support and the components they’ve released it with are mostly working well. Some components are still in the process of porting.
Element UI has released a new update for Vue 3, but there are way too many bugs to use in production. Their GitHub issues tracker is also filled with bug reports.
Development time
Winners: Vuetify, Ant Design Vue
It is difficult to gauge the development time without presenting the problem scenarios and the features, and component APIs provided by the UI libraries.
Here’s an example where I look at the code implementation for the below problem statement in each of the UI libraries. I then look at the component props and methods used to estimate how much time it’d take to implement the same.
Problem statement:
Create a drop-down menu in each of the UI libraries with the following requirements:
The menu contains the following items by default:
1. India
2. US
3. Australia
4. UK
5. Japan
Drop down menu should have a list of the 5 countries listed above. After the component is mounted, there should be an api call to populate the countries list with the rest of the countries.
There should be a search bar inside the dropdown menu.
When an item is selected from the menu, an API call is made to a server endpoint that returns the capital of the country and the location of the capital in latitude and longitude.
The capital is shown inside h1 tag and the location information is shown in a paragraph tag. If the location is above the equator, show the location in red, otherwise in blue. Also, add some styling to the h1 tag with a width of 50% to that of the container.
| Vuetify | Bootstrap Vue | Element UI | Quasar | Ant Design Vue | |
| Lines Of Code | 75 | 85 | 62 | 90 | 51 |
| Memory consumption (kb) | 3166 | 4645 | 3765 | 5760 | 3655 |
| Execution time (ms) | 117 | 563 | 320 | 147 | 211 |
| Average development time (hrs) | 2 | 3 | 2 | 3 | 2 |
*Memory consumption is based on the assumption that there are 195 countries in the world and every object in the countries list has 10 properties.
Ant-Design Vue had the shortest Lines Of Code for the component. However, Vuetify had a slightly faster execution time. It also had a little less memory consumption than Ant Design Vue.
Umm…so which to pick?
Which one is the best?
That’s a toughie. Each of these libraries has its pros and cons. However, if I had to pick one for my next project, I’d probably pick one between Vuetify and Quasar. I love the active community support of Vuetify. I also love the cross-platform compatibility and the rich collection of components Quasar has. Here are a few more factors I might consider while choosing between these two:
Vuetify
| Pros | Cons |
| Wide variety of customizable components are available | The stable release is still on Vue 2.6, while Vue 2 is reaching EOL Dec 31, 2023. Vuetify 3 (based on Vue 3) is still in Beta stage and expected to be released by Q2, 2023. |
| Easy CSS overriding for styling | |
| Large community support and active development | |
| Memory efficient compared to other libraries |
Quasar
| Pros | Cons |
| A large number of customizable components with active community | Outdated UI styles, difficult to override CSS styles |
| Cross-platform compatibility | Limited integration with 3rd party libraries |
| Vue 3 support | High memory consumption due to cross-platform code compatibility |
If you found the article useful, or have any doubts or suggestions, sound off in the comments below!