Vue.js is the JavaScript framework of choice for countless front-end developers because it’s easy to learn and use. Components are at the core of the Vue framework — they help you go from idea to a functioning UI much faster.
Vue is a lightweight, TypeScript-based UI component framework. It has a large community and is a great choice if you want to achieve Custom Design. Its extensive built-in directives are designed for best-in-class Typography, as well as excellent performance. It also offers extensive support for first-class TypeScript, which means that you can customize and translate the components in any language you want.
In this collection, you can find the best Vue UI component libraries that provide building blocks for productive user interface development with the Vue.js framework.
7 - 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.
6 - 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.
5 - Ant Design Vue
Another popular library which has the same design ethics as Element UI is the Ant Design Vue. It has great administrative templating styles and components. This library was originally created by a group of developers and designers from Alibaba. Therefore, it’s a great library if one wants to target e-commerce platform development in short time. However, just like Element UI, it was mostly targeted for Chinese developers and therefore most of the original documentations are in Chinese. Although there are translated versions available, some fonts and links are still in Chinese which couldn’t be exactly translated to English.
4 - 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.
3 - Vuetify
An unofficial library that works with Vue’s server-side rendering is Vuetify. It helps in creating clean, semantic, reusable UI components and makes the process of developing an interesting event.
One thing that differentiates Vuetify from others is the availability of ready-made scaffolding for code in the form of pre-made Vue CLI.
Although vuetify 3 is in alpha stage but coming soon.
2 - Quasar
Quasar is a power-packed framework that has over 81 components. If you are planning to develop a highly robust and responsive web and mobile application using Vue.js then, you should use quasar.
It is an extensive library on the list that does not have less than 19K downloads weekly. If a developer plans to integrate this, things will move more swiftly in the development process.
You can build all in one application using one framewrok.
1 - PrimeVue
PrimeVue is a great example of a framework that allows you to build complex, modern, and highly dynamic Vue applications. It has a wide range of components, from tables and paginators to well-designed graph-based organization charts, that you can use to create interactive Vue applications.
You can build user interfaces for enterprise software with this framework, too, as its components have been made for designing complex software applications. This also explains why the PrimeVue component library is trusted by Fortune 500 companies, such as Airbus, Ford, Intel, and others.
Bonus
AgnosticUI
One stylesheet…all the frameworks! UI components that work in React, Vue 3, and Svelte!
As you see this is the tagline from author and I really impressed that we can even use this library not only vue 3 but for other js frameworks and with pure js too. Super Cool! if you are starting a project go a head and try this lib.
Here are some highlights
💥 Easily build design systems that works in React, Vue 3, Angular, and Svelte!
🙌 Semantic and accessible HTML
💪 Unprocessed decoupled CSS
⚡ One stylesheet per component propagates to all framework
implementations
🖌️ Synchronized theming via CSS custom properties
Built with 💛 by Rob Levin
Conclusion
I would Personally prefer Quasar if you have plans for mobile apps and web app both and also server side rendering and PWA. Quasar can do all of this with same app with just very small configuiration changes.
But if you want a web app then go for PrimeVue it's more robust and maintained actively and has huge components library. Although if your app is small or medium then use Vuetify or vuestic UI because bundle size will me much smaller.
Sorry i forget to mention Tailwind so if you wanna design yourself then without any doubt go for Tailwind But be consistent in design :)
Let me know in comments if you know any other awesome UI library!
Top comments (11)
Hey, just to add another one that is worth having a peak - Kendo UI for Vue is a great Pro library specially built for Vue. More than 90 UI components among which is a powerful Grid, Charts, Scheduler, Form, DatePickers and many more (telerik.com/kendo-vue-ui).
Can you please consider adding AgnosticUI to this list? Accessible component primitives that work with Vue 3 (and also React, Svelte, and Angular)? Thanks! In full disclosure I'm the author and just trying to get the word out ;)
agnosticui.com/ and github.com/AgnosticUI/agnosticui
Hi, great to know just gave a star to your project.
I will check your library and will add on my article also if posible you can send me an article i will publish for you :)
antoniandre.github.io/wave-ui/
Wave ui is very good too :)
Just checked first in your List (Buefy)... not supporting Vue 3... So why you add it?
github.com/buefy/buefy
Thanks Stefan just replaced it :)
Hi, could you insert element-plus in your list?
It's a vue 3 component library, with a focus in desktop applications.
You can also try CoreUI for Vue - github.com/coreui/coreui-vue
Is Vuetify ready for Vue 3 and in a production environment?
Not yet by the time 22 Aug 2022.
now ready