Discover Vuetify, Vue material design .Vue.js UI Component Libraries for 2019, tools and frameworks to build an amazing app in 2019.
A while ago I released part one of the complete list for best Vue.js UI component libraries and frameworks including Quasar, Vuetify, Vue Material, Keen UI, Element UI, Buefy, Bootstrap-vue, AT UI, Fish UI, Muse UI and Vux.
Thanks to many popular suggestions, here is the second part of the (unranked) list with more great Vue.js UI component libraries for building your Vue.js application with modularity though reusable components.
Tip: Use Bitto share and reuse your components between apps. It helps you discover and play with components, using them to build faster. Give it a try.
At nearly 14k stars iview is a UI kit for Vue.js 2.0 (here’s the Vue.js 1.0 branch) with dozens of UI components used by Alibaba, Lenovo TalkingData and other companies. The components’ design emphasizes contrast and repetition, and the library even provides its own designated CLI tool for scaffolding projects.
This UI kit provides Bootstrap 3 components implemented with Vue 2. With minimal dependencies (only Vue and Bootstrap CC), lightweight components (all components together ~20kb gzipped), serverseide rendering supported and a verity of supported environments, it’s worth checking out.
One of my favorites, this library is a consistent and responsive Vue UI library, based on the UIkit framework with a beautiful minimalistic, clean design according to the YOOTheme design guidelines. Default styles are provided and you can also use custom themes while keeping components consistent.
Vue bindings for Onsen UI provide Vue 2 components and directives that wrap the core web Components and expose a Vue-like API to interact with them, emulating iOS and Android UI guidelines and designs for hybrid apps. Onsen UI Components for Vue are also designed to act reactively to received props.
Semantic UI Vue is the Vue integration for Semantic UI. Still under development, it provides an API similar to that of Semantic-UI with implementing Semantic-UI design with customizable themes (unless using the
semantic-ui-css NPM module). Here is a JSFiddle example.
At over 10k stars this popular library provides a toolkit of JS and CSS components and mobile UI elements for Vue.js apps (including support for Vue 2.0). These components are lightweight with only 30kb gzip of space when importing all the components. Although widely popular, note that the project’s development has slowed down during the past months.
This project brings components-syntax, structured data and data bindings to Framework7 with Vue.js, providing almost all Framework7 elements and components with integration of Framework7 Router to render pages in a Vue completable way. The project is under active development and maintenance.
A mobile UI library for Vue.js with high unit test coverage, consistent design, extendable and flexible components. Make sure to note the
better-scroll the project exposes. With nearly 3k stars, the library is actively maintained and updated.
A flexible and UI components library for web application based on Vue (2.0) and Bulma. Although maintenance is temporarily suspended, this library contains dozens of components inspired by Bulma and Ant design.
At 1.5k stars is a Vue.js component library UI implementation of the popular ANT design guidelines for enterprise-level user applications, which comes with a webpack-based debug build solution supporting ES6. NOTE that this project wasn’t maintained for the past 2 years, so use it with discretion.
N3 components is Vue.js component UI kit for the web with over 40 components using ES6 and implementing a simple-looking design and customizable styling. Worth taking a look at for your next app.
Vuestrap Base Components extend Bootstrap 4. Built with vuestrap, plain Vue.js and webpack. NOTE this project isn’t actively maintained.
This adaptation of the We UI framework for Vue.js contains a small collection of somewhat brutally designed components . NOTE that this project wasn’t maintained for the past 2 years.
Replacing the popular Vue-mdl library (which is now under limited support), Vue-mdc provides and adaptation of material web components for Vue.js. This project is still under construction (which is halted for a few months now), but might be worth keeping an eye out for.
While these libraries (and the ones in part 1 of the list) can be a great solution for quickly building the UI of your next Vue.js app, you can also find individual components in the official awesome-vue project.
In order to simplify the workflow around these components and avoid the overhead of using entire libraries or keeping separate repos for different components, you can also use Bit to turn components into building blocks which can be shared and synced directly between different applications.
What are the differences? Do they each have specific use contexts?
In this article we will discuss full details and comparison of both Ember.js and Vue.js