“Why bother with Vue UI component libraries?” Well, Vue, or Vue.js, is a popular JavaScript library you can use to create dynamic applications on the front end. Since its humble beginnings in 2014, it has gathered momentum in the last two years. Vue has emerged as the main competitor to Angular and React, and one of the reasons for Vue’s popularity is the wide use of components, which make development much easier to grasp.
In this post, we cover some of the most interesting Vue UI component libraries that you should look into first. They will certainly come in handy if you have a Vue application in the works!
Vuetify is a framework over Vue, which lets you create clean, semantic, reusable UI components. It works with Vue’s Server Side Rendering (SSR).
What makes Vuetify an interesting choice among the best Vue UI component libraries is the availability of ready-made scaffolding for code – in the form of pre-made vue-cli templates. This helps you get started quickly. Vuetify also has a good community and regular updates.
Buefy is a lightweight UI component library based on Vue and Bulma, a CSS framework. This framework, though bundled with Bulma, is less than 100 KB.
If you are comfortable with SASS, you will feel right at home with Buefy’s similarities with SASS. That being said, while Buefy provides a ready-made list of components to use for a beginner application, you may find it insufficient if working on a large project.
Fish UI is a lightweight Vue UI component library toolkit, with support for webpack and ES2015.
At the time of writing in January 2019, this project only had four contributors. However, there’s been some activity within the last month, which suggests that it is still active. You can head over to the documentation of the project to give it a try!
Quasar is a front end framework based on Vue. You should consider it if you plan to work on responsive web and mobile applications. It is a full-fledged framework that supports features like minification and caching – in addition to components for your framework. As of January 2019, it has over 8k stars on GitHub.
Quasar is perhaps the most extensive of all the Vue UI component libraries we have covered here. It has in-depth documentation and robust, end-to-end implementation.
Vux is a framework based on WeChat’s WeUI and webpack, on top of Vue. However, the documentation is mostly in Chinese, with minimal English translation. Vux primarily emphasizes on quick development of mobile components for your application.
Here is a live demo of Vux, which lists down all components and their rendering in the browser.
Element is a UI component library for the web that also has versions for React and Angular, in addition to Vue. This component library is specifically focused on desktop applications, as its components are not responsive.
Element, too, has significant documentation in Chinese, although Spanish and English translations are provided. Non-native Chinese speakers should go through the internationalization documentation before using Element in their projects.
Keen-UI, unlike most other Vue UI component libraries featured in this article, focuses on interactivity through JavaScript rather than visual components. Keen-UI is inspired by Google’s Material Design, and comes with an easy to use API.
Keen UI does not reiterate the need to be used across your application and has a few useful components that can be strategically placed wherever needed. Hence, Keen UI is a good choice when adding iterative features to an existing application.
AT-UI is yet another Vue UI component library with a focus on desktop applications.
AT-UI provide flat UI components for your web applications. There are 14 contributors and not much support available, though there is a starter template on GitHub you can use.
Mint UI is a lightweight Vue UI component library that is based on the Babel JavaScript compiler. The small size of this package makes it suitable for use in mobile applications. Mint UI provides an iOS-like theme for the components of your application. Here is a demo of the Mint UI components.
Mint UI has over 13k stars on GitHub. Development on the framework is still going on in full swing, with new commits to the master branch in mid January. However, a quick glance at the issue tracker on GitHub will tell you that Mint UI caters to Chinese developers most of all.
VuePress is a static site generator based on Vue. This framework uses webpack to create pre-rendered static HTML pages (how about static WordPress sites?), which makes the processing considerably faster.
The use of VuePress opens up a lot of possibilities for your project — like automating your documentation process. It is easy to integrate into your existing application, too. However, a considerable drawback is that SEO support is still new, and the documentaiton does not focus on this topic yet.
Eagle.js is a framework in Vue that enables developers to create a slideshow within a web application. There are many themes, animations, widgets, and styles to choose from and customize in Eagle.js.
Even though Eagle.js provides a good number of examples on the demo site, documentation is still minimal. The obvious alternative to Eagle.js is Reveal.js, a standalone JavaScript framework for web slideshows. However, Eagle.js overcomes the biggest flaw with Reveal.js — the slideshow structure rigidity.
Bootstrap-Vue brings the power of Bootstrap, a widely used CSS library, into Vue. It provides you with readily available UI components and a grid system, plus everything is mobile-first and responsive. Further, the components of this library are compatible with the WAI-ARIA guidelines for web accessibility. Keeping up with Bootstrap’s philosophy of quickly creating UI components, Bootstrap-Vue enables a developer to quickly start a project.
The documentation is extensive and community support is strong, which makes it a safe option for someone to start a project with.
iView UI is a library in Vue that provides UI components and widgets, with a focus on neat design. iView has its own command line interface (CLI) tool, iView-cli, which provides a visual tool for component scaffolding and an offline version of the documentation. It is actively maintained, with regular updates solving bugs and adding features.
If you are using iView in your project, here is a starter kit, which will help you get started with the basic usage of the library.
Which Vue UI component library to pick?
We have listed 11 Vue UI component libraries here that perform various functions, but which is best? Well, the answer, as usual, is “it depends.” If you want a complete solution, you may want to go ahead and pick Quasar. On the other hand, if you are looking for a plug-and-play solution for your existing projects, you may want to go ahead with Vuetify or Keen-UI.
Which Vue UI component libraries do you use in your projects? Do let us know in your comments below.
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
