As we saw in the yearly front-end frameworks report, Vue.js maintains a solid top 3 position as the most popular JavaScript framework for web development. And, in February 2022 – Evan You announced that Vue would move to Vue 3 as the default version.

This roundup is part of a series that I have been doing for various frameworks. Notably, my collection of Tailwind CSS component libraries, but also my review of the top-performing React UI libraries. The approach for Vue is going to be exactly the same.

We’re going to focus on libraries that are both in active development but also support the new Vue 3 version*. I can say beforehand that many libraries didn’t make the cut simply because they were last updated several years ago. It doesn’t make sense to work with a library that has insufficient support, for a framework that evolves on a daily basis.

* There are a few exceptions to this rule. Some libraries don’t have any plans to update to Vue 3 but still are in active development. And a few have plans to update in the future, but it’s quite a bit of work from a maintenance perspective.

---

Quasar

Quasar is quite literally a framework within a framework. It’s one of the top choices for developers who want extensive tools for building user interfaces. The popularity stems largely from the fact that Quasar has in-built support for various build modes.

So, whether you’re building a SPA or a PWA, or a mobile app – you don’t need to break any sweat to get started. And, best of all, despite the large pool of features – if you build a small personal website, Quasar will only queue the resources needed for that project.

This helps to avoid bloating your project with unused code. And lastly, all code written in Quasar is shared as one unified codebase. So, if you are building a single-page application, you can easily export that as a mobile application, too.

Arco Design

Arco is an enterprise-grade design system that’s popular with React.js developers. However, Arco Design does have a Vue.js version, also. And, unlike personal UI libraries built by independent developers – Arco is packed with features and design files.

Those included Figma & Sketch files for each component. A custom icons library and a collection of more than 60 custom components that are available for instant download.

With all these resources, you can put together a design mockup in a matter of minutes.

Vuetify

Everyone loves material design, right? The Vuetify UI library is loaded with custom-made components based on the Material Design spec. It’s also one of the old-school libraries that have been with Vue.js since the beginning. This is best reflected in what the library has to offer, and also how it compares to other libraries.

Vue Framework Comparison 2022

Based on this comparison chart alone we can see that Vuetify is really putting in the work to ensure developers have all the best tools at their disposal. I can also say that the templating system is quite easy to learn. Much like you would learn the utility classes of Tailwind CSS.

Vue Bootstrap

The only thing to note about this library is that it's having a bit of a sluggish time with updates. As is explained in this GitHub issue - they're looking to onboard new maintainers to help update the library to Bootstrap 5 with Vue 3 support. And I think in due time they will, so I am going to still include this despite what I said at the beginning of the article.

As for everything else – this component library does what you expect. It’s a Bootstrap implementation that can be used with the Vue.js framework. It is optimized for accessibility, and all of its components have numerous examples included in the documentation.

Thanks to modular support, you can only use what you need and skip the rest.

Buefy

Bulma doesn’t get nearly as much love as it should. It’s one of those CSS frameworks that has somehow managed to stay out of all the trends and front-end craziness. But, it is nonetheless a very good framework to work with, and now you can use Bulma together with Vue through the Buefy library. It’s easy to work with and emphasizes a lightweight structure.

If you’ve worked with Bulma before, Buefy retains all the nifty Bulma UI components. In addition, you get a pre-made code sample for each component variation. The documentation also includes links to CodePen so you can play around with the examples without firing up the library yourself.

Please note that Buefy is strictly a Vue 2 library, and does not have plans to update to Vue 3 because it is too much work. An alternative is to use Oruga (also included in this roundup) which has a Bulma directive available.

Grace

Grace is a custom-built Design System. It is implemented using TypeScript, SASS, Jest, and Rollup for bundling. The project is very much in development and needs to have its documentation properly updated. Although, it seems that is going to be the case as maintainers have already started opening GitHub Issues for this specific case.

Vuetensils

If you prefer to use component libraries as starting points while having the freedom to style everything yourself – Vuetensils is a framework made specifically for that purpose.

It does have an extensive library of Components readily available, and you can also pick and choose what you need. The philosophy behind the styling is that at its core, everything is kept minimal to avoid cramming your project with unused styles.

Naive UI

Naive UI is a Vue 3 component library with integrated performance optimization. It’s built for developers who are already using TypeScript. The components have a clean structure and cover practically every imaginable scenario.

With the addition of pre-made layout components – Naive UI is a solid candidate to use for new website projects. You can also define custom configurations using either a global theme or building your own config step by step.

Vuestic UI

Vuestic is a stylish Vue 3 UI framework that provides over 50 responsive components, integrated accessibility features, and support across all major browsers: web and mobile. You also get access to a custom-built admin dashboard template – letting you kickstart projects that are built as SaaS products.

The component design feels quite lean and doesn’t impose a strict characteristic. As such, Vuestic UI should work across projects on all sides of the spectrum.

Varlet UI

Varlet is the first (out of two) UI library in this list that is built as a mobile-first kit.

It’s integrated with Material Design and covers a large array of components used in mobile app development. Varlet has persistent support for Server-Side Rendering.

You can play with the components from the documentation. However, the recommended way to try them out would be to use VS Code or WebStorm, for which the authors have provided a native syntax highlighting solution.

The creator of Vue (Evan You) is of Chinese descent and has a direct correlation to the fact that a lot of people from countries like China, Japan, and Korea prefer to work with Vue as opposed to other frameworks.  This also means that the Vue community is far more active in Eastern countries than it is in places like the USA - where React is seen as the number one framework.

Oruga

Oruga is a framework-agnostic library of Vue UI components. The idea is that you either use the provided components and style them yourself, or you use an external framework (such as Bulma) to build on top of the existing components.

One interesting feature of Orgua is that components aren’t just plain interfaces. But, a good bunch of them also come with added features. In the docs, you’ll have all the necessary Props definitions, but also individual variable names in both CSS and SASS.

Wave UI

Wave UI is built on the idea that components should be customizable using CSS. So, even if the component has a custom style – you can override custom parameters with CSS, without needing to force a particular property.

The design style is quite modest, although for some it might feel borderline minimal.

Wave UI does come with its own layout definition. This is available as Spaces, but also Flexbox and Grid. The utility classes are quite easy to follow – so building complex structures won’t be an issue.

Chakra UI Vue

Chakra UI is probably best known as one of the go-to libraries for React. But it does have a Vue version. So, whether you’re new to Chakra or have used it in the past – using the Vue version is going to feel exactly the same.

The library is most known for its strict approach to accessible web development. This is achieved by ensuring that each component has compatibility with the WAI-ARIA guidelines.

But the area where Chakra stands out the most is the ability to compose components. In other words, you can reuse component elements to blend them together. This lets you achieve component structure and style that wouldn’t otherwise be possible.

Ant Design Vue

Ant Design is one of the leading Design Systems for modern web development. We’ve already covered their offerings in a previous article about React libraries.

But, to summarize – Ant Design focuses on implementing a design philosophy rather than a set of components that you just plug into a random project. As such, this is a library that you’ll want to use when working on a professional (enterprise-level) project.

Everything from guidelines to component philosophy is carefully explained in their docs.

Vant is the second (and last!) component library that is built for mobile development. With 20,000 stars on GitHub – you can rest assured it’s an absolute beast in this department.

The components are designed to be as lightweight as possible, with the average component being only 1kb in size when all is said and done. Vant uses TypeScript, and also has some design assets available as exports for Sketch or Axure.

Sketch assets can be imported in Figma, also.

If you do mobile development and work with Vue – Vant is probably one of the better libraries to go with. The documentation is extensive, and the ability to customize component structure means it’s a good fit for both SPA but also PWA projects.

Starting a new project with a component library

Quite a lot of front-end development is governed by component libraries. In fact, the most popular frameworks all implement a component-driven approach. And it’s safe to say that Vue has been a top choice for many, particularly communities from the Eastern region.

If you have done web development projects before (using a modern stack), getting started with Vue.js is quite easy. It’s also one of the top benefits of using the framework. You also don’t need to learn TypeScript, although Vue works quite well with it.