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 is Vue.js and what are its core features?

Accepted Answer

**Target Audience:** Complete beginners preparing for a first Vue interview. Assumes you know a little HTML and JavaScript, nothing about Vue or any other framework. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The outputs in sections 5 and 6 were produced by actually compiling and running the code on Vue 3.5.44, the current stable r

Question 2

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 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 is Nuxt and how does it relate to Vue?

Accepted Answer

**Target Audience:** Vue developers who have heard of Nuxt and need to explain what it adds. No Nuxt experience assumed. **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. Everything in the "Verified" sections comes from a real Nuxt 4.6.1 project created for this answer: built with nuxt build, run as a production server, fetched with

Question 5

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 6

How do you lazy-load routes and components in Vue?

Accepted Answer

**Target Audience:** Developers with a working Vue Router app who want a smaller initial download and a way to prove it. **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 build output is from a real app built with Vite 8.3.4, @vitejs/plugin-vue 6.0.10, Vue 3.5.44 and vue-router 5.4.0. Which chunks were fetched on each navigation

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

How do you test Vue components (Vitest and Vue Test Utils)?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who can write [Single File Components](/interview-question/what-is-a-single-file-component-sfc) — no testing experience required. **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 test in this doc was actually run: Vitest 5.0.5 with @vitejs/plugin-vue 6.0.10, @vue/test-utils 2.5.1, j

Question 9

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

Accepted Answer

**Target Audience:** Vue and TypeScript developers who build reusable components such as lists, tables and selects.
**Difficulty:** Hard

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. All type errors below are real output from `vue-tsc` 3.3.13 (TypeScript 5.9, `strict: true`) run on the example files; the compiled output comes from `@vue/compiler-sfc` 3.5.44; the runnable example was mounted in jsdom on Vue 3.5.44.

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

VUE.JSDECODED.

Easy