This article lists the top 7+ Vue component libraries that you should consider using in your projects.
Vue component libraries provide a collection of pre-built components that you can use to quickly and easily build Vue applications. They can save you a lot of time and effort, and they can also help you to build more consistent and professional-looking applications.
Source: Bootstrap Vue
BootstrapVue is a Bootstrap-based CSS library that combines concepts of both Bootstrap and Vue. Using this library, you can create responsive, mobile-first, ARIA-accessible web projects.
Bootstrap Vue has more than 350,000 weekly NPM downloads and 14,000 GitHub stars.
You can easily install Bootstrap Vue using NPM or Yarn, as follows.
// Using NPM
npm install bootstrap-vue// Using Yarn
yarn add bootstrap-vue
The following code shows an example of a Bootstrap Vue button.
// app.js file
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)// app.vue file
<div>
<b-button variant="outline-primary">Button</b-button>
</div>
Source: Vuetify
Vuetify is a beautiful Vue UI package that uses Material design specifications. It comes with various responsive, modular Material components that you do not require any design skills to use.
Vuetify has more than 433,000 weekly NPM downloads and 35,000 GitHub stars.
You can easily install Vuetify using NPM or Yarn, as follows.
// Using NPM
npm install vuetify// Using Yarn
yarn add vuetify
The following code shows an example of a Vuetify button.
// app.js file
import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
new Vue({
vuetify: new Vuetify(opts),
render: h => h(App)
}).$mount("#app");// app.vue file
<template>
<v-btn depressedcolor="primary">
Primary
</v-btn>
</template>
Source: Buefy
Buefy is a lightweight Vue UI component library based on Bulma. Bulma is primarily static CSS that offers no practical advantages. Buefy fixes that by providing valuable elements that utilize Bulma’s CSS right out of the box. Buefy is an excellent library to use if you are familiar with Bulma, since it offers a solid integration.
Buefy has more than 64,000 weekly NPM downloads and 9,000 GitHub stars.
You can easily install Buefy using NPM, as follows.
// Using NPM
npm install buefy
The following code shows an example of a Buefy button.
// app.js file
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)// app.vue file
<template>
<section>
<b-button @click="click">Click</b-button></section>
</template>
<script>
export default {
methods: {
click() {
this.$buefy.notification.open('Button Clicked!!')
}
}
}
</script>
Source: Quasar
Quasar is another popular Vue component framework introduced to implement high-performance Vue.js user interfaces. It offers support for desktop and mobile browsers right out of the box. It has more than 85,000 weekly NPM downloads and 21,000 GitHub stars.
You can easily install Quasar using NPM or Yarn, as follows.
// Using NPM
npm install quasar// Using Yarn
yarn add quasar
The following code shows an example of a Quasar button.
// app.js file
import Vue from 'vue'
import { Quasar } from "quasar";
Vue.use(Quasar);// app.vue file
<template>
<q-btn color="purple" label="Purple" />
</template>
Source: Element Plus
Element Plus is a UI component library based on Vue 3 that was introduced as the successor of the popular library, Element UI. It offers a set of complex UI components to make developers’ work easier, including timelines, calendars, data pickers, and trees. In addition, you can translate every string in Element Plus UI components using the i18n standard.
Element Plus has more than 97,000 weekly NPM downloads and 17,000 GitHub stars.
You can easily install Element Plus using NPM or Yarn, as follows.
// Using NPM
npm install element-ui// Using Yarn
yarn add element-ui
The following code shows an example of an Element Plus button.
// app.js file
import Vue from 'vue'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
Vue.use(ElementPlus);// app.vue file
<template>
<el-button type="success">Success</el-button>
</template>
Source: Vue Material
Vue Material is a simple, lightweight Vue component library built based on Material design specs. It provides more than 50 fully responsive components, allowing you to create well-designed applications for any solution.
Vue Material has more than 15,000 weekly NPM downloads and 9,000 GitHub stars.
You can easily install Vue Material using NPM or Yarn, as follows.
// Using NPM
npm install vue-material// Using Yarn
yarn add vue-material
The following code shows an example of a Vue Material button.
// app.js
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)// app.vue file
<template>
<md-button class="md-primary">Primary</md-button>
</template>
Source: Mint UI
Mint UI is a library of mobile UI elements based on Vue. It provides styles for pages and handles elements similar to what we see in mobile applications allowing developers to build mobile-like UIs using Vue.
Mint UI has more than 3,500 weekly NPM downloads and 16,000 GitHub stars.
You can easily install Mint UI using NPM, as follows.
// Using NPM
npm install mint-ui
The following code shows an example of a Mint UI button.
// app.js
import Vue from 'vue'
import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
Vue.use(MintUI)// app.vue file
<mt-button type="primary">primary</mt-button>
Source: iView
iView is a top-notch Vue UI component library that provides various functional and attractive components. It provides many ready-to-use features and components, including a login/logout page, breadcrumb and tab navigation, a lock screen, a message center, forms, and table elements.
iView has more than 12,000 weekly NPM downloads and 24,000 GitHub stars.
You can easily install iView using NPM or Yarn as follows.
// Using NPM
npm install iview//Using Yarn
yarn add iview
The following code shows an example of an iView button.
// app.js
import Vue from 'vue'
import iView from "iview";
import "iview/dist/styles/iview.css";
Vue.use(iView)// app.vue file
<template>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</template>
Source: Vux
Vux is a UI library that provides mobile UI components based on Vue and WebUI. Vux documentation is primarily written in Chinese and has a Chinese provenance.
Vux has more than 1,900 weekly NPM downloads and 17,600 GitHub stars.
You can easily install Vux using NPM, as follows.
// Using NPM
npm install vux
The following code shows an example of a Vux button.
// app.js
import Vue from 'vue'
import { XButton } from 'vux'
Vue.component('x-button', XButton)// app.vue file
<template>
<x-button class="weui-btn weui-btn_default"> Button </x-button>
</template>
#vue #vuejs