The best new Vue 3 UI libraries of 2021

Written by Dylan Tientcheu ✏️

This article is a follow-up to my previous article showcasing a list of nine superb Vue 3 UI frameworks. These frameworks enhance your Vue app’s development experience, maintainability, and final design.

Today, I’ll be talking about five more brand new Vue 3 UI frameworks that ship with a panoply of awesome components (e.g., navbars, inputs, and checkboxes) that will help you effortlessly build interfaces or your own components. Moreover, some of these frameworks ship with functions, plugins, and directives that may abstract a whole layer of complexity on your UI, like lazy loading, infinite scrolling, and debouncing, to name a few.

Oruga UI

Oruga UI was mentioned as a “most anticipated UI framework” in my previous post. This is because Oruga has been shipping lightweight and unobtrusive components since Vue 2, a nice trend that continues in the new Vue 3 version.

Oruga provides components that focus on functionality rather than style, which makes it a solid foundation onto which you can build your own components.

On their website, Oruga embraces a unique philosophy: “[We] want you to focus only on UI/UX aspects of your application and be totally flexible to future changes without having to touch a line of JavaScript.”

This illustrates that Oruga provides a non-opinionated environment in which you can build anything you’d like. They took this thinking to the next level by providing a CSS toggle on their website; this toggle has the ability to enable and disable their custom CSS on the docs, allowing you to view components with none of the default styles applied.

I would select Oruga as a framework if I’m looking for a nice pack of extremely customizable components on which I can apply my own style or design system. Plus, even if I want to edit the default styles, Oruga allows this with a ton of CSS variables waiting to receive custom styles to override or enhance. Oruga provides a great experience in terms of setup and customization.

Vuestic UI

Vuestic is known for making one of the most beautiful, open source admin panels for Vue. They excel in writing maintainable Vue code and crafting slick components and interfaces.

The team has recently announced Vuestic UI, their Vue 3 UI framework, containing all of the components used in the popular Vuestic Admin UI and much more. Vuestic emphasizes its out-of-the-box support for keyboard navigation, a feature prized in the frontend community due to the UX it provides.

Vuestic provides more than 50 components with unique features and extensive configurability. Responsive by design, these components fit on nearly every screen. Vuestic ships with seamless translation support and keyboard accessibility throughout the framework.

Vuestic has already established itself as one of the most aesthetically pleasing Vue 3 UI frameworks with their catalog of beautiful components. They are now on good pace to create much more complex components, like a date picker or a data table, which will surely look as inventive as their current offerings.

Vuestic will fit perfectly to your app if you want to build good-looking and functional components. The components are responsive by design and will fit with any theme thanks to the high level of customizability.

Naive UI

Naive UI was modestly announced to the world on Twitter, then retweeted by Vue’s creator, which brought a lot of traffic to this new component library. Now, Naive UI has a well-deserved 4.7k stars on GitHub within less than three months of existence.

It ships more than 70 extremely well-crafted components that can seamlessly fit into almost any kind of Vue 3 app. Naive’s components are performant, extremely customizable, and have first-class TypeScript support to offer a great development experience.

The documentation website is easy to navigate, and has full customization inputs to help developers preview how components will look within 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.

Within Naive’s large library of components, all of them are tree-shakable, support dark and light themes, and provide extensive props and events to make either a skeleton for your own complex component, or to seamlessly integrate into your own app.

Naive ships almost everything one may need to develop a mature Vue 3 app. Every component is fast and consistent, and data-displaying components ship with great lazy loading abilities.

I would select Naive to supercharge my Vue app without compromising speed or any of my existing components.

Varlet UI

Varlet UI is a Material Design mobile component library for Vue 3. It can be regarded as a mobile-oriented and compatible version of the well-known Vuetify UI framework.

Varlet ships with 40 lightweight and high quality components, and features great TypeScript, SSR, and internationalization support. Varlet leans on Material Design, which is already very well-established in mobile experiences, giving your users a step ahead in the process of learning how the components work.

The tree-shakable nature of Varlet’s components allow them to be light and accessible. Additionally, Varlet offers an IDE set up guide and an extension to enhance developer’s productivity.

Varlet is my pick if I’d like to have beautiful, responsive Material Design components with a bias towards mobile user interfaces.

Vant UI

Vant UI offers more than 65 lightweight, reusable components. Vant’s components are known for being adapted for mobile use, and for their ability to be fully customizable. Vant is a strong competitor to the Ionic framework, offering rare components like password inputs, countdowns, pull-to-refresh, notifications, and more.

After browsing through Vant’s component catalog, it is clear they focus on smaller devices but stay flexible enough to be extended to web apps. It is worth mentioning that these components are all tree-shakable, and as such, they can be imported individually to your application.

Vant has an extensive documentation website, featuring numerous demos, event APIs, slot APIs, code examples, and even edge-cases. Vant also offers typed components to help with code completions, and supports SSR, theming, and internationalization, making it a bulletproof solution for most developers.

Vant would be awesome if ever you need to build an app that will look great on mobile. These components fit perfectly on any PWA and make your web app feel native without much hassle.

Conclusion

As Vue grows exponentially, it organically raises much better libraries and frameworks due to the fact that authors have a powerful, performant, and extensive API to lean on. Now developers can come up with more inventive ways facilitate the creation of user interfaces while breaking most of the limits they previously encountered.

Due to Vue’s keen approach to details that matter most for frontend developers (developer experience, performance, reactivity, and state management, to name a few), it is safe to say the whole Vue ecosystem is worth monitoring closely in the coming years.

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.

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 - Start monitoring for free.