Vue Custom Directives: For Low-Level DOM Access
Vue custom directives are for low-level DOM access. Use them for tasks like auto-focusing a dynamically inserted input. The footgun is using them for stateful logic or UI structure, where a composable or component is the right tool.
Why it exists
While Vue provides components for UI structure and composables for stateful logic, sometimes you need to drop down a level and directly manipulate a DOM element. Custom directives provide a structured, reusable way to do this within the Vue ecosystem, keeping your code clean.
The mental model
Think of custom directives as a dedicated tool for direct DOM manipulation. They are the Vue-native way to handle tasks that would otherwise require manual DOM queries. While components build UI and composables manage logic, directives are for when you just need to call element.focus() or add a special class after an element is mounted.
How it works
A custom directive is an object containing lifecycle hooks, like mounted. These hooks receive the element the directive is bound to. In <script setup>, a camelCase variable starting with v (e.g., vFocus) is automatically available in the template as a directive (e.g., v-focus). You can also register them globally on the app instance or locally in a component's directives option.
When to use it
Use a custom directive only when the functionality requires direct DOM manipulation. A classic case is an auto-focus feature for an input that appears conditionally. The standard HTML autofocus attribute only works on page load, but a v-focus directive works whenever Vue inserts the element into the DOM.
When not to use it
Avoid directives for logic that can be handled by components or composables. If you're managing state or creating a reusable piece of UI, a directive is the wrong tool. Overusing them for non-DOM tasks makes code harder to understand and maintain. Stick to their intended purpose: low-level DOM access.
One canonical example
The v-focus directive is a perfect example of why directives are useful. It solves a problem that the native autofocus attribute cannot: focusing an element that is dynamically added to the page. The implementation is simple: const vFocus = { mounted: (el) => el.focus() }. In a template, you'd use it like this: <input v-focus />. Whenever this input is mounted by Vue, it will immediately gain focus.
Interview question
Which scenario is the most appropriate use case for a Vue custom directive?
- a.Defining the overall layout and structure of a page or section of an application.
- b.Encapsulating complex business logic that needs to be shared across multiple components.
- c.Creating a reusable button component with its own internal state and click handler.
- d.Implementing a feature to automatically focus an input field when it appears on the screen.Correct
Why? this is the answer
Custom directives are designed for direct, low-level DOM manipulation, like programmatically focusing an element. Managing complex business logic (option B) is better suited for composables, while reusable UI elements (option C) are best built as components.
Just read this? Test yourself on what you have been reading.
Read the original → vuejs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on vue — each one lists the topics its interview covers.
See open roles