DEV Community

Cover image for 10 Vue Directives that make your dev lives easier!
Simon Holdorf
Simon Holdorf

Posted on

10 Vue Directives that make your dev lives easier!

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

<template>
  <img v-lazy="https://www.example.com/example-image.jpg">
</template>
Enter fullscreen mode Exit fullscreen mode

Repository

Github

Demo

Demo


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


<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>
Enter fullscreen mode Exit fullscreen mode

Repository

Github


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


<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>
Enter fullscreen mode Exit fullscreen mode

Demo

Demo

Repository

Github


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

<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>
Enter fullscreen mode Exit fullscreen mode

Demo

Demo

Repository

Github


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

/* 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>
Enter fullscreen mode Exit fullscreen mode

Repository

Github


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

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

  <h1 id='element'>This will be the scrolling target</h1>
</template>
Enter fullscreen mode Exit fullscreen mode

Demo

Demo

Repository

Github


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

<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>
Enter fullscreen mode Exit fullscreen mode

Repository

Github


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

<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>
Enter fullscreen mode Exit fullscreen mode

Demo

Demo

Repository

Github


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

<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>
Enter fullscreen mode Exit fullscreen mode

Demo

Demo

Repository

Github


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


<template>
  <div>
    <p>
      <input v-model="message" placeholder="Message">
    </p>
    <p>
      <span v-tooltip="message">{{ message }}</span>
    </p>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Repository

Github

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!

Top comments (16)

Collapse
 
epse profile image
Stef Pletinck

What's the point of scrollTo if you can just use a plain old anchor tag?

Collapse
 
ryancmcconnell profile image
Ryan McConnell

Literally thought the same thing when I read that!

Collapse
 
simonholdorf profile image
Simon Holdorf

That's one of the beauties of being a programmer. You are not forced to use anything (most of the time) :) However, the key message is to show what you can do with Vue being an awesome framework.

Collapse
 
webdeasy profile image
webdeasy.de

Awesome directives! I'll have it in mind! ;)

Collapse
 
simonholdorf profile image
Simon Holdorf

Great, thanks for your reply :)

Collapse
 
webdeasy profile image
webdeasy.de

Good ideas have to be supported! :)

Collapse
 
albertodeago88 profile image
Alberto De Agostini

Nice once, I was missing some of those, thanks for sharing

Collapse
 
abdallahyashir profile image
Abdallah Yashir

Thank your for these directives.
They help us be more productive without having to reinvent the wheel while still delivering value to users.
Most of them are actually important for good UX.

Collapse
 
simonholdorf profile image
Simon Holdorf

Thanks Abdallah!

Collapse
 
alwindeleon profile image
Alwin de Leon

Fantastic list! Thanks and will definitely share it!

Collapse
 
simonholdorf profile image
Simon Holdorf

Thanks, Alwin :)

Collapse
 
pbuzdin profile image
Pavel

Most of them are useless

Collapse
 
simonholdorf profile image
Simon Holdorf

Depends on the situation, status of the project and the dev's experience I guess. However, the key message is to show what you can do with Vue being an awesome framework :)

Collapse
 
shubhambattoo profile image
Shubham Battoo

Vue blur looks really cool. Good list.

Collapse
 
donaldng profile image
Donald Ng

Awesome list, this is a life saver so many gold in one page, thanks!!

Collapse
 
simonholdorf profile image
Simon Holdorf

Hey Donald, thanks for your comment, much appreciated!