PrimeVue vs Vuetify vs Quasar vs BootstrapVue

PrimeVue vs Vuetify vs Quasar vs BootstrapVue

·

7 min read

PrimeVue is an emerging UI component library for Vue and in this article we'll compare it to Vuetify, Quasar and BootstrapVue, well established Vue.js UI libraries.

Please note that this article is authored by PrimeTek, the company behind PrimeVue. If you have any feedback on the comparison, just drop a comment and we'll be happy to update it if necessary.

About PrimeVue

To begin with, PrimeVue is part of a suite of UI Component libraries that consist of the PrimeFaces, PrimeNG and PrimeReact. They are all open source under MIT License and developed by PrimeTek, a world renowned vendor with 15+ years of experience in UI component development. Open source products of PrimeTek are used all around the world by millions of developers in Fortune 500 companies, corporations, government agencies and educational institutions.

View NPM Stats of PrimeTek for more information about the downloads and adoption. Please note that PrimeFaces is published to Maven Central and excluded from the list.

Comparison Table

Vuetify has a nice comparison table on their website that stacks the project against other libraries like Quasar and BootstrapVue. The source of this comparison will be this table with our extensions.

PrimeVueVuetifyBootstrapVueQuasar
Vue 3 Support (Jan 2021)
Design Agnostic
Material Theme
Bootstrap Theme
Fluent UI Theme
Theme Builder
Requires Sponsorship
Accessibility
Enterprise Support
Long-term Support
Release cadenceBi-WeeklyWeeklyBi-WeeklyBi-Weekly
RTL Support
Premium Themes
Tree ShakingManualAutoManualManual

Let's quickly breakdown the sections above from the PrimeVue's point of view.

Vue 3 Support

PrimeVue 3 has first class support for Vue 3 since October 2020. Vuetify, Quasar and BootstrapVue are getting there but they are not production ready yet.

Design Agnostic and Themes

What set PrimeVue apart from the other libraries is being design agnostic. Vuetify and Quasar are based on material design whereas BootstrapVue is bootstrap. PrimeVue does not enforce a specific design and provides themes for Material Design, Bootstrap, FluentUI and numerous custom designs as well as the ability to implement your own style guides. Suppose that in your project you need to switch from Material to Bootstrap or a custom theme, with PrimeVue you don't need to rewrite your application with a new library, you just change the theme.css and it will take 5 seconds. The possibilities are endless, you'll be able to package the same app to different clients with different themes with their own look and feel.

Requires Sponsorship

At the moment Vuetify, Quasar and BootstrapVue require sponsorship to back the development whereas PrimeVue is an open source product of PrimeTek whose sole business is UI component library development. There are 10+ full time developers who work on PrimeVue. As a side note, PrimeVue was a gold sponsor of Evan last year.

Having said that, open source is a passion for the authors of these libraries as it is for us. We hope the best for the authors so that they can follow their passion without worrying about finances.

Accessibility

PrimeVue components are implemented based on the WCAG guidelines and follow the best practices outlined here.

  • Utilize semantic HTML where suitable.
  • Use ARIA roles and attributes to describe an element.
  • Implement keyboard navigation and screen reader support.
  • Use colors to support the suggested contrast ratios.

Enterprise Support

PrimeVue PRO is the official support service. With PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.

Long Term Support

PrimeVue LTS is an upcoming service where older versions are supported up to 18 months. Refer to PrimeNG LTS to get an idea.

Release cadence

Over the past years, we've realized that bi-weekly release cycle is the sweet spot so PrimeVue has applied this approach as well.

RTL Support

PrimeVue inherits RTL support from its siblings, we'll be adding an RTL mode to the showcase where the whole application and components can be viewed in RTL mode.

Premium Themes

PrimeVue offers numerous vue-cli templates. Visit Vue.js official website to view the PrimeVue templates.

Tree Shaking

Components of PrimeVue are modular so you only import what you need, this will make sure you have full control over your application and bundle size.

The Winner

Vue ecosystem is blessed with great UI component libraries. The friendly competition is beneficial to the Vue community who is the actual winner of this comparison because no matter what you choose, it won't be a wrong decision.

Authored By

Cagatay Civici PrimeTek