What are Vue directives? Give common examples. | Interview Question

Q: What are Vue directives? Give common examples.

**Target Audience:** Beginners who can read a basic Vue template and want to understand every v- attribute they see. Basic HTML and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The rendered output, the compiled render function and the warnings below come from compiling and mounting the example on Vue 3.5.44, not from memory. ## 1. Why This Even Matters — A Story First Imagine a theatre script. Most of it is dialogue, but in the margins the director has written stage directions: "lights up only if the king is on stage", "repeat this chorus for each verse", "when the bell rings, everyone exits", "keep the curtain half open". The actors do not read those notes aloud. The notes tell the crew how to behave as the play goes on. In a Vue template, the HTML is the dialogue and the **directives** are the stage directions. v-if says "only show this when...", v-for</cod

The problem

Question presented to candidate: "Vue templates are full of attributes that start with v-. What is a directive, which ones do you use every day, and can you write your own?"

What a strong answer should cover:

A directive is a special v- attribute that applies reactive behaviour to the DOM when its value changes; anatomy v-name:arg.modifiers="expression".
The everyday built-ins: v-if / v-else-if / v-else, v-show, v-for (with :key), v-bind (:), v-on (@), v-model, plus v-slot (#), v-text, v-html, v-pre, v-once, v-memo and v-cloak.
Most built-ins are compiled away into plain JavaScript (v-if becomes a ternary, v-for a renderList call, v-on an onClick prop); v-model, v-show and custom directives stay as runtime directives applied with withDirectives.
Custom directives are objects with lifecycle hooks (created, mounted, updated, beforeUnmount, unmounted and so on) that receive the element and a binding (value, arg, modifiers); in <script setup> any vXxx variable becomes v-xxx.
Use a custom directive for low-level DOM access (focus, tooltips, intersection observers); prefer components or composables for anything else.

Clarifying questions expected:

"Should I focus on the built-ins, or on writing a custom one?"

Code / implementation expected: Optional. A template using the common directives; a custom directive is a plus.

directives

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners who can read a basic Vue template and want to understand every v- attribute they see. Basic HTML and JavaScript assumed. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. The rendered output, the compiled render function and the warnings below come from compiling and mounting the example on Vue 3.5.44, not from memory.

1. Why This Even Matters — A Story First

Imagine a theatre script. Most of it is dialogue, but in the margins the director has written stage directions: "lights up only if the king is on stage", "repeat this chorus for each verse", "when the bell rings, everyone exits", "keep the curtain half open". The actors do not read those notes aloud. The notes tell the crew how to behave as the play goes on.

In a Vue template, the HTML is the dialogue and the directives are the stage dir

The solution is hidden so you can try first

10 min read · 9 sections

Read the code

VueBuilt-in directives side by side, plus a custom v-highlight directive

Open in playground

<script setup>
import { ref } from "vue";

const status = ref("loading");
const items = ref(["apples", "pears"]);
const query = ref("");
const showHelp = ref(false);

// A custom directive: any camelCase variable named vXxx becomes v-xxx in the template.
// Anatomy used below: v-highlight:background.bold="color"
//   name = highlight, argument = background, modifier = bold, value = color
const vHighlight = {
  mounted(el, binding) {
    el.style[binding.arg || "color"] = binding.value;
    if (binding.modifiers.bold) el.style.fontWeight = "bold";
    console.log("v-highlight mounted:", JSON.stringify({ arg: binding.arg, value: binding.value, modifiers: binding.modifiers }));
  },
};
</script>

<template>
  <!-- conditional rendering -->
  <p v-if="status === 'loading'" class="st">Loading...</p>
  <p v-else-if="status === 'error'" class="st">Something broke</p>
  <p v-else class="st">Loaded</p>

  <!-- list rendering -->
  <ul>
    <li v-for="(item, i) in items" :key="item">{{ i + 1 }}. {{ item }}</li>
  </ul>

  <!-- two-way binding + text -->
  <input v-model="query" placeholder="Search" />
  <p class="echo" v-text="'You typed: ' + query"></p>

  <!-- events and attribute binding -->
  <button @click="status = 'done'">Finish</button>
  <button @click="showHelp = !showHelp" :aria-expanded="showHelp">Help</button>
  <p v-show="showHelp" class="help">Help text</p>

  <!-- skip compilation entirely -->
  <code v-pre>{{ this stays literal }}</code>

  <!-- custom directive -->
  <span v-highlight:background.bold="'yellow'" class="hl">highlighted</span>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.