Christmas guide to Custom Directives in Vue 🎄

Vue.js is one of the most popular JavaScript frameworks, providing developers with powerful tools to effectively create user interfaces. Among its many features, directives stand out as a way to directly manipulate the DOM.

Although Vue provides a set of built-in instructions, such as v-if, v-forand v-modelsometimes you need to implement functionality not covered by these defaults. This is where custom directives come into play. In Vue 3, the API for creating custom directives remains intuitive and powerful.

This holiday article explores what custom directives are, how to create them, and when to use them – all with some holiday cheer!

enjoy!

🤔 What are the directives in Vue?

Directives in Vue are special tags in the DOM that extend the functionality of HTML. They allow you to declaratively bind dynamic behavior to elements. For example, v-if The directive conditionally renders an element, and v-bind Dynamically bind properties to expressions.

Custom directives enable developers to encapsulate reusable DOM manipulation logic, making your code more modular and maintainable.

Vue 3 custom instructions provide several life cycle hooks, corresponding to different stages of the instruction life cycle:

• create(el,bind,vnode,prevVnode): Called once when the directive is bound to an element.
• beforeMount(el, binding, vnode, prevVnode): Called before the element is inserted into the DOM.
• installed(el,bind,vnode,prevVnode): Called when an element is inserted into the DOM.
• beforeUpdate(el, binding, vnode, prevVnode): Called before the element’s containing element is updated.
• update(el, binding, vnode, prevVnode): Called after the containing element and child elements of the element are updated.
• beforeUnmount(el, bind, vnode, prevVnode): Called before the element of the unload directive.
• Unloaded (el, bind, vnode, prevVnode): Called after unloading the directive’s element.

Each hook provides access to directives binding Object containing useful properties such as:

• value: The current value of the instruction.
• old value: previous value.
• Arginine: Arguments passed to the directive (e.g., v-my-directive:arg).
• modifier: modifier object (e.g., v-my-directive.mod1.mod2).

🟢 Create custom instructions in Vue

In Vue 3, you can register custom directives globally or locally.

To register a domain-wide command, use app.directive method:

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

const app = createApp(App);

app.directive('focus', {
  // Hook to handle when the directive is bound to the element
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

In this example, v-focus Whenever an input element is mounted to the DOM, the directive focuses it.

For local registration, you can directives Component options:

Custom directives work well in scenarios that require direct DOM manipulation, especially when such logic is not part of a component or composable item. Let’s take a look at the following command example to add a snowflake effect on hover:

app.directive('hover-snow', {
  mounted(el) {
    el.addEventListener('mouseenter', () => {
      el.style.backgroundImage = 'url(https://example.com/snowflake.png)';
      el.style.backgroundRepeat = 'no-repeat';
      el.style.backgroundPosition = 'center';
    });
    el.addEventListener('mouseleave', () => {
      el.style.backgroundImage = '';
    });
  },
  unmounted(el) {
    el.removeEventListener('mouseenter');
    el.removeEventListener('mouseleave');
  }
});

This command sprinkles snowflakes on your elements to add a touch of Christmas magic to your app.

Custom directives are ideal when:

1. Requires direct DOM manipulation: Used for operations such as focusing elements or integrating third-party libraries.
2. Need for reusability: Encapsulate common DOM logic into instructions to ensure consistency between components.
3. Avoid component overhead: Reduce boilerplate code by using directives instead of components to implement simple DOM-related behaviors.

However, for more complex or state-driven logic, consider using composables or Vue elements, as they integrate more naturally into Vue’s reactive system.

📖 Learn more

If you want to learn more about Vue, Nuxt, JavaScript or other useful technologies, check out VueSchool here association Or click on the image below:

It covers the most important concepts when building a modern Vue or Nuxt application and can help you with your daily work or side projects 😉

✅ Summary

here you go! Vue 3’s custom directives provide a concise way to encapsulate and reuse DOM manipulation logic. They complement Vue’s declarative programming paradigm, allowing developers to easily handle edge cases and extend functionality. By understanding how and when to use them, you can enhance your applications with clean and maintainable code.

Take care and see you next time! Merry Christmas! 🎄

Happy coding as always 🖥️