Top 11 Vue.js UI Component Libraries In 2018

  • 2018-06-04 04:39 AM
  • 361

11 Vue.js UI Component Libraries You Should Know In 2018

Unlike React and Angular, Vue.js is maintained by Evan You as an open source project sponsored through crowd-sourcing. At nearly 80k stars, and used by Adobe, Gitlab and other companies, Vue’s popularity exceeded expectations.

A big part of Vue’s success lies in its components. Working with components means you can think of each UI pieces in isolation, encourage reusability through modularity and keep your UI consistent.

Vue Components can also be combined with Bit to turn your components into building blocks which can be organized and used in multiple projects.

You can use it to easily share components between projects and applications, organize them for your team and sync them in all your projects while developing them and making changes from any project. Check it out.

1. Vuetify

At over 7k stars, Vuetifyjs provides a UI layout according to the material design specs. The V 1.0 Alpha release provides over 80 reusbale components with an easy-to-remember semantic design based on type-as-you speak properties that have simple and clear names.

2. Vue Material

A Vue component library implementing Google’s material design to the pixel. At 5k stars, it provides components that fit all modern Web Browsers with built-in dynamic themes and a clear goal to make its API as simple as possible.

3. Keen UI

Although inspired by the Material UI specs, Keen-UI isn’t really a Material UI library. Standing at 3k stars, it isn’t a CSS framework and doesn’t include a grid system or typography styles, but only components that require Javascript.

4. Element

At 21k stars (!) this widely popular Vue 2.0 toolkit for the web provides a rich selection of customizable components. Although the documentation might be simpler for Chinese speakers, this library has a living eco-system and presents a strong choice for your next Vue UI library.

5. Buefy

Buefy provides components built with Vue.js and Bulma. At nearly 2k stars, it provides lightweight components that are responsive out-of-the-box. Although component selection is somewhat limited, it kind of makes you want to give it a go.

6. Bootstrap-Vue

At 3k stars bootstrap-vue enables you to build mobile-first, responsive UIs with Vue.js and Bootstrap 4. Available for Vue.js 2.4+, it comes with an automated WAI-ARIA accessibility markup.

7. AT-UI

Build specially for desktop applications, AT-UI provides an npm + webpack + babel front-end development workflow. While the documentation (again) might be challenging for english speakers, it provides a decent selection of clean and neat UI components.

8. Fish-UI

Fish-UI is a toolkit for the web that works with webpack and ES2015. With little to no documentation, this library surprises with a rich selection of over 35 components with a nice structure for a clean and basic interface.

9. Quasar

At over 4k stars, this popular framework includes dozens of Vue.js components built with Vue and a uniquely rich selection of functionalities for responsive web apps and hybrid mobile Apps. Components are written as Web Components, so they embed HTML, CSS and Javascript code that you can use by just including an HTML tag in your Page and Layout templates.

10. Muse UI

At 5k stars Muse-UI is a Material Design UI library for Vue.js 2.0. Although you will probably need to speak Chinese here is as well, these tight components are strong in the race for those we seek a Vue.js Material Design.

11. Vux

At 10k stars, Vux is a widely popular component library for mobile apps inspired by WeChat’s weUI. Embrace for impact: the docs are in Chinese, but offers an English version. Every component can be interactively presented through the docs with a live “mobile” mocking demo.

Individual components

Individual components can be found in the popular awesome-vue project, under components and libraries. You can also add Bit to any Git repository to track and isolate components within it. Then, these components can be easily shared and any team member can install them with NPM/Yarn just like any other NPM package.

Wether you choose a library or design your own components, it seems that in 2018 Vue.js is a strong competitor for your next application, providing an easy to pick-up, lightweight and yet versatile framework.

Learn Vue Online

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Vue.js Fast Crash Course

The Complete JavaScript Course 2018: Build Real Projects!

Become a JavaScript developer - Learn (React, Node,Angular)

JavaScript: Understanding the Weird Parts

MERN Stack Front To Back: Full Stack React, Redux & Node.js

Vue JS Essentials with Vuex and Vue Router

Build Web Apps with Vue JS 2 & Firebase

Getting started with Vuejs for development

Vue and Laravel To-Do App - Restful API Project

Suggest