Top 10 Vue component libraries for 2020

 Vue is a popular JavaScript library you can use to create dynamic applications on the frontend. Since its inception in 2014, Vue has continually gathered momentum year over year, capturing the hearts of many developers based on its flexibility, simplicity, and ease of use.

Vue is regarded as the main competitor to Angular and React, and at some point in 2018, it surpassed React’s star count on GitHub. One of the reasons for Vue’s popularity is the ease it provides developers creating web components.

As a rapidly growing framework, more community members are creating various packages to simplify various aspects of development with Vue.

In this post, we’ll look at the fastest-growing Vue libraries over the past year while looking at some of its use cases. We’ll also talk about some tips that will help you optimize your experience with Vue.

N/B: This post assumes you know or use Vue. If you want to learn more about Vue, check out the docs here.

Element UI

Element UI is a Vue component library for developers, designers, and product managers. Its components are not responsive and its main use case is creating desktop applications.

Element UI has an active set of maintainers and a strong community behind it (about 500 maintainers).

It currently has over 43k stars on GitHub, making it one of the most popular component libraries part of Vue.

It originates from China and therefore has significant documentation in Chinese, although Spanish and English translations are available.

International users should go through the internationalization documentation before using it in their projects.

One thing I love about this library is that it is meticulously thought-out down to the smallest detail.

It is built based on a design system created by the makers. It has a lot of materials and information to help you understand the decisions, the components it offers, and several of its resources. If you’re building desktop applications, this is a good library to consider.

Vuetify

Vuetify is the unofficial Material Component Framework for Vue.

It lets you create clean, semantic, reusable UI components and also works with Vue’s Server-Side Rendering (SSR).

Vuetify makes developing UIs a breeze. You don’t need to have any design skills to use Vuetify. With over 80 Vue components, It provides everything you need to create amazing applications.

Its popularity is constantly growing, and it currently has over 23K stars on GitHub. It’s also being downloaded over 200k times every week on npm.

Vuetify has a vibrant community behind it, with over 400 contributors who have created over 20 Vuetify plugins.

They also have a professional support team to help with enterprise problems and a discord channel if you ever need to ask for help. If you’re looking to create simple yet elegant interfaces, you should checkout Vuetify.

Bootstrap Vue

Bootstrap Vue is a UI kit based on the bootstrap library. It simply replaces the JavaScript in the regular bootstrap components with Vue code.

With Bootstrap Vue, you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world’s most popular frontend CSS library — Bootstrap v4.

It provides you with readily available mobile-first and responsive UI components, as well as a grid system. Using Bootstrap Vue is often great and intuitive to use because of the number of already available bootstrap themes.

It is arguably the fastest way to get started building interfaces using Vue and bootstrap.

It has gained popularity over the years and now has over 10k stars on GitHub.

It also gathers over 200k downloads on npm weekly. If you want to build Vue apps quickly, bootstrap Vue can help you start up quickly as it has a lot of starter kits, resources, and themes readily available for use.

Buefy

Buefy provides lightweight UI components for Vue.js based on Bulma.

Buefy has two core principles: To keep things simple and to be lightweight. This explains why its only dependencies are Vue and Bulma.

Buefy simply adds a JavaScript layer for interfaces created with Bulma CSS.

The components follow Bulma design and some of the Material Design UX.

Although it has just over 40 components, it provides you with readily available mobile-first and responsive UI components. You can find various applications created with Buefy on their expo page here.

It has gained popularity over time and now has over 7k stars on GitHub.

It also gathers over 29k downloads on npm weekly.

If you want to build Vue apps with simple and intuitive user interfaces, Buefy can help you get started very quickly.

Vue Material

Vue Material is simple, lightweight and built exactly according to the Google Material Design specs.

It’s completely responsive and can help you build well-designed apps that can fit on every screen with support for all modern Web Browsers.

Vue Material provides over 56 components to build different types of layouts. It has inbuilt code splitting, since you only need to import the components you are using.

It has been downloaded over 1.2 million times on npm and currently has over 8k stars on GitHub.

Vue Material is regarded as the best integration between Vue.js and Material Design specs because of its easy-to-use API.

If you’re looking at building Vue applications with Google’s Material Design you should check it out. You can check out some of Vue Material’s premium themes here.

Quasar

Quasar is yet another Vue framework that follows the Material 2.0 Guidelines.

The framework exists to help you build high-performance Vue.js user interfaces in record time.

Quasar has up to 81 components. It is easily customizable, extendable, and provides support for desktop and mobile browsers (including iOS Safari!) out of the box.

With Quasar, you get first-class support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app) and the best developer experience through tight integration with our own CLI.

It’s quickly gaining popularity and currently has over 13k stars on GitHub and is being downloaded over 19k times weekly on npm.

If you want to build Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps — all using the same Vue codebase — you should check it out.

Vux

Vux is a UI library that provides Mobile UI Components based on Vue & WeUI (the folks behind WeChat).

The library also supports a WebPack + Vue-Loader + Vux workflow.

Vux also has a Chinese origin and has most of its documentation in Chinese, with minimal English translation. Vux primarily emphasizes quick development of mobile components for your application.

It’s gaining massive popularity and currently has over 16k stars on GitHub, being downloaded over 1k times weekly on npm.

It’s also a very good library to consider if you want to build mobile apps with Vue. Although the documentation is mostly in Chinese, you can get help from their live community hub.

iView

iView is a high-quality UI toolkit built on Vue.js 2.0.

It provides dozens of UI components and widgets built with Vue.js and styled with a clean and elegant design.

iView is widely adopted and actively maintained, and comes with its own CLI tool to help visually create projects and an offline version of the documentation.

It’s quickly gaining popularity and currently has over 23k stars on GitHub and is being downloaded over 10k times weekly on npm.

If you want to use iView in your project, you can check out this starter kit, which will help you get started with the basic usage of the library.

Vue Material Kit

Vue Material Kit provides 60 handcrafted components, two customized plugins, and three example pages.

Vue Material Kit can help greatly in speeding up your design/development process when building new sites or web apps.

Basic knowledge of JavaScript, Vue.js and Vue Router is required. It’s intuitive, pretty easy to grasp, and beautiful.

Vue Material Kit contains components you need in a dashboard, as well as handpicked and optimized Vue plugins.

Everything is designed to fit with one another. The dashboard you can access on the Creative Tim website is a customization of this product.

If you want to build a dashboard application and don’t want to spend much time thinking about putting components together, you should get started by checking out the docs and installation instructions here.

Mint UI

Mint UI provides abundant CSS and JS components for building mobile applications. With Mint UI, you can create web pages in cohesive styles faster.

Mint UI is also pretty light-weight and intelligently loads on demand, importing components and their style sheets only when needed to truly liberate you from excessive file sizes.

The small size of this package makes it suitable for use in mobile applications. Mint UI provides an iOS-like theme for the components of your application.

Mint UI is very popular and has over 15k stars on GitHub and is being downloaded over 3k times weekly on npm.

It’s a good place to start if you are building mobile-first applications.

Conclusion

In this post, we looked at the 10 most popular and fastest-growing Vue component libraries, as well as the types of applications they serve best.

Before diving into Vue projects, you should take time to review these frameworks and libraries as they can save you a ton of time during development.

Happy coding!

How to use Font Awesome 5 on VueJS Project

Font Awesome is a popular icon library which I used a lot in my Vue.js related project. Since it’s updated from Font Awesome 4 to Font Awesome 5, I have confronted with couples of problems when integrated with VueJS project. I would like to share the ways I’ve been used to add Font Awesome to my VueJS project.

In this article, I only deal with the free version of Font Awesome. For the Pro version, the process is pretty much similar.

The easiest way

The simplest way is using CDN. You can enter your email into Font Awesome website and then get CND link

Add the script to head section of index.html

<script src="https://kit.fontawesome.com/your-code-number.js"></script>

then you can use font awesome in your template with normal syntax:

<i class="fab fa-medium"></i>
<i class="far fa-envelope"></i>

The better way

I’m using vue-cli to create VueJS project and manage dependencies with npm (sometimes I use yarn). So I prefer using npm to install Font Awesome instead of adding a CDN link to head section. Fortunately, it can be done easily:

$ npm install --save-dev @fortawesome/fontawesome-free

then in main.js, import css and js file

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'...new Vue({  router,  store,  render: h => h(App),}).$mount('#app')

and then use it as normal in Vue template

<i class="fab fa-medium"></i>
<i class="far fa-envelope"></i>

The best way (or the Vue way)

Above way is pretty easy, but it has a downside: it will bundle all available icons to your final bundle, which has a big size. We need another way to only import a small number of icons which are actually used in the project.

There is an officual vue-fontawesome package which you can use. You can install with npm

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons 
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

Import in main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'library.add(faSpinner)
Vue.component('font-awesome-icon', FontAwesomeIcon)...
new Vue({  router,  store,  render: h => h(App),}).$mount('#app')

Now you can use it in Vue template with font-awesome-icon component

<template>
  <div id="app">
    <font-awesome-icon icon="spinner" />
  </div>
</template>

It’s not very straightforward. There are some gotchas you need to notice:

Gotcha 1

There are multiple prefixes with Font Awesome 5, above syntax is a shorthand for

<font-awesome-icon icon="spinner" />
<font-awesome-icon :icon="['fas', 'spinner']" />

That means fas is default. If you want to use different prefix, you need to make it explicitly:

// main.js
import { faVuejs } from ‘@fortawesome/free-brands-svg-icons’
library.add(faVuejs)// template
<font-awesome-icon :icon=”[ 'fab', 'vuejs' ]” />

There are 4 different styles, you can find more information here

Gotcha 2

Import each icon seems tedious. You need to remember which icons are used to import. If you need to import 10 icons, your code might become:

import { 
    faCoffee, faSpinner, faEdit, faCircle, faCheck,
    faPlus, faEquals, faArrowRight, faPencilAlt, faComment
} from '@fortawesome/free-solid-svg-icons';library.add(
    faCoffee, faSpinner, faEdit, faCircle, faCheck,
    faPlus, faEquals, faArrowRight, faPencilAlt, faComment);

It’s not very nice. Luckily, you can import entire styles:

import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

then done. You don’t need to import each icon individually anymore.

Gotcha 3

By default, when using @fortawesome/fontawesome-svg-core package, you can’t use the syntax <i class=”fas fa-coffee”></i>

<i class="fas fa-coffee"></i> // not work
<font-awesome-icon icon="coffee" /> // work

To make automatically transform from <i></i> to <svg></svg>, you need to enable manually

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch()

then <i class=”fas fa-coffee”></i> will work. It’s very helpful when you need to use Font Awesome in the 3rd library like Bootstrap 4 Datepicker

Conclusion

Font Awesome is just an … awesome library. With this article, I hope you will find it easier to add icons to your Vue.js application. There are many more features which you can find on official page. Happy coding!

How To (Safely) Use A jQuery Plugin With Vue.js

It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it.

But you're probably reading this not because you want to use jQuery and Vue together, but because you have to. Perhaps a client is insisting on using a particular jQuery plugin that you won't have time to rewrite for Vue.

If you're careful about how you do it, you can use jQuery and Vue together safely. In this article I'm going to demonstrate how to add the jQuery UI Datepicker plugin to a Vue project.

And just to show off a bit, I'm even going to send data between this jQuery plugin and Vue!

See it working in this JS Bin.

jQuery UI Datepicker

The problem with using jQuery and Vue together

Why is doing this potentially hazardous?

Vue is a jealous library in the sense that you must let it completely own the patch of DOM that you give it (defined by what you pass to el). If jQuery makes a change to an element that Vue is managing, say, adds a class to something, Vue won't be aware of the change and is going to go right ahead and overwrite it in the next update cycle.

Solution: use a component as a wrapper

Knowing that Vue and jQuery are never going to share part of the DOM, we have to tell Vue to cordon off an area and give it over to jQuery.

Using a component to wrap a jQuery plugin seems like the way to go because:

• We can utilise lifecycle hooks for setup and teardown of the jQuery code
• We can use the component interface to communicate with the rest of the Vue app via props and events
• Components can opt-out of updates with v-once

Set up jQuery UI Datepicker

Obviously you need to include both the jQuery and jQuery UI libraries in your project first. Once you have those, the datepicker just requires an input element to attach itself to:

Date: <input id="datepicker"/>

It can then be instantiated by selecting it and calling the method:

$('#datepicker').datepicker();

Datepicker component

To make our datepicker component, the template will be this one input element:

Vue.component('date-picker', function() {
  template: '<input/>'
});

new Vue({
  el: '#app'
});

<div id="app">
  Date: <date-picker></date-picker>
</div>

Note: this component should be nothing more than a wrapper for the plugin. Don't push your luck and give it any data properties or use directives or slots.

Instantiating the widget

Rather than giving our input an ID and selecting it, we can use this.$el, as every component can access its own root node like that. The root node will of course be the input.

We can then wrap the node reference in a jQuery selector to access the datepicker method i.e. $(this.$el).datepicker().

Note that we use the mounted lifecycle hook as this.$el is undefined until the component is mounted.

Vue.component('date-picker', function() {
  template: '<input/>',
  mounted: function() {
    $(this.$el).datepicker();
  }
});

Teardown

To teardown the datepicker we can follow a similar approach and use a lifecycle hook. Note that we must use beforeDestroy to ensure our input is still in the DOM and thus can be selected (it's undefined in the destroy hook).

Vue.component('date-picker', {
  template: '<input/>',
  mounted: function() {
    $(this.$el).datepicker();
  },
  beforeDestroy: function() {
    $(this.$el).datepicker('hide').datepicker('destroy');
  }
});

Join Our Next Live Workshop Online!

"Making Vue.js Apps Enterprise Ready" - May 27th, 2020, 5-6pm PDT

Register for free

Pass config with props

To make our component reusable, it would be nice to allow for custom configuration, like specifying the date format with the configuration property dateFormat. We can do this with props:

Vue.component('date-picker', {
  template: '<input/>',
  props: [ 'dateFormat' ],
  mounted: function() {
    $(this.$el).datepicker({
      dateFormat: this.dateFormat
    });
  },
  beforeDestroy: function() { ... }
});

<div id="app">
  <date-picker date-format="yy-mm-dd"></date-picker>
</div>

Letting jQuery handle updates

Let's say that, rather than passing your dateFormat prop as a string, you made it a data property of your root instance i.e.:

var vm = new Vue({
  data: {
    ...
    dateFormat: 'yy-mm-dd'
  }
});

<div id="app">
  <date-picker date-format="dateFormat"></date-picker>
</div>

This would mean dateFormat would be a reactive data property. You could update its value at some point in the life of your app:

// change the date format to something new
vm.dateFormat = 'yy-dd-mm';

Since the dateFormat prop is a dependency of the datepicker component's mounted hook, updating it would trigger the component to re-render. This would not be cool. jQuery has already setup your datepicker on the input and is now managing it with it's own custom classes and event listeners. An update of the component would result in the input being replaced and thus jQuery's setup would be instantly reset.

We need to make it so that reactive data can't trigger an update in this component...

v-once

The v-once directive is used to cache a component in the case that it has a lot of static content. This in effect makes the component opt-out from updates.

This is actually perfect to use on our plugin component, as it will effectively make Vue ignore it. This gives us some confidence that jQuery is going to have unhampered control over this element during the lifecycle of the app.

<div id="app">
  <date-picker date-format="yy-mm-dd" v-once></date-picker>
</div>

Passing data from jQuery to Vue

It'd be pretty useless to have a datepicker if we couldn't retrieve the picked date and use it somewhere else in the app. Let's make it so that after a value is picked it's printed to the page.

We'll start by giving our root instance a date property:

new Vue({
  el: '#app',
  data: {
    date: null
  }
});

<div id="app">
  <date-picker date-format="yy-mm-dd" v-once></date-picker>
  <p>{{ date }}</p>
</div>

The datepicker widget has an onSelect callback that is called when a date is picked. We can then use our component to emit this date via a custom event:

mounted: function() {
  var self = this;
  $(this.$el).datepicker({
    dateFormat: this.dateFormat,
    onSelect: function(date) {
      self.$emit('update-date', date);
    }
  });
}

Our root instance can listen to the custom event and receive the new date:

<div id="app">
  <date-picker @update-date="updateDate" date-format="yy-mm-dd" v-once></date-picker>
  <p>{{ date }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    date: null
  },
  methods: {
    updateDate: function(date) {
      this.date = date;
    }
  }
});

Thanks to this Stack Overflow answer for inspiration.