15 Must-Have Vue Directives That Will Significantly Maximize Your Productivity

These are my favorite Vue.js custom directives. It’s incredible how much time they saved me on my projects. 😇

Inspired by AngularJS, Vue comes with built-in directives (like v-html or v-once) that you will find useful, as each has its own use case. You can find the full list of built-in directives here.

But what is even more fantastic is that you can also write your own directives. This allowed the Vue.js community to solve countless code issues they can then publish as packages.

Here is a list of my favorite Vue.js custom directives. Needless to say, it’s incredible how much time they saved me on my projects. 😇

1. V-Hotkey

Repository: v-hotkey
Demo: available here
Installation: npm install --save v-hotkey

This directive allows you to bind one or multiple hotkeys to your components. Do you need to hide a component when pressing the Escape key and display it when hitting Enter while pressing Control? Easy peasy:

<template>
  <div
    v-show="show"
    v-hotkey="{
      'esc': onClose,
      'ctrl+enter': onShow
    }"
  >
	  Press `esc` to close me!
  </div>
</template>

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

    methods: {
        onClose() {
            this.show = false
        },

        onShow() {
            this.show = true
        },
    }
}
</script>

2. V-Click-Outside

Repository: v-click-outside
Demo: available here
Installation: npm install --save v-click-outside

Do you want to close a component when a click outside happens? This can be done in a snap with this directive. This is among the ones I use in every one of my projects. It comes in super handy when dealing with popups or dropdown menus.

<template>
  <div
    v-show="show"
    v-click-outside="onClickOutside"
  >
    Hide me when a click outside this element happens
  </div>
</template>

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

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

Note: You can also choose to trigger the method only when a double-click outside happens. Head over to the documentation to read more about this feature.

3. V-Clipboard

Repository: v-clipboard
Installation: npm install --save v-clipboard

Yev Vlasenko made this simple directive that you can add to any static or dynamic element of your code. Then, when the element is clicked, the directive’s value will be copied into the user’s clipboard. It can be useful when you want to provide your customers with a code snippet that they have to copy somewhere.

<button v-clipboard="value">
  Copy to clipboard
</button>

4. Vue-ScrollTo

Repository: vue-scrollto
Demo: available here
Installation: npm install --save vue-scrollto

This directive will listen to a click event on the element and scroll to a given tag. I mostly use it when dealing with a table of contents in an article or inside navigation headers.

<span v-scroll-to="{
  el: '#element',          // The element you want to scroll to.
  container: '#container', // The container that has to be scrolled.
  duration: 500,           // The duration (in milliseconds) of the scrolling animation.
  easing: 'linear'         // The easing to be used when animating.
  }"
>
  Scroll to #element by clicking here
</span>

Note: You can also use it programmatically. Head over the documentation to read more about this feature.

5. Vue-Lazyload

Repository: vue-lazyload
Demo: available here
Installation: npm install --save vue-lazyload

If you want to lazy load your images to speed up your pages, this package will come in handy. Especially when it takes no more than 5 minutes to implement.

<img v-lazy="https://www.domain.com/image.jpg">

6. V-Tooltip

Repository: v-tooltip
Demo: available here
Installation: npm install --save v-tooltip

Almost every project needs tooltips. With this package, you can add reactive ones to your elements, control their position, choose to trigger them on click or on hover and listen for events.

<button v-tooltip="'You have ' + count + ' new messages.'">

Note: There is another popular package for tooltips if you need an alternative: vue-directive-tooltip.

7. V-Scroll-Lock

Repository: v-scroll-lock
Demo: available here
Installation: npm install --save v-scroll-lock

Based on the body-scroll-lock package, this directive will help you prevent the body from scrolling when you have a modal opened.

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

<script>
export default {
  data () {
    return {
      opened: false
    }
  },
  methods: {
    onOpenModal () {
      this.opened = true
    },

    onCloseModal () {
      this.opened = false
    }
  }
}
</script>

8. V-Money

Repository: v-money
Demo: available here
Installation: npm install --save v-money

When you need to prefix/suffix your input with any given currency, define how many decimals it should have or use a decimal separator like “,” — look no further! This directive will do it for you with a simple line.

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: '$ ',
        precision: 2,
      }
    }
  }
}
</script>

9. Vue-Infinite-Scroll

Repository: vue-infinite-scroll
Installation: npm install --save vue-infinite-scroll

If you want to load new elements as people reach the page bottom, you might be interested in this directive. In a nutshell, when the bottom of the element reaches the bottom of the viewport, it will trigger the bound method.

<template>
  <!-- ... -->
  <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>

10. Vue-Clampy

Repository: vue-clampy.
Installation: npm install --save @clampy-js/vue-clampy

This directive lets you truncate the content inside an element and add an ellipsis to the end. It uses clampy.js behind the scenes.

  <p v-clampy="3">Long text to clamp here</p>
  <!-- displays: Long text to...-->

11. Vue-InputMask

Repository: vue-inputmask
Installation: npm install --save vue-inputmask

When you need to format dates in a specific way for your inputs, this directive based on the Inputmark library will let you add a mask to them.

<input type="text" v-mask="'99/99/9999'" />

12. Vue-Ripple-Directive

Repository: vue-ripple-directive
Installation: npm install --save vue-ripple-directive

This Vue custom directive brought to us by Aduardo Marcos provides you with a pretty neat ripple effect animation that will be triggered when people click on an element. I find it super handy for my action buttons.

<div v-ripple class="button is-primary">This is a button</div>

13. Vue-Focus

Repository: vue-focus
Installation: npm install --save vue-focus

Sometimes, when someone is doing a certain action on your interface, you want a given input to be focused. This directive is about just that.

<template>
  <button @click="focused = true">Focus the input</button>

  <input type="text" v-focus="focused">
</template>

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

14. V-Blur

Repository: v-blur
Demo: available here
Installation: npm install --save v-blur

Let’s say that you have some section of your application that should be blurred when a visitor is not registered. You can do it in a snap with this directive and customize the opacity, the blurred filter and the transition between the two states.

<template>
  <button
    @click="blurConfig.isBlurred = !blurConfig.isBlurred"
  >Toggle the content visibility</button>

  <p v-blur="blurConfig">Blurred content</p>
</template>

<script>
  export default {
      data () {
        return           
          blurConfig: {
            isBlurred: false,
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

15. Vue-Dummy

Repository: vue-dummy
Demo: available here
Installation: npm install --save vue-dummy

When developing an app, you will need at some point to use dummy lorem ipsum text or to add placeholder images of a certain size somewhere in there. You can easily do so with this directive.

<template>
  <!-- the content inside will have 150 words -->
  <p v-dummy="150"></p>

  <!-- Display a placeholder image of 400x300-->
  <img v-dummy="'400x300'" />
</template>

Conclusion

These were my 15 favorite Vue.js directives. Do you think there is one that deserves to be on this list? Feel free to tell me in the comments or to reach out to me on Twitter @RifkiNada.