Editor’s note: This article was last updated on 6 July 2022 to include the most up-to-date information on each featured Vue 3 UI framework.
Introduction
Vue 3 has been here for some time already. While plenty of developers are very happy with it, 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. Feel free to jump ahead:
BalmUI
BalmUI features support for Vue 3 since its version 9.0. 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
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 16.1k 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.
Wave UI
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
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 framework has 47.6k 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)
With 34k+ stars on GitHub and 470k 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 to create stunning components. 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 now in beta 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
Naive UI
NaiveUI ships with 70+ excellently crafted components. These components are performant, customizable, have first-class TypeScript support and are built to fit in any Vue 3 app.
Learn more →Naive’s documentation website has full customization inputs to help developers preview how components will look with their own theme. You can play with the options to create your own full-blown theme with color patterns and fonts. This customized theme can be downloaded and easily added to your app to override the defaults.
With its support for light and dark themes, tree-shakable components, extensive props and events, NaiveUI can be considered a solid and mature choice of UI framework that will help build both reliable and performant interfaces.
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 21.5k+ 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
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 full-fledged visual editor, which helps developers customize their own.
PrimeVUE has 2.6k stars on GitHub, but with a whopping 51k 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
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 16.8k+ stars on GitHub and 78k downloads per week. This says a lot about its popularity and 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 and mobile 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 - Start monitoring for free.
Fix the URL to BalmUI framework please. It should be https://material.balmjs.com/
Hello,
Thanks for reading the LogRocket blog and for pointing out the broken link. We’ve updated it.