Best Vue.js UI Component Frameworks And Libraries part 2

Jonathan Saring
Bits and Pieces
Published in
6 min readMar 22, 2018

--

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 Bit to share and reuse your components between apps. It helps you discover and play with components, using them to build faster. Give it a try.

UI spinners with Bit: Choose, play, use

12. Iview

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.

iview UI components

13. Uiv

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.

Uiv Carousel component

14. Vuikit

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.

Vuikit Navbar component

15. Onsen UI Vue

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.

Onsen UI Vue.js components

16. Semantic UI Vue

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.

A Semantic-UI Vue.js comment-list component

17. Mint UI

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.

Mint-UI Lazyload Vue.js component

18. Framework 7 Vue

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.

Framework7 timeline component on android

19. Cube UI

A mobile UI library for Vue.js with high unit test coverage, consistent design, extendable and flexible components. Make sure to note the styling, create-api and better-scroll the project exposes. With nearly 3k stars, the library is actively maintained and updated.

Cube UI Vue.js Button components

20. Vueblu

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.

Vueblu progress bar component

21. Ant design for Vue.js

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.

Vue Ant design button combinations

22. n3 components

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.

n3 Vue.js button components

Keep an eye on:

Vuestrap base components

Vuestrap Base Components extend Bootstrap 4. Built with vuestrap, plain Vue.js and webpack. NOTE this project isn’t actively maintained.

Button radio component

Vue WeUI

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.

Vue WeUI progress bar component

Vue-MDC

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.

Building with components

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.

Learn more:

--

--

I write code and words · Component-driven Software · Micro Frontends · Design Systems · Pizza 🍕 Building open source @ bit.dev