Q: What is a Single File Component (SFC)?

**Target Audience:** Beginners who have seen .vue files but do not know what is inside one or what happens to it. Basic HTML, CSS and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled JavaScript and CSS in sections 5 and 6 are the real, unedited output of @vue/compiler-sfc 3.5.44, the same compiler @vitejs/plugin-vue calls during a Vite build. The runnable

Question 1

What are props in Vue and how do you validate them?

Accepted Answer

**Target Audience:** Vue beginners who have built a component or two and now need them to accept configuration from a parent.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every warning message, rendered value and production-build result quoted below came from running the code on Vue 3.5.44, compiled with `@vue/compiler-sfc` and mounted in jsdom, in development and production mode.

## 1. Why This Even Matters — A Story First

A coffe

Question 2

What are Vue directives? Give common examples.

Accepted Answer

**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 sc

Question 3

What changed from Vue 2 to Vue 3, and what does Vue 2 end of life mean?

Accepted Answer

**Target Audience:** Developers who meet Vue 2 code at work, or see Vue 2 tutorials online, and need to explain what is different in Vue 3. Basic Vue knowledge helps but every term is defined. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The comparisons in sections 4 and 5 were not taken from the migration guide: the same code was run on **vue 2.7.16** and **vue 3.5.44** side by side in Node with jsdom, and the outputs are

Question 4

How do defineProps and defineEmits work in <script setup>?

Accepted Answer

**Target Audience:** Vue 3 developers using `<script setup>` who want to understand the two macros they write in almost every component.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. All compiled output and compiler errors come from `@vue/compiler-sfc` 3.5.44 `compileScript()`; runtime logs from a two-component app compiled the same way and mounted in jsdom; type errors from `vue-tsc` 3.3.13.

## 1. Why This Even Matters — A Story Fir

Question 5

How do you create a new Vue 3 app, and what is in the project structure?

Accepted Answer

**Target Audience:** Beginners who have never set up a frontend project. Assumes Node.js is installed and you can type commands in a terminal; no Vue, Vite or build-tool knowledge needed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. Nothing below is from memory: the project was generated by running create-vue 3.24.0 non-interactively in a sandbox, then installed, type-checked, bui

Question 6

What is a Single File Component (SFC)?

Accepted Answer

**Target Audience:** Beginners who have seen .vue files but do not know what is inside one or what happens to it. Basic HTML, CSS and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled JavaScript and CSS in sections 5 and 6 are the real, unedited output of @vue/compiler-sfc 3.5.44, the same compiler @vitejs/plugin-vue calls during a Vite build. The runnable

Question 7

How do , and compose in Vue 3?

Accepted Answer

**Target Audience:** Developers who already know [Transition](/interview-question/how-do-transition-and-transitiongroup-work), [KeepAlive](/interview-question/what-is-keep-alive-in-vue) and [Suspense](/interview-question/what-is-suspense-in-vue) on their own and need them to work together. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The tra

Question 8

What is the difference between ref and reactive?

Accepted Answer

**Target Audience:** Developers who have written a Vue 3 component or two and want to stop guessing between ref and reactive. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output below was produced on Vue 3.5.44: the reactivity probe with node, the component by compiling it with @vue/compiler-sfc and clicking through it in js

Question 9

Pinia colocation in 2025 — how do you colocate stores with routes/components?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who knows [what Pinia is](/interview-question/what-is-pinia-and-why-use-it) and has used lazy routes — mid-level and up. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The chunk listings are real vite build output (Vite 8.3.4) of the small app whose files appear in the exam

Question 10

What do defineOptions() and defineSlots() do in <script setup>?

Accepted Answer

**Target Audience:** Vue developers using `<script setup>` who want the remaining component options and typed slots.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiler output and every error message below come from running `@vue/compiler-sfc` 3.5.44; the runnable example was mounted in jsdom; the type errors come from `vue-tsc` 3.3.13. The version claims were checked against the published `@vue/runtime-core` type definitions

VUE.JSDECODED.

Easy

What are props in Vue and how do you validate them?

What are Vue directives? Give common examples.

What changed from Vue 2 to Vue 3, and what does Vue 2 end of life mean?

How do defineProps and defineEmits work in <script setup>?

How do you create a new Vue 3 app, and what is in the project structure?

What is a Single File Component (SFC)?

Medium

How do <Transition>, <KeepAlive> and <Suspense> compose in Vue 3?

What is the difference between ref and reactive?

Pinia colocation in 2025 — how do you colocate stores with routes/components?

What do defineOptions() and defineSlots() do in <script setup>?

How does <Suspense> work in Vue 3.5 after the 2024 stabilization?

How do you make provide/inject type-safe?

Why use storeToRefs with Pinia?

What is a Vue plugin?

Hard

What is Vapor mode in Vue 3.5+ and how does it differ from the virtual DOM?

How do generic <script setup> components work (generic="T")?

When should you choose Vapor over VDOM in a real app — trade-offs?

What is async setup and top-level await?

What is Suspense in Vue?

How do you render very large lists efficiently in Vue (virtual scrolling)?

How would you structure state management for a large Vue app?

What are common reactivity caveats in Vue?