Dylan Tientcheu I build experiences to make your everyday life simpler.

The best UI frameworks for Vue 3

4 min read 1386

Introduction

Vue 3 has arrived, stable and ready for production use. While plenty of developers are very happy with this release, some are finding it difficult to jump into Vue 3 because of the current state of the UI frameworks ecosystem. Vue 2 UI frameworks contributed in easing the adoption of Vue thanks to the benefits they offered to the developer experience.

Using a UI framework with Vue is a great combination, because it enables developers to abstract common components, thus providing a maintainable and productive development process. Most of these components have well written tests and are consistently optimized to provide the best performance available.

In this article, I am going to showcase a list (in no particular order) of several awesome Vue 3 UI frameworks that will accompany you in crafting beautiful Vue 3 apps while also providing a great developer experience.

BalmUI

Screenshot of BalmUI

BalmUI has already released their version 9.0, which features support for Vue 3. Balm is based on Google’s Material Design, which is why it may look familiar. Balm ships with Vue plugins and directives, as well as highly-customizable components ranging from simple to complex (like the range picker).

BalmUI is growing extremely fast and will be a great fit for your Vue 3 project if you’d like to follow the Material Design style with complex built-in directives like debouncing and UI ripples that will come in handy while creating your custom components.

Element Plus

Screenshot of Element Plus

Element has already made a name for itself with Vue 2, and Element Plus brings to Vue 3 a large array of unobtrusive components. Most of what we need to create a very complex application is already made and ready for use; Element Plus offers mature date and time pickers, trees, timelines and calendar components

Element Plus offers even the most subtle additions a developer might need when building a UI interface. ranging from simple animations to a framework-wide internationalization system. Everything written is a translatable string and it can be used in pair with i18n to create custom translations or even add a non built-in language.

With 9.9k stars, Element Plus is on the pace to become one of the most popular Vue 3 UI frameworks on Github, and it lives up to our expectations with awesome issue management, prompt updates, pluggable components, and high customizability via SCSS variables.

We made a custom demo for .
No really. Click here to check it out.

Wave UI

Screenshot of WaveUI

WaveUI positioned itself well after Vue 3’s release. WaveUI’s development started while Vue 3 was still in the alpha phase, with the aim of supporting it as soon as its API became stable, making it one of the first Vue 3 UI frameworks out there.

Wave UI ships with more than 40 beautiful and responsive components. They range from spinners to calendars and anything in between. Wave also provides utilities, customizability, and a mature, integrated form validation functionality.

Components offered by Wave UI are extremely beautiful and very well animated. Everything feels snappy, and its style is consistent throughout the entire framework. It will be a nice addition to your responsive enterprise-grade or simple Vue 3 app.

Wave UI looks very promising due to the philosophy around which it was built. It aims to be unobtrusive by enabling developers to add or reduce Wave’s priority in your CSS, which allows you to come up with your own styles and use it only when necessary.

Ionic

Screenshot of IonicVUE

 

Ionic Vue was one of the first UI frameworks to provide Vue 3 support. Ionic leans more towards mobile UI, and they know how to cater to and maintain a great UI framework.

Ionic Vue feels very mature. It has an astounding community, plenty of StackOverflow questions, enterprise support, and a big Slack channel with core members. This makes it easy to be supported whenever you need help.

The Ionic Vue framework has 43k stars on Github and is already used by a lot of big companies, including Airbus and Electronic Arts. Ionic’s team is known for being good at maintaining their UI frameworks making it a good bet now and in the future.

Vuetify 3 (Titan)

Screenshot of Vuetify

 

With 30k+ stars on GitHub and 280k weekly downloads, Vuetify is an extremely popular Vue UI framework. It is well appreciated by Vue users and popular because it fully utilizes the Vue API. Even though Vuetify is based on Google’s Material Design, its customizability is top notch, enabling you to quickly create a customized theme.

As I am writing this post, Vuetify Titan is still in alpha stage, but it already looks on pace to replace Vuetify 2 and become a solid Vue 3 UI framework.

Vuetify is acknowledged by many big companies due to the following:

  • Good release cycle, so it always feel safe and stable
  • Accessibility and responsiveness of components
  • Awesome documentation
  • Massive community
  • Core team support

Equal

Screenshot of Equal

Equal is a relatively new Vue UI framework (the first commit was in September 2020). It describes itself as “a components framework for Vue 3 based on TypeScript.”

Equal shows a great potential due to its beautiful components and simple documentation website. Currently, the only drawback is that it offers an opinionated style which can be harder to customize than other frameworks on this list. However, if you are looking for a great set of components offering first-class TypeScript with superb animations and nice functionalities, Equal can accompany you.

Quasar

Screenshot of Quasar

Quasar is a full, performance-focused framework that helps you build Vue user interfaces (SPA, PWA, SSR, mobile, and desktop). In addition to Vue, Node, and Webpack, Quasar packs in Cordova, Capacitor, and Electron, which can help you build desktop and mobile experiences without having to learn them individually.

At first look, the Quasar UI framework seems like it is based on Material Design, but once you get started, everything can be very well customized to fit your own design system.

Adoption of Vue 3 was quick, and Quasar has already released almost all of their v1 components, plugins, and directives. Moreover, they released composables, which help developers go deeper into the Quasar API.

Quasar holds 18.3k+ stars on GitHub, is already well-established, and has a proactive community on Discord and Twitter. This makes it a great UI framework choice if you ever need to develop your Vue app for up to three platforms (web, desktop, or mobile).

PrimeVUE

Screenshot of PrimeVUE

 

PrimeVUE was expected to adopt Vue 3 earlier than the other frameworks, and it didn’t disappoint. With 80+ components, PrimeVUE proves itself as one of the frameworks on this list with the widest component range.

Components here include passwords forms with meters, sliders, trees, graphs, split buttons, knobs, charts, and lots more. PrimeVUE even has a first-class integration for Vuelidate, a form validation library. PrimeVUE ships with pre made themes, and gives access to a fullfledged visual editor which helps developers customize their own.

PrimeVUE has 1.3k stars on GitHub, but with a whopping 11k weekly downloads. It is growing quite well with the Vue 3 adoption. Offering developers the ability to mix a such a well-crafted library to the power of Vue 3 will surely make them very delighted to work with this tool.

Ant Design Vue

Screenshot of Ant Design Vue

 

Ant Design Vue is already pretty well established. Creating user interfaces with Ant Design Vue is a breeze; the components adapt to various icon styles, fonts, and dark themes. Ant Design Vue consistently improves their 60+ components to make them a lot better and much more accessible.

Ant Design on Vue 3 has smaller bundle size, feels lighter, and supports SSR (and even the new composition API). Ant Design feels complete with mature complex components like data tables, statistic boxes, pop confirms, modals, and popovers.

Ant Design Vue has 14.3k+ stars on GitHub and 49k downloads per week. This says a lot about its popularity and community.

Anticipated UI frameworks

There are also nice Vue 2 frameworks, that have great potential and are in course to be implemented in Vue 3. They include:

The maintainers of these frameworks are on top of the transition to Vue 3 and are known for being active in Vue’s community.

Conclusion

Migrating from Vue 2 to Vue 3 will get easier as the ecosystem migrates too. Therefore, these UI frameworks are all bound to get better, faster, and even more customizable with the API and reactivity provided by Vue 3. If ever you need to use a Vue framework that is still in the process of migrating, I recommend supporting it and being patient, because it is worth the wait.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - .

Dylan Tientcheu I build experiences to make your everyday life simpler.

Leave a Reply