Mastering Custom Directives in Vue 3

Vue 3, with its improved performance and powerful Composition API, has brought significant advancements to the Vue.js ecosystem. Among these improvements, custom directives continue to be a crucial feature, offering developers a way to directly interact with the DOM. In this blog post, we'll explore custom directives in Vue 3, providing insights and examples to utilize them effectively.

What are Custom Directives in Vue 3?

Custom directives in Vue 3 are user-defined directives that allow for direct manipulation of the DOM, similar to built-in directives like v-model or v-show. They are particularly useful for:

• Handling complex DOM manipulations.

• Integrating with third-party libraries that need direct DOM access.

• Abstracting repetitive DOM operations across different components.

Creating a Custom Directive in Vue 3

In Vue 3, custom directives can be defined globally during the application creation phase or locally within components. Let’s walk through some examples.

Example: Basic Highlight Directive

Global Registration

import { createApp } from 'vue';

const app = createApp({ /* root component */ });

app.directive('highlight', {
  beforeMount(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow';
  }
});

app.mount('#app');

Usage in a Component

<template>
  <p v-highlight="'aqua'">This paragraph will be aqua-colored.</p>
</template>

Enhancing Directives with Arguments and Modifiers

Vue 3 directives can be made more dynamic by using arguments and modifiers.

Example: Delayed Highlight Directive

This directive changes the background color of an element after a delay.

Directive Definition

app.directive('delayed-highlight', {
  mounted(el, binding) {
    setTimeout(() => {
      el.style.backgroundColor = binding.value || 'yellow';
    }, binding.arg || 0);
  }
});

Usage in a Component

<template>
  <p v-delayed-highlight:1000="'blue'">This turns blue after 1 second.</p>
</template>

Lifecycle Hooks in Vue 3 Directives

Vue 3 directives come with several lifecycle hooks, some of which have been renamed to align with the Composition API:

• created: Called when the directive is created, but before the element is mounted.

• beforeMount: Called right before the element is mounted.

• mounted: Called when the element is inserted into the DOM.

• beforeUpdate: Called before the element's containing component is updated.

• updated: Called after the containing component and its children are updated.

• beforeUnmount: Called before the directive is removed from the element.

• unmounted: Called after the directive is removed.

Example: Logging Directive

This directive logs messages at different stages of the directive lifecycle.

Directive Definition

app.directive('logger', {
  created(el) {
    console.log('created');
  },
  beforeMount(el) {
    console.log('beforeMount');
  },
  mounted(el) {
    console.log('mounted');
  },
  beforeUpdate(el) {
    console.log('beforeUpdate');
  },
  updated(el) {
    console.log('updated');
  },
  beforeUnmount(el) {
    console.log('beforeUnmount');
  },
  unmounted(el) {
    console.log('unmounted');
  }
});

Usage in a Component

<template>
  <p v-logger>This paragraph has a logging directive.</p>
</template>

Custom directives in Vue 3 remain an essential part of the framework, providing a powerful way to interact directly with the DOM. They are versatile tools for creating reusable and efficient DOM manipulations. By incorporating custom directives into your Vue 3 projects, you can tackle complex UI challenges and streamline your code.