5 Vue.js Libraries I Can’t Live Without

With guides for each

Photo by Jaredd Craig on Unsplash, Edited by Titus Decali

As experienced developers know, sometimes using another person’s package to solve a feature of your app ends up costing you more time than it saves. Opinionated systems and a lack of edge-case solutions often bury us in a hole that makes us regret ever installing it in the first place.

While I’ve also had this experience many times, there are a few packages that I rely on for many projects and that have proven highly useful over the long haul. After testing a variety of options for each of the problems these packages solve, I’ve listed below my personal selections based on ease of use, diversity of features, and visual appeal.

Click Off to Close

There are times when we need to trigger an event when a user clicks outside of an element. The most common use case of this is when you want to close a dropdown or dialogue box by clicking away from it. This is an essential package that I use in almost every app I build.

Top pick: vue-clickaway

vue-clickaway

Usage

I usually install this in main.js to make it usable across my app. If you’re only using it on one or two pages, you’ll likely want to import it individually.

If you do import it individually, remember that directives need to be exposed under directives:
✅ directives: { onClickaway }

and not components:
❌ components: { onClickaway }

Make it available globally (in main.js):

import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)

In template:

*A partial look at the code to keep things simple.

Imagine that I’ve got a full select box including a list of li elements (not shown here). The above button is used to trigger my list of custom select box items, and when I click…