Why custom directives matter in Vue - See It in Action

Why custom directives matter

📖 Scenario: You are building a Vue 3 app that needs to highlight text when the user hovers over it. Instead of repeating the same hover style everywhere, you want to create a reusable custom directive to handle this behavior.

🎯 Goal: Create a Vue 3 app that uses a custom directive called v-highlight to add a yellow background color on hover to any text element.

📋 What You'll Learn

Create a Vue 3 app using the Composition API with <script setup>

Define a custom directive named highlight

The directive should add a yellow background color when the mouse is over the element

The directive should remove the background color when the mouse leaves

Use the directive on a paragraph element in the template

💡 Why This Matters

🌍 Real World

Custom directives let you add reusable behaviors to HTML elements in Vue apps, like tooltips, animations, or input masks.

💼 Career

Understanding custom directives is useful for frontend developers working with Vue to create clean, maintainable, and reusable UI behaviors.

1

Set up the Vue 3 app skeleton

Create a Vue 3 component with <template> and <script setup> tags. Inside the template, add a paragraph with the text Hover over me!.

Vue

  



// Your code here

Hint

Start by writing the basic Vue 3 component structure with a paragraph inside the template.

2

Create the custom directive variable

Inside the <script setup> tag, create a constant called highlight that is an object with two functions: mounted and unmounted. For now, leave the functions empty.

Vue

  Hover over me!



const highlight = {
  mounted(el) {
    // Your code here
  },
  unmounted(el) {
    // Your code here
  }
}

Hint

Define the highlight object with mounted and unmounted lifecycle hooks for the directive.

3

Add hover event listeners in the directive

Inside the mounted function of highlight, add event listeners to el for mouseenter and mouseleave. On mouseenter, set el.style.backgroundColor to yellow. On mouseleave, reset el.style.backgroundColor to an empty string. Inside unmounted, remove these event listeners.

Vue

  Hover over me!



const highlight = {
  mounted(el) {
    // Add mouseenter and mouseleave event listeners here
  },
  unmounted(el) {
    // Remove event listeners here
  }
}

Hint

Use el.addEventListener to add hover handlers and store them on el so you can remove them later.

4

Register and use the custom directive in the template

Register the highlight directive in the component by adding v-highlight to the paragraph element in the template. Also, add directives={{ highlight }} to the <script setup> block using defineExpose or by exporting the directive properly.

Vue

  Hover over me!



const highlight = {
  mounted(el) {
    el._mouseEnterHandler = () => {
      el.style.backgroundColor = 'yellow'
    }
    el._mouseLeaveHandler = () => {
      el.style.backgroundColor = ''
    }
    el.addEventListener('mouseenter', el._mouseEnterHandler)
    el.addEventListener('mouseleave', el._mouseLeaveHandler)
  },
  unmounted(el) {
    el.removeEventListener('mouseenter', el._mouseEnterHandler)
    el.removeEventListener('mouseleave', el._mouseLeaveHandler)
  }
}

// Register the directive
// Your code here

Hint

Add v-highlight to the paragraph and expose the directive using defineExpose with directives: { highlight }.

Practice

1. Why are custom directives useful in Vue?

easy

A. They add reusable behaviors directly to HTML elements.

B. They replace Vue components entirely.

C. They automatically fetch data from APIs.

D. They style elements with CSS only.

Solution

1. Step 1: Understand the purpose of custom directives

   Custom directives let you add special behaviors to HTML elements that you can reuse.

2. Step 2: Compare with other options

   They do not replace components, fetch data, or only style elements; they control DOM behavior.

3. Final Answer:

   They add reusable behaviors directly to HTML elements. -> Option A

4. Quick Check:

   Custom directives = reusable element behaviors [OK]

Hint: Custom directives add behaviors to elements, not replace components [OK]

Common Mistakes:

• Thinking directives replace components
• Confusing directives with data fetching
• Assuming directives only style elements

2. Which is the correct syntax to register a global custom directive named focus in Vue 3?

easy

A. app.component('focus', { mounted(el) { el.focus() } })

B. Vue.directive('focus', function(el) { el.focus() })

C. app.directive('focus', { mounted(el) { el.focus() } })

D. app.use('focus', { mounted(el) { el.focus() } })

Solution

1. Step 1: Recall Vue 3 global directive registration

   In Vue 3, use app.directive(name, definition) to register directives globally.

2. Step 2: Check the options

   app.directive('focus', { mounted(el) { el.focus() } }) uses app.directive with a proper object containing mounted hook. Others use wrong methods or syntax.

3. Final Answer:

   app.directive('focus', { mounted(el) { el.focus() } }) -> Option C

4. Quick Check:

   Vue 3 global directive = app.directive(name, definition) [OK]

Hint: Use app.directive() with hooks to register global directives [OK]

Common Mistakes:

• Using Vue.directive instead of app.directive in Vue 3
• Using app.use or app.component incorrectly
• Passing a function instead of an object with hooks

3. Given this custom directive code:

app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = 'yellow'
  }
})

What will happen when you use <div v-highlight>Text</div> in your template?

medium

A. The div will have a yellow border but no background change.

B. The div's text color changes to yellow.

C. Nothing happens because the directive is missing a bind hook.

D. The div's background color will become yellow when inserted into the DOM.

Solution

1. Step 1: Understand the mounted hook effect

   The mounted hook runs when the element is inserted, setting backgroundColor to yellow.

2. Step 2: Analyze the directive usage

   Using v-highlight applies the directive, so the div's background becomes yellow, not border or text color.

3. Final Answer:

   The div's background color will become yellow when inserted into the DOM. -> Option D

4. Quick Check:

   mounted hook sets backgroundColor = yellow [OK]

Hint: mounted hook runs on insert, sets styles immediately [OK]

Common Mistakes:

• Confusing background color with border or text color
• Thinking bind hook is required in Vue 3
• Assuming directive does nothing without update hook

4. Identify the error in this custom directive code:

app.directive('scroll', {
  mounted(el) {
    window.addEventListener('scroll', () => {
      el.textContent = window.scrollY
    })
  },
  unmounted() {
    window.removeEventListener('scroll')
  }
})

medium

A. The directive should use updated instead of mounted.

B. The removeEventListener call is missing the event handler function.

C. The mounted hook should not use arrow functions.

D. The unmounted hook should be named destroyed.

Solution

1. Step 1: Check event listener removal

   removeEventListener requires the same event and handler function to remove the listener properly.

2. Step 2: Analyze the unmounted hook

   Here, removeEventListener is called without the handler function, so the listener stays active causing memory leaks.

3. Final Answer:

   The removeEventListener call is missing the event handler function. -> Option B

4. Quick Check:

   removeEventListener needs event and handler [OK]

Hint: Always pass same handler to removeEventListener as added [OK]

Common Mistakes:

• Omitting handler in removeEventListener
• Confusing unmounted with destroyed hook
• Thinking arrow functions cause errors here

5. You want to create a custom directive v-auto-focus that focuses an input only when it is visible on the page (not hidden by CSS). Which approach best uses custom directives to achieve this?

hard

A. In the mounted hook, check if el.offsetParent !== null before calling el.focus().

B. Use the updated hook to call el.focus() unconditionally every time.

C. Add a watcher on a data property to call el.focus() inside the directive.

D. Use a global event listener on window resize to focus the element.

Solution

1. Step 1: Understand visibility check in directives

   Checking el.offsetParent !== null confirms the element is visible (not hidden by CSS).

2. Step 2: Apply focus conditionally in mounted hook

   Focusing only when visible avoids errors and unwanted focus on hidden inputs.

3. Step 3: Evaluate other options

   Updated hook focusing unconditionally may cause focus flicker; watchers and global listeners add complexity.

4. Final Answer:

   In the mounted hook, check if el.offsetParent !== null before calling el.focus(). -> Option A

5. Quick Check:

   Check visibility before focus in mounted hook [OK]

Hint: Check element visibility before focus in mounted hook [OK]

Common Mistakes:

• Focusing without visibility check
• Using updated hook causing repeated focus
• Adding unnecessary watchers or global listeners