loading...
Cover image for Nice Vue UI Toolkits on GitHub.

Nice Vue UI Toolkits on GitHub.

aligoren profile image Ali GOREN ・4 min read

Hi. In this article, we'll see nice UI toolkits for Vue. If you're ready, let's start.

1-) Element

The first one will be Element. I think Element has nice components. I created a project as an example.

Github Repo: https://github.com/ElemeFE/element

Browser Support: Modern browsers and Internet Explorer 10+.

Installation: npm install element-ui -S

Quick Start

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

// or
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

2-) iView

The second one will be iView. Actually, I didn't use it on any project. Because of it a little bit slow. Just my opinion.

GitHub Repo: https://github.com/iview/iview

Browser Support: Most components and features support IE9 and above browsers, some components and features do not support IE

Installation:

Using npm:

npm install iview --save

Using a script tag for global use:

<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">

Quick Start

<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

3-) Vuetify

This one will be Vuetify. I've never used it. But their introduction like this;

Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.

Build amazing applications with the power of Vue and Material Design and a massive library of beautifully crafted components. Created according to Google's Material Design Spec, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.

GitHub Repo: https://github.com/vuetifyjs/vuetify

Browser Support:

Vuetify supports all modern browsers, including IE11 and Safari 9+ (using polyfills). From mobile to laptop to desktop, you can rest assured that your application will work as expected. Interested in the bleeding edge? Try the vue-cli Webpack SSR (Server side rendered) template and build websites optimized for SEO.

Installation:

with Vue CLI 3

vue create my-app

vue add vuetify

with NPM or Yarn

# npm
npm install vuetify

# yarn
yarn add vuetify

Quick Start

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

<v-app>
     <v-toolbar app>
       <v-toolbar-title>My Application</v-toolbar-title>
     </v-toolbar>
     <v-navigation-drawer app></v-navigation-drawer>
     <v-content>
       <v-container fluid>
          Hello World
       </v-container>
     </v-content>
   <v-footer></v-footer>
</v-app>

4-) Buefy

This one will be Buefy. Lightweight UI components for Vue.js based on Bulma. We used Buefy many times in our company projects.

GitHub Repo: https://github.com/buefy/buefy

Browser Support:

Recent versions of Firefox, Chrome, Edge, Opera, and Safari. IE10+ is only partially supported.

Installation:

Using NPM

npm install buefy

Using CDN

<!-- Include Material Design Icons -->
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

Quick Start

Bundle

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

or Individual Components

import Vue from 'vue'
import { Field, Input } from 'buefy/dist/components'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

or

import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'

Vue.use(Field)
Vue.use(Input)

5-) Ant Design Vue

I actually didn't use this UI toolkit. Their description like this;

Following the Ant Design specification, we developed a Vue UI library antd that contains a set of high-quality components and demos for building rich, interactive user interfaces.

GitHub Repo: https://github.com/vueComponent/ant-design-vue

Browser Support:

Modern browsers and Internet Explorer 9+ (with polyfills)

Installation:

Using NPM

npm install ant-design-vue --save

Using Yarn

yarn add ant-design-vue

Quick Start

Fully Import

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

The above imports Antd entirely. Note that CSS file needs to be imported separately.

Only import the components you need

import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'

Vue.config.productionTip = false

/* v1.1.2 */
Vue.component(Button.name, Button)
Vue.component(Button.Group.name, Button.Group)

/* v1.1.3+ Automatically register components under Button, such as Button.Group */
Vue.use(Button)

Vue.prototype.$message = message

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

I hope these ui toolkits will help you.

Thanks for reading!

Posted on Jan 16 '19 by:

aligoren profile

Ali GOREN

@aligoren

I'm a front-end developer. I'm living in Turkey. I started my professional career in 2016. I also interest in Backend, SQL technologies.

Discussion

markdown guide
 

I've looked at the same tool kits you mentioned here, plus about 15 more.
Built tiny examples with a number of them.

Right now I'm using Vuetify, as I was using Polymer + Material before and I though it would give me a good indication of how the environment works and looks.

Also, I decided to go with something that has a stronger community behind it, because I want it to be around for a while still.

But I must say, there are some good looking toolkits out there and I'm going to try some other ones for bigger projects soon.

 

My suggestion is Buefy. But Buefy's community isn't large like others. So, If you encounter a problem, you may not always find an answer.

I'll try Vuetify in an example project.

 

Yes, that's the thing. After the Polymer community just disappeared overnight, I'm kind of scared of the same thing happening again.

I'll try Buefy. When I tried Bulma, which it is based on, I felt that I wanted complete components, not just css classes, so maybe buefy is perfect.

I've used Buefy for a few months (until August 2018) and liked it (Bulma too), the biggest concern I had was that I couldn't include only the components I needed and leave out the rest.

I just checked and it seems they've implemented such feature: github.com/buefy/buefy/pull/826

So my recommendation is Buefy as well :D

I've also used Vuetify, bigger community than Buefy but you have to like material design

Will def check it out now.

I remember seeing Material design for the first time long ago, and I thought to myself, "This looks terrible", but I've gotten used to it I think.

Buefy is solid and gets updated pretty regularly, I've had it in a web app for 8 plus months never had an issue or had an update break anything

They inadvertantly broke the color scheme at 0.6.7 - github.com/buefy/buefy/issues/980 - but you might not have noticed if you had it customized (we didn't). Aside from that, they've been pretty solid!

Ouch, that is kind of brutal on a minor release. I have our setup completely customized your right so I wouldn't have noticed.

On a side note has anyone used

iviewui.com/

It looks really nice and has 20k stars (even though they are obviously not US based)

I had my own custom built component library built on Bulma at my work but it was getting too difficult to maintain by myself, so I switched to Buefy. So far the team has been very quick to respond to issues and I plan to contribute a ton of accessibility fixes in the near future.

Vuetify has a lot of cool components, but I really don't like it's design for anything other than native apps and I don't use Vue for native apps...

I REALLY like Element UI's look, but it's only designed for desktop, which is pretty useless.

So many component libraries :D

This was me in December 2017:

I REALLY like Element UI's look, but it's only designed for desktop, which is pretty useless.

What about Quasar?

I really like Quasar. I used today. Maybe I write a review about it.

 

I use vuetify in a few different applications and can confirm it's pretty great with a fairly response team/community.

 

Can you share your experience with us? For example, what were the good and bad things?

 

Why isn't Quasar on this list? It's more capable than them all, and more popular than most... seems a real shame not to mention it, and a bit of a shock.

 

I have been using Vuetify since probably its inception and so far - super happy. There were some hard times when it was making breaking changes but for the last 6-9 months it's really stable and makes you super productive :)

 

I vote Buefy all the way to the top, using it in a large scale Vue / PHP web app and love it.

 

Yes, I agree with you. We used Buefy in our projects.

 

I'm planning on using Element but I haven't tried it yet as I'm still working on the API.
I'm looking forward to finally reaching the GUI phase.

 

I'm not sure if this falls under UI toolkits or a theme but Vuestic is a great admin theme with many components:
vuestic.epicmax.co

 

Why not? It looks good.

Normally, Buefy developed for general purposes. But I created an admin panel with it.

Which means you can create other type single page applications with Vuestic. Everything depends on you.

 

Nice post, I did not know iView and it looks awesome !
At.ui is also a very good Vue UI Toolkits at-ui.github.io/at-ui/#/en