What's the benefit of custom directive in vue and how to integrate it ?

Custom directives let you manipulate the DOM directly, useful when built-in directives (like v-bind, v-show) aren’t enough.

They help you encapsulate reusable DOM-level logic (e.g., auto-focus an input, custom scroll behavior, and permission-based UI tweaks) rather than repeating code in many components, supporting maintainable applications during Vue.js Migration Services.

You can register them globally (available everywhere) or locally inside a component.

“Permission-Based Access Control in Vue Using JWT, Directives & Route Guards” shows a real-world example of using a custom directive (v-permission) to control UI based on permissions.

Code

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// globally register a directive named "focus"
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

// @components/MyComponent.vue
<template>
  <input v-focus />
</template>