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

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 3

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 4

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

Question 5

How do dynamic routes and route params work in Vue Router?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who has a basic router set up — see [how to set up Vue Router](/interview-question/how-do-you-set-up-vue-router-routes-routerlink-routerview-history-modes) if not. **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. Every output block was produced by running the code on Vue 3.5.44 and vue-ro

Question 6

What are provide and inject?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview. Assumes you know props and `ref()`. **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. Every output in the "Verified" sections was produced on Vue 3.5.44: the runnable example with the repo verifier (compiled and mounted in jsdom), the app-level behaviour with a Node script against the sam

Question 7

How do you use TypeScript with Vue (typed props, emits, refs, vue-tsc)?

Accepted Answer

**Target Audience:** Vue developers adopting TypeScript, or TypeScript developers new to Vue's single file components.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every type error below is real output from `vue-tsc` 3.3.13 with TypeScript 5.9 and `strict: true`; compiled output comes from `@vue/compiler-sfc` 3.5.44; runtime behaviour and warnings come from mounting the components in jsdom on Vue 3.5.44; the `vite build` result is

Question 8

What is defineExpose?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who has used `

Question 9

What is defineExpose() and why are <script setup> components closed by default?

Accepted Answer

**Target Audience:** Vue developers who know template refs and are moving from the Options API to `

Question 10

How do you add global properties or config?

Accepted Answer

**Target Audience:** Vue developers setting up an app's entry file, or migrating `Vue.prototype` code from Vue 2.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The runtime output below came from bundling the example (`main.js` plus three SFCs) with esbuild and running it in jsdom on Vue 3.5.44; the TypeScript errors came from `vue-tsc` 3.3.13 with `strict: true`.

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

Think of an office build

VUE.JSDECODED.

Easy

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

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

What is a Single File Component (SFC)?

Medium

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

How do dynamic routes and route params work in Vue Router?

What are provide and inject?

How do you use TypeScript with Vue (typed props, emits, refs, vue-tsc)?

What is defineExpose?

What is defineExpose() and why are <script setup> components closed by default?

How do you add global properties or config?

How do Vue components communicate?

Hard

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

What is async setup and top-level await?

How does the Vue compiler optimize templates (static hoisting, patch flags, block tree)?

What is lazy hydration in Vue 3.5 — hydrate strategies (idle, visible, interaction)?