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 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 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.
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.
Preparing the Application
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 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.
Creating the Application with Vue CLI
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.
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 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 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 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.