loading...
Cover image for 10 Vue Directives that make your dev lives easier!

10 Vue Directives that make your dev lives easier!

simonholdorf profile image Simon Holdorf ・4 min read

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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!

Posted on by:

simonholdorf profile

Simon Holdorf

@simonholdorf

🚀 Full-Stack Engineer ⚡ Entrepreneur 📰 Writer

Discussion

markdown guide
 

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

 

Literally thought the same thing when I read that!

 

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.

 

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

 

Great, thanks for your reply :)

 

Good ideas have to be supported! :)

 

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

 

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.

 
 

Fantastic list! Thanks and will definitely share it!

 
 
 

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 :)

 

Vue blur looks really cool. Good list.

 

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

 

Hey Donald, thanks for your comment, much appreciated!