10+ Vue.js Directives You Must Know to Maximize Your Productivity

10+ Vue.js Directives You Must Know to Maximize Your Productivity

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 10+ of built-in Vue.js directives in this article.

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?

vue-js javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Hire Top Node JS Developers | Best Node.js Development Company India

Hire dedicated Node JS developers & programmers in India for custom full-stack NodeJS web development projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts

Node JS Development Company| Node JS Web Developers-SISGAIN

SISGAIN is the top rated node js development company providing professional services on node js web and mobile development.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.