DEV Community

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

Nice Vue UI Toolkits on GitHub.

itachiuchiha profile image Itachi Uchiha ・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)
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Quick Start

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

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
Enter fullscreen mode Exit fullscreen mode

with NPM or Yarn

# npm
npm install vuetify

# yarn
yarn add vuetify
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Quick Start

Bundle

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

Vue.use(Buefy);
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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/>'
})
Enter fullscreen mode Exit fullscreen mode

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/>'
})

Enter fullscreen mode Exit fullscreen mode

I hope these ui toolkits will help you.

Thanks for reading!

Discussion (22)

pic
Editor guide
Collapse
jaakidup profile image
Jaaki

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.

Collapse
itachiuchiha profile image
Itachi Uchiha Author

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.

Collapse
jaakidup profile image
Jaaki

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.

Thread Thread
rhymes profile image
rhymes

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

Thread Thread
jaakidup profile image
Jaaki

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.

Thread Thread
rifi2k profile image
Reilly Lowery

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

Thread Thread
rhymes profile image
rhymes

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!

Thread Thread
rifi2k profile image
Reilly Lowery

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)

Thread Thread
dinsmoredesign profile image
Derek D

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.

Thread Thread
rhymes profile image
rhymes

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?

Thread Thread
itachiuchiha profile image
Itachi Uchiha Author

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

Thread Thread
rhymes profile image
rhymes

That would be nice, thanks!

Collapse
drbragg profile image
Drew Bragg

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

Collapse
itachiuchiha profile image
Itachi Uchiha Author

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

Collapse
onexdata profile image
Nick Steele

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.

Collapse
krusenas profile image
Karolis

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

Collapse
rifi2k profile image
Reilly Lowery

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

Collapse
itachiuchiha profile image
Itachi Uchiha Author

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

Collapse
thomasaudo profile image
thomasaudo

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

Collapse
motatoes profile image
Mohamed

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

Collapse
itachiuchiha profile image
Itachi Uchiha Author

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.

Collapse
kurisutofu profile image
kurisutofu

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.