Creating custom directives in Vue - Why You Should Know This

The Big Idea

What if you could add powerful behaviors to elements with just a simple tag?

The Scenario

Imagine you want to add the same special behavior, like focusing an input or changing colors on hover, to many elements in your app by writing plain JavaScript for each one.

The Problem

Manually adding event listeners and DOM changes everywhere is repetitive, easy to forget, and makes your code messy and hard to maintain.

The Solution

Custom directives let you package that behavior once and reuse it simply by adding a special attribute to any element, keeping your code clean and consistent.

Before vs After

✗ Before

const input = document.querySelector('#myInput');
input.addEventListener('focus', () => { input.style.backgroundColor = 'yellow'; });

✓ After

app.directive('highlight', {
  mounted(el) { el.addEventListener('focus', () => { el.style.backgroundColor = 'yellow'; }); }
});
// In template: <input v-highlight>

What It Enables

You can create reusable, easy-to-apply behaviors that keep your templates simple and your JavaScript organized.

Real Life Example

Adding a custom directive to automatically focus form fields when a modal opens, without repeating code for every input.

Key Takeaways

Manual DOM handling is repetitive and error-prone.

Custom directives package behavior for easy reuse.

They keep your code clean and your app consistent.