Creating custom directives in Vue - Visual Walkthrough

Concept Flow - Creating custom directives

Define directive object

↓

Register directive globally or locally

↓

Use directive in template

↓

Vue calls directive hooks

↓

created

↓

Update hooks if reactive data changes

↓

Directive cleanup on unmount

You define a directive, register it, then Vue calls its hooks as the element is created, updated, and removed.

Execution Sample

Vue

const focusDirective = {
  mounted(el) {
    el.focus()
  }
}
app.directive('focus', focusDirective)

This code creates a custom directive that focuses an input element when it is mounted.

Execution Table

Step	Action	Directive Hook Called	Element State	Effect
1	Directive object defined	None	No element yet	No effect
2	Directive registered globally	None	No element yet	No effect
3	Template uses v-focus on input	None	<input>	No effect yet
4	Vue creates input element	created	<input>	Element created but not in DOM
5	Input element about to be inserted in DOM	beforeMount	<input>	Preparing to mount
6	Input element fully mounted	mounted	<input>	Input receives focus
7	Reactive data changes (if any)	updated	<input>	Directive can react to changes
8	Component unmounts	unmounted	<input>	Cleanup if needed
9	Directive lifecycle ends	None	Element removed	Focus lost, element gone

💡 Directive lifecycle ends when element is removed from DOM and component unmounts.

Variable Tracker

Variable	Start	After Step 3	After Step 6	After Step 8	Final
el (element)	undefined	<input>	<input focused>	<input removed>	undefined
directive hooks	not called	not called	mounted called	unmounted called	completed

Key Moments - 3 Insights

Why does the focus happen only at the mounted hook and not earlier?

Because the element is only fully inserted into the DOM at the mounted hook, so calling focus before that won't work. See execution_table step 6.

Can the directive respond to reactive data changes?

Yes, the updated hook runs when reactive data changes affect the element. See execution_table step 7.

What happens if the directive is not cleaned up on unmount?

It can cause memory leaks or unexpected behavior. The unmounted hook is for cleanup. See execution_table step 8.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the input element receive focus?

A Step 3

B Step 4

C Step 6

D Step 8

💡 Hint

Check the 'Effect' column for when the input receives focus.

According to variable_tracker, what is the state of 'el' after step 8?

A <input removed>

B <input>

C <input focused>

D undefined

💡 Hint

Look at the 'el (element)' row under 'After Step 8' column.

If the directive did not implement the unmounted hook, what might happen?

A The element would never mount.

B Memory leaks or leftover effects might occur.

C Focus would never be applied.

D The directive would not be registered.

💡 Hint

Refer to key_moments about cleanup on unmount.

Concept Snapshot

Creating custom directives in Vue:
- Define a directive object with hooks (created, beforeMount, mounted, updated, unmounted).
- Register it globally or locally.
- Use it in templates with v-yourDirective.
- Vue calls hooks as element lifecycle progresses.
- Use mounted to access DOM, unmounted for cleanup.

Full Transcript

Creating custom directives in Vue involves defining an object with lifecycle hooks like mounted and unmounted. You register this directive globally or locally in your app. When you use the directive in your template, Vue calls these hooks as the element is created, inserted into the DOM, updated, and eventually removed. For example, the mounted hook is where you can safely manipulate the DOM element, such as setting focus. The unmounted hook is important for cleaning up any side effects to avoid memory leaks. This flow ensures your directive behaves correctly with the element's lifecycle.

Practice

1. What is the main purpose of creating a custom directive in Vue?

easy

A. To add reusable behavior to HTML elements

B. To define new components

C. To manage Vuex state

D. To handle routing between pages

Solution

1. Step 1: Understand what directives do in Vue

   Directives are special markers on elements that tell Vue to do something with that element.

2. Step 2: Identify the role of custom directives

   Custom directives let you add reusable behavior to elements, like focusing an input or changing styles dynamically.

3. Final Answer:

   To add reusable behavior to HTML elements -> Option A

4. Quick Check:

   Custom directives = reusable element behavior [OK]

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

Common Mistakes:

• Confusing directives with components
• Thinking directives manage app state
• Assuming directives handle routing

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

easy

A. Vue.directive('v-focus', function(el) { el.focus() })

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

C. app.directive('v-focus', { bind(el) { el.focus() } })

D. Vue.createDirective('focus', { mounted(el) { el.focus() } })

Solution

1. Step 1: Recall Vue 3 global directive registration

   In Vue 3, you use the app instance's directive method with the directive name without the 'v-' prefix.

2. Step 2: Check the lifecycle hook and syntax

   The correct hook for when the element is inserted is 'mounted', and the function receives the element as argument.

3. Final Answer:

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

4. Quick Check:

   Vue 3 global directive = app.directive('name', { mounted }) [OK]

Hint: Use app.directive('name', { mounted }) without 'v-' prefix [OK]

Common Mistakes:

• Including 'v-' prefix in directive name
• Using Vue.directive instead of app.directive in Vue 3
• Using deprecated hooks like 'bind'

3. Given this custom directive registered globally in Vue 3:

app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value
  }
})

What will be the text color of the paragraph after the component updates if used as <p v-color="'red'">Hello</p> and later the binding value changes to 'blue'?

medium

A. The text color will be black (default)

B. The text color will remain red

C. The text color will change to blue

D. There will be a runtime error

Solution

1. Step 1: Understand directive lifecycle hooks

   The 'mounted' hook sets the color initially, and the 'updated' hook runs when the binding value changes.

2. Step 2: Trace the color change on update

   When the binding value changes to 'blue', the 'updated' hook sets the element's color style to 'blue'.

3. Final Answer:

   The text color will change to blue -> Option C

4. Quick Check:

   updated hook changes color to new binding value [OK]

Hint: updated hook runs on binding change to update element [OK]

Common Mistakes:

• Assuming color stays as initial value
• Ignoring the updated lifecycle hook
• Thinking directive causes errors on update

4. Consider this custom directive code snippet in Vue 3:

app.directive('tooltip', {
  mounted(el, binding) {
    el.setAttribute('title', binding.value)
  },
  updated(el, binding) {
    el.setAttribute('title', binding.oldValue)
  }
})

What is the problem with this directive when the binding value changes?

medium

A. The tooltip title does not update to the new value

B. The directive causes a syntax error

C. The title attribute is removed on update

D. The directive works correctly with no issues

Solution

1. Step 1: Analyze the updated hook usage

   The updated hook sets the title attribute to binding.oldValue, which is the previous value, not the new one.

2. Step 2: Understand the effect on the tooltip

   Because it sets the old value on update, the tooltip does not reflect the new binding value after change.

3. Final Answer:

   The tooltip title does not update to the new value -> Option A

4. Quick Check:

   updated hook must use binding.value, not binding.oldValue [OK]

Hint: Use binding.value in updated hook, not binding.oldValue [OK]

Common Mistakes:

• Using binding.oldValue instead of binding.value on update
• Assuming no update needed for title
• Confusing syntax error with logic error

5. You want to create a custom directive v-auto-focus that automatically focuses an input element only when it is inserted into the DOM and not on updates. Which is the best way to implement this directive in Vue 3?

hard

A. Use the created hook to call el.focus()

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

C. Use both mounted and updated hooks to call el.focus()

D. Use the mounted hook to call el.focus() and leave updated empty

Solution

1. Step 1: Identify when to focus the element

   The input should be focused only once when inserted, so the 'mounted' hook is the right place.

2. Step 2: Avoid focusing on updates

   Calling focus in 'updated' would focus repeatedly, which is not desired.

3. Step 3: Understand Vue 3 lifecycle hooks

   There is no 'created' hook for directives; 'mounted' is the earliest for DOM access.

4. Final Answer:

   Use the mounted hook to call el.focus() and leave updated empty -> Option D

5. Quick Check:

   Focus on mounted only, not updated [OK]

Hint: Focus in mounted hook only to avoid repeated focusing [OK]

Common Mistakes:

• Focusing in updated hook causing repeated focus
• Using non-existent created hook for directives
• Calling focus multiple times unnecessarily