Top 20: Best Open Source Vue.js UI Frameworks

Top 20: Best Open Source Vue.js UI Frameworks

To get started with Vue, you only need JavaScript and HTML knowledge. With these basic skills, you can start building simple applications in a couple of hours following the official guide. Every developer that starts with a new project know how time consuming can be, the process of designing its own UI elements. As every framework, there are extra libraries available to boost your development time like UI Kits. Vue.js is not the exception as there are plenty of UI kits that you can start using from scratch in your project running a couple of commands in your terminal to include them in your project.

In this top, we have collected 20 of the most imponent open source UI Kits that you can start using in your new project to provide an awesome user experience and boosting as well, the development time of your project. Enjoy them !

20. Office UI Fabric Vue

Github

Office UI Vue.js

This framework is an Office UI Fabric implementation for Vue.js, build with office-ui-fabric-js, a JavaScript collection of components for building experiences for Office and Office 365. 

19. Vuestrap

Github

Vuestrap

Vuestrap Base Components extend Bootstrap 4. Built with vuestrap, plain Vue.js and Webpack.

18. Semantic UI

Github

Semantic UI

Semantic UI Vue is the Vue integration for Semantic UI. It is highly inspired on Semantic UI React If you have used it already, you will find Semantic UI Vue's API to be almost the same. Semantic UI Vue is still under heavy development. Please, feel free to contribute.

17. VueBoot

Github

VueBoot

VueBoot is a project designed to ease the use of Bootstrap in VueJS applications. It takes the approach that the Bootstrap team has done a lot of hard work, and reproducing that work is beyond this project's scope. Because of that, we choose to use the official Bootstrap javascript, and simply wrap the API in a thin VueJS wrapper.

16. Framevuerk

Github

Framevuerk

Framevuerk, is a Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js with an awesome name.

15. Vue-Material

Github

Vue Material

Vue material is an useful UI Kit to design and build beautiful apps with Material Design and Vue.js. It is well-designed, so you can create apps that can fit on every screen with support to all modern Web Browsers.

14. N3-Components

Github

N3 Components

N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build web pages quickly. N3 components applys oneself to structure a great ecological circle of developers using Vue.js. Supporting as follows:

  • More than 60 components. See Here
  • Personality Of Style.
  • UMD.
  • Using ES6.

13. Fish UI

Github

Fish UI Vue.js

Fish UI is a Vue.js 2.0 UI Toolkit for the Web. This framework uses:

  • Vue.js, Moment, Vue-Router, ES6 & Babel 6
  • Cool with Webpack 2.0 & Vue Loader
  • Semantic CSS Components
  • Stylesheets in Less

12. VUI

Github

VUI Vue.js UI Framework

A UI framework for mobile, built with Vue. VUI provides components that look like native UI in iOS, Android and Windows UI. However, VUI will not build those animations as in Material design.

11. Vuikit

Github

Vuikit Vue.js UI Framework

While it is possible to use UIkit by its own when building Vue components, you may find yourself relying on too many dependencies and building a wrapper to fill the missing logic gap. Vuikit solves all that by providing native, unopinionated, components outputting UIkit layout.

10. Muse UI

Github

Muse UI Vue.js UI Framework

Muse UI basically implements every component outlined in the Material Design guideline, and also many other functional components for Vue.js. Muse UI uses less files, all colors are managed by variable. Custom themes can be completed through writing less files, components also provide parameters to modify their effects. Muse UI is developed based on Vue2.0, Vue2.0 is currently one of the fastest front-end framework, compact, friendly API, can be used for developing complex single-page applications.

9. iView

Github

iView UI Vue.js

iView is an advanced UI toolkit for Vue.js. It offers:

  • Dozens of useful and beautiful components.
  • Friendly API. It's made for people with any skill level.
  • Extensive documentation and demos.
  • It is quite beautiful.
  • Supports both Vue.js 2 and Vue.js 1.

8. Vuetify

Github

Vuetify UI Framework

Vuetify is a Material Component Framework fro Vue.js. Vuetify comes ready to go with 8 pre-made vue-cli templates. From simple html to full-blown SSR you are ready to go in minutes. Be prepared for an armada of specialized components at your disposal. With over 80 in total, there is a solution for any application.

7. UIV (Bootstrap 3)

Github

UIV Vue.js UI Framework

uiv is a Bootstrap 3 component lib implemented for Vue.js 2. The framework features:

  • Lightweight
    • All components ~20KB Gziped.
    • Dependencies only Vue & Bootstrap CSS.
    • No extra CSS.
    • Individually import supported.
  • IE 9+ & modern browsers supported.
  • SSR (server-side rendering) supported.
  • All env supported:
    • UMD build uiv.min.js can be used in all environments (including browser)
    • ES Module build uiv.esm.js is for modern bundlers like webpack 2 or rollup
    • CommonJS build uiv.common.js is for older bundlers like browserify or webpack 1.

6. Bootstrap Vue

Github

Bootstrap Vue.js

Bootstrap-Vue provides one of the most comprehensive implementations of Bootstrap V4 components and grid system available for Vue.js 2.4+, complete with extensive and automated WAI-ARIA accessibility markup.

5. AT UI

Github

AT UI

AT UI is a Lightweight and Modular Front-End UI Library for Vue.js. This framework features:

  • Based on Vue
  • A NPM + Webpack + Babel Front-End development workflow
  • Support ES2015
  • CSS Style independent, make consistent user interfaces (See: AT-UI Style)
  • Friendly API

4. Onsen UI Vue

Github

Onsen UI Vue.js

The Vue bindings for Onsen UI (VueOnsen) provide Vue 2 components and directives that wrap the core Web Components and expose a Vue-like API to interact with them.

3. Buefy

Github

Buefy UI Framework

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. This framework features:

  • Keep your current Bulma theme / variables easily
  • Supports both Material Design Icons and FontAwesome
  • Very lightweight with none internal dependencies aside from Vue & Bulma
  • About 60KB min+gzip (with Bulma included)
  • Semantic code output
  • Follows Bulma design and some of the Material Design UX
  • Focus on usability and performance without over-animating stuff

It offers support for recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.

2. Keen UI

Github

Keen UI Vue.js Framework

Keen UI is a lightweight Vue.js UI library with a simple API. The design is inspired by Google's Material Design. However, Keen UI is not meant to be a full implementation of the Material Design spec. Keen UI is not a CSS framework. As such, it doesn't include a grid system, typography styles, etc. Instead, the focus is on interactive components that require Javascript.

1. Element

Github

Element Vue.js UI Framework

Element is a Vue 2.0 based component library for developers, designers and product managers. This framework provide support for modern browsers and Internet Explorer 10+ and offers a React and Angular version as well. The documentation of the framework is available in spanish, english and chinese. With Element you will able to keep operating process simple and enunciate your intentions clearly so that the users can quickly understand and make decisions.

If you know another awesome open source UI framework for Vue.js, please don't be shy and share it with the community in the comment box.

This could interest you
Become a more social person