Itachi Uchiha

Posted on Jan 16, 2019

Nice Vue UI Toolkits on GitHub.

#vue #javascript #githunt

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!

Top comments (22)

Jaaki • Jan 17 '19

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.

Itachi Uchiha • Jan 17 '19

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.

Jaaki • Jan 17 '19

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.

rhymes • Jan 17 '19

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

Jaaki • Jan 17 '19

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.

Reilly Lowery • Jan 17 '19

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

rhymes • Jan 17 '19

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!

Reilly Lowery • Jan 17 '19

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)

Derek D • Jan 17 '19

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.

rhymes • Jan 17 '19

So many component libraries :D

This was me in December 2017:

What Vue.js framework should I use?

rhymes

#vue

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

What about Quasar?

Itachi Uchiha • Jan 17 '19

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

rhymes • Jan 17 '19

That would be nice, thanks!

Drew Bragg • Jan 16 '19

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

Itachi Uchiha • Jan 17 '19

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

Nick Steele • Mar 18 '19

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.

Karolis • Jan 18 '19

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 :)