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 with insufficient support, for a framework that evolves daily.
What is Vue.js?
Vue.js is a widely-used JavaScript framework that facilitates the building of user interfaces and single-page applications. It offers an incrementally adoptable ecosystem that can function as a library or a full-featured framework depending on the project requirements.
Vue.js is known for its simplicity, ease of integration, and a well-structured architecture which makes it a go-to choice for developers aiming to create modern, interactive web applications. The framework has a thriving ecosystem with a variety of supporting libraries and tools that further enhance its usability in web development projects.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that aims to streamline the design process. Unlike traditional CSS frameworks like Bootstrap, which provide you with a set of pre-designed components, Tailwind offers low-level utility classes. These classes make it quick and efficient to build responsive and maintainable user interfaces without leaving your HTML file.
Why does this matter for Vue developers? Tailwind CSS can be easily integrated with Vue projects, allowing for a seamless design-to-development workflow. When using Tailwind with Vue, developers can add classes directly to their Vue components, improving readability and reducing the need for external CSS files. Moreover, Tailwind offers configuration options that can align with your project’s specific design system, making it a flexible choice for various UI needs.
So, what’s the real-world impact? Imagine crafting a UI component in Vue—say, a button. Instead of writing custom CSS or importing a component from a library, you could just sprinkle a few Tailwind classes in the button’s HTML representation to style it, handling everything from dimensions to colors to hover states. It’s a straightforward and efficient approach, providing granular control over design while retaining coding speed.
Would Tailwind CSS be a good fit for your Vue project? That really depends on your team’s workflow and design requirements. But if the idea of a utility-first, highly customizable framework aligns with your project goals, it’s definitely worth a look.
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.
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 will 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 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 will 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 library 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
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 best libraries. The documentation is extensive, and the ability to customize component structure means it’s a good fit for both SPA but also PWA projects.
Summary
The landscape of Vue UI component libraries and kits is both expansive and nuanced. From the enterprise-grade components offered by libraries like Vuetify to the minimalist designs of Tailwind CSS, the libraries and kits we’ve discussed serve various needs and preferences. Whether you’re developing a complex dashboard or a single-page application, the right library can significantly cut down development time and enhance user experience.
But what’s the takeaway here? It’s not merely about choosing the most popular or the most feature-rich library. The key lies in understanding the specific demands of your project and then making an informed decision. Are you looking for speed? Tailwind might be your go-to. Need material design right out of the box? Vuetify has you covered. Remember, every project has its own set of requirements and challenges; choose your UI toolkit accordingly.
