What are Vue directives and how do you create a custom directive?
Learn what Vue directives are, the built-in ones like v-if and v-model, and how to create and register custom directives with lifecycle hooks and examples.
Expected Interview Answer
Vue directives are special attributes prefixed with v- (like v-if, v-for, v-model, v-bind) that tell Vue to apply reactive behavior directly to an element or its rendering, and you can create custom directives to encapsulate low-level DOM manipulation you want to reuse.
Built-in directives cover conditional rendering, list rendering, two-way binding, and attribute binding. A custom directive is an object with lifecycle hooks — most commonly mounted and updated — that receive the element and a binding object holding the passed value. You register it globally with app.directive('name', hook) or locally in a component's directives option, then use it as v-name in templates. Custom directives are ideal for focus, tooltips, click-outside detection, or scroll behavior where you need direct DOM access rather than component logic.
- Reusable DOM behavior across components
- Declarative usage right in the template
- Direct low-level access to elements
- Lifecycle hooks that react to updates
- Keeps components free of repetitive DOM code
- Can be global or scoped locally
AI Mentor Explanation
Built-in directives are like the standard umpire signals — out, four, six — that everyone instantly understands and that trigger set actions on the field. A custom directive is like a team inventing its own agreed hand signal for a special field placement: once defined and taught, a coach can flash it anywhere and the players react consistently without re-explaining it each time.
Step-by-Step Explanation
Step 1
Understand built-in directives
Know v-if, v-for, v-model, v-bind, and v-on and what each declaratively does.
Step 2
Define the directive object
Create an object with hooks like mounted(el, binding) and updated(el, binding).
Step 3
Use the binding argument
Read binding.value, binding.arg, and binding.modifiers to configure behavior.
Step 4
Register the directive
Globally via app.directive('focus', ...) or locally in a component's directives option.
Step 5
Apply it in the template
Use v-focus or v-tooltip on the target element to attach the behavior.
What Interviewer Expects
- Naming common built-in directives
- Knowing custom directive lifecycle hooks
- Understanding the el and binding arguments
- Global vs local registration
- Good use cases like autofocus or click-outside
- When a component is better than a directive
Common Mistakes
- Confusing directives with components
- Using bind/inserted (Vue 2) instead of mounted (Vue 3) hooks
- Forgetting to read binding.value for the passed data
- Manipulating the DOM in ways that fight Vue's reactivity
- Registering globally when local scope is enough
Best Answer (HR Friendly)
“Directives are special v- attributes in Vue that add behavior to elements, like showing, hiding, or binding data. When you need the same custom element behavior in many places, you can build your own directive once and reuse it anywhere in the app.”
Code Example
// Global registration in main.js
app.directive('focus', {
mounted(el) {
el.focus()
},
})
// Local registration with a value
export default {
directives: {
color: {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
},
},
},
}
// Template usage:
// <input v-focus />
// <p v-color="'red'">Hello</p>Follow-up Questions
- What arguments do directive lifecycle hooks receive?
- How did directive hooks change from Vue 2 to Vue 3?
- How do you pass arguments and modifiers to a custom directive?
- When would you choose a component over a directive?
- How would you build a click-outside directive?
MCQ Practice
1. Which of these is a built-in Vue directive?
v-model is a built-in directive for two-way binding; the others are not real Vue directives.
2. Which hook runs when a custom directive's element is inserted into the DOM in Vue 3?
Vue 3 renamed the hooks; mounted runs when the bound element is inserted, replacing Vue 2's bind/inserted.
3. How do you read the value passed to a custom directive?
The second hook argument, binding, exposes the passed value as binding.value.
Flash Cards
What is a Vue directive? — A special v- prefixed attribute that applies reactive behavior to an element, like v-if or v-model.
Key custom directive hooks? — mounted and updated (Vue 3), which receive the element and a binding object.
How to register globally? — app.directive('name', hooks); use locally via a component's directives option.
What holds the passed value? — The binding argument — binding.value, plus binding.arg and binding.modifiers.