PrimeVue vs Vuetify vs Quasar vs BootstrapVue
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.
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.
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.
|Vue 3 Support (Jan 2021)||✅|
|Fluent UI Theme||✅|
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.
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.
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.
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.
Over the past years, we've realized that bi-weekly release cycle is the sweet spot so PrimeVue has applied this approach as well.
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.
PrimeVue offers numerous vue-cli templates. Visit Vue.js official website to view the PrimeVue templates.
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.
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.
Cagatay Civici PrimeTek
Quasar does have auto tree shaking, accessibility and enterprise support. And it does not require sponsorship and is fully open source. Bootstrap and Vuetify are also open source and don't require sponsorship.
This seems like a proper fluff piece for Prime..
My dime, TL; DR: I like PrimeVue, but I hate the lack of community communication, lack of functionality in the components, and the oddity of supporting "old" versions. So...
1) PrimeVue still has wild bugs that can break the layout. t.co/Grm2gfDaGJ?amp=1
2) In PrimeView quite simple things are not implemented. For example, the ability to programmatically open and close a menu. t.co/67VPtgd0jG?amp=1
3) Complex components like AutoComplete are also lacks popular features that other frameworks / components have. t.co/bWVouD83XL?amp=1
4) No releases for 2.x branch in the last month. Although this version of Vue is still mainstream right now (I think).
5) I would like a little more attention from the developers to the community. I understand that there is paid support, but I'm afraid to try it. Bad feedback to regular open source developers.
The support for Vue3 is the only reason i currently switched from Vuetify to to PrimeVue. And i miss Vuetify every day.
It feels like going one step ahead (with the newer Vue version) and 2 back (with a less comfortable component library)
Supporting a lot of themes and being design agnostic is not always a good thing. How often do you choose to change the basic fabric of an already existing application?
Having a "swiss army knife" ist not always required, if you just need a ... knife.
Comparing both libraries directly, i still favour vuetify. The documentation is way better understandable (and actually in sync with the current stable version). It is better integrated in the vue cli (which makes it way more easy to install in the first place). The theming is not so packed (because it just supports one concept) and with that way better to understand. The api of the component themselfs are more intuitive (in my opinion). And it supports more basic layout structures which helps bootstrapping a new greenfield application enormously.
And to the point of depending on a sponsorship model: well, having a open source library which is 100% backed by a company (and 0 if that company decides to stop this type of support) is not so great then having a 100% independent crowd, which gets rewarded for there great work. or not, if it sucks balls.