Nice Vue UI Toolkits on GitHub.
Tags: vue, javascript, githunt
Published: 2019-01-16 18:36:16

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.

![](https://thepracticaldev.s3.amazonaws.com/i/l53uuymreuli6emmamzk.png)

**Github Repo:** [https://github.com/ElemeFE/element](https://github.com/ElemeFE/element)

**Browser Support:** Modern browsers and Internet Explorer 10+.

**Installation:** `npm install element-ui -S`

### Quick Start

```js
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.

![](https://thepracticaldev.s3.amazonaws.com/i/coo2mtizsdjm1joljxyz.png)

**GitHub Repo:** [https://github.com/iview/iview](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:

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

### Quick Start

```vue
<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.  

![](https://thepracticaldev.s3.amazonaws.com/i/fonz4rujl0czarleeuii.png)

**GitHub Repo:** [https://github.com/vuetifyjs/vuetify](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

```shell
vue create my-app

vue add vuetify
```

with NPM or Yarn

```shell
# npm
npm install vuetify

# yarn
yarn add vuetify
```

### Quick Start

```js
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.

![](https://thepracticaldev.s3.amazonaws.com/i/1a1rtewhwu2zvymsi7rd.png)

**GitHub Repo:** [https://github.com/buefy/buefy](https://github.com/buefy/buefy)

**Browser Support:**

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

**Installation:**

Using NPM

```shell
npm install buefy
```

Using CDN

```html
<!-- 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

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

Vue.use(Buefy);
```

or Individual Components

```js
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.  

![](https://thepracticaldev.s3.amazonaws.com/i/ulc10vejgc6qmfji2wm0.png)

**GitHub Repo:** [https://github.com/vueComponent/ant-design-vue](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

```js
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

```js
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!