Official Docs:

Custom Directives - Vue.js

What are directives?

Directives are a way to modify a DOM element directly. Applying a directive to an element gives the directive access to the element directly and allows for taking arguments and a value. These are useful in certain situations. All directives are attributes on html elements for example:

<input v-focus>

In this example v-focus is the directive. The prefix of "v-" is added by vue to differentiate a VueJS directive.

How do I create a directive?

in order to create a directive, there are two methods, one is to register globally, like so:

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

And the other is to register one within a component like this:

export default {
	directives: {
	  focus: {
	    // directive definition
	    inserted: function (el) {
	      el.focus();
	    }
	  }
	}
};