10 Vue Directives that make your dev lives easier!
Tags: vue, webdev, productivity, javascript
Published: 2019-10-09 11:44:17

## Introduction

One of the greatest features of Vue.js is that it comes with built-in directives much as the original AngularJS (One reason why people think that Vue is what Angular should have been...). Those directives make your lives as frontend devs much easier but what's even better is that one can write own, custom directives. So in this post I am going to show you 10 cool directives made by the fantastic Vue Community that you can use in your projects right away to save you time and effort and bring your Vue game to the next level.

---

## Vue-Lazyload

An awesome package with more than 5000 Stars on Github. Vue-Lazyload by Hilongjw lets you lazyload your images without hassle!

### Example Code

```javascript
<template>
  <img v-lazy="https://www.example.com/example-image.jpg">
</template>
```

### Repository

[Github](https://github.com/hilongjw/vue-lazyload)

### Demo

[Demo](http://hilongjw.github.io/vue-lazyload/)

---

## Vue-Infinite-Scroll

This is a great and easy to implement directive if you want to load new elements on your webpage when visitors reach the bottom.
The method bound to v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport. Cool, right?

### Example Code

```javascript

<template>
  /* your website code   */
  <div
    v-infinite-scroll="onLoadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  ></div>
<template>

<script>
export default {
  data() {
    return {
      data [],
      busy: false,
      count: 0
    }
  },

  methods: {
    onLoadMore() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: this.count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>
```

### Repository

[Github](https://github.com/ElemeFE/vue-infinite-scroll)

---

## Vue-Focus

Sometimes in web development it can be tricky to manage input focus. Vue-Focus comes to the rescue and lets you manage focus directly from the view model.

### Example Code

```javascript

<template>
  <button @click="focusedElement = true">Input gets Focus</button>
  <input type="text" v-focus="focusedElement">
</template>

<script>
export default {
  data: function() {
    return {
      focusedElement: false,
    };
  },
};
</script>
```

### Demo

[Demo](https://jsfiddle.net/simplesmiler/zak1t6o8/)

### Repository

[Github](https://github.com/simplesmiler/vue-focus)

---

## Vue-Blur

Vue-Blur is a great choice if you want to blur out certain sections of your website for let's say unregistered visitors. It also comes with options to customize parameters like opacity, filter and transition between states.

### Example Code

```javascript
<template>
  /* Use this with a boolean value (true/false) */
  <div v-blur="isBlurred"></div>

  /* Use this with an object that uses values from the config */
  <div v-blur="blurConfig"></div>
</template>

<script>
  export default {
      data () {
        return {
          isBlurred: true, // activate and deactivate based on a boolean value

          blurConfig: {
            isBlurred: false, // activate and deactivate based on a boolean value and also provide a config
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>
```

### Demo

[Demo](https://codesandbox.io/s/823o069zoj?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue)

### Repository

[Github](https://github.com/ndelvalle/v-blur)

---

## V-Clipboard

This is a smart little package that you can use to copy values from elements to the user's clipboard without implementing tons of logic.

### Example Code

```javascript
/* When an element that contains the v-clipboard directive is clicked, the value of valueToCopy will be copied into clipboard. */
<template>
  <button v-clipboard='valueToCopy'>Copy to clipboard</button>
</template>

<script>
export default {
  data() {
    return {
      valueToCopy: "Some Text"
    }
  }
};
</script>
```

### Repository

[Github](https://github.com/euvl/v-clipboard)

---

## Vue-ScrollTo

Scrolling elements was never easier! You can listen to click events on elements and have the browser scroll to a given tag which is awesome for navigation inside of a web application!

### Example Code

```javascript
<template>
  <button v-scroll-to="'#element'">Scroll to #element as the target</button>

  <h1 id='element'>This will be the scrolling target</h1>
</template>
```

### Demo

[Demo](https://vue-scrollto.netlify.com/)

### Repository

[Github](https://github.com/rigor789/vue-scrollTo)

---

## V-Hotkey

This cool custom directive made by Dafrok allows you to easily bind hotkeys to your components. Hiding or showing components on key strokes? Nothin easier than that!

### Example Code

```javascript
<template>
  <div v-hotkey="keymap" v-show="show">
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!{' '}
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    onShow () {
      this.show = true
    },
    onHide () {
      this.show = false
    }
  },
  computed: {
    keymap () {
      return {
        'ctrl+esc': this.toggle,
        'enter': {
          keydown: this.onHide,
          keyup: this.onShow
        }
      }
    }
  }
}
</script>
```

### Repository

[Github](https://github.com/Dafrok/v-hotkey)

---

## V-Click-Outside

This is an awesome directive to react to click events on elements without stopping the event propagation. This comes in handy for closing dialogues, menus, etc.

### Example Code

```javascript
<template>
  <div v-show="show" v-click-outside="onClickOutside">
    Hide the element if a click event outside is triggered
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },

  methods: {
    onClickOutside() {
      this.show = false;
    }
  }
};
</script>
```

### Demo

[Demo](https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue)

### Repository

[Github](https://github.com/ndelvalle/v-click-outside)

---

## V-Scroll-Lock

This smart directive helps you to prevent your website from scrolling when something like a modal/lightbox/flyout is open. This is especially useful when dealing with multiple devices!

### Example Code

```javascript
<template>
  <div class="modal" v-if="open">
    <button @click="closeModal">X</button>
    <div class="modal-content" v-scroll-lock="open">
      <p>A bunch of scrollable modal content</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  data () {
    return {
      open: false
    }
  },
  methods: {
    openModal () {
      this.open = true
    },
    closeModal () {
      this.open = false
    }
  }
}
</script>
```

### Demo

[Demo](https://v-scroll-lock.peterhegman.com/)

### Repository

[Github](https://github.com/phegman/v-scroll-lock)

---

## V-Tooltip

This cool package by Akryum provides you with an awesome tooltip directive. Just bind some text to v-tooltip and and you are ready.

### Example Code

```javascript

<template>
  <div>
    <p>
      <input v-model="message" placeholder="Message">
    </p>
    <p>
      <span v-tooltip="message">{{ message }}</span>
    </p>
  </div>
</template>
```

### Repository

[Github](https://github.com/Akryum/v-tooltip)

## Conclusion

In this article I curated 10 custom Vue directives that you might want to use in your existing our future projects or just take and play around a bit. They key takeaway here is when working with Vue.js you do not have to reinvent the wheel every time thanks to custom directives and the wonderful community. If you have other directives you would want to recommend to others please leave a comment. Also don't forget to follow me for more upcoming posts!