What is a Vue single-file component (SFC) and how is it structured?
Learn what a Vue single-file component is, how the template, script, and style blocks fit together, and why SFCs make components reusable and maintainable.
Expected Interview Answer
A Vue single-file component (SFC) is a .vue file that bundles a component's template, logic, and styles into one cohesive unit using three blocks: <template>, <script>, and <style>.
The <template> holds the HTML-based markup, <script> (or <script setup>) holds the JavaScript/TypeScript logic and reactive state, and <style> holds the CSS, optionally scoped to the component. A build tool like Vite compiles the SFC into a standard JavaScript module. Keeping the three concerns in one file makes components self-contained, easy to reason about, and simple to reuse.
- Co-locates markup, logic, and styles for one feature
- Enables scoped CSS to prevent style leakage
- Supports pre-compilation and better tooling like syntax highlighting
- Improves reusability and maintainability
- Works cleanly with TypeScript and <script setup>
AI Mentor Explanation
Think of an SFC as a single player's complete kit bag: bat, pads, and gloves all zipped into one labelled bag instead of scattered across the dressing room. Template is the bat you swing (the visible markup), script is your batting strategy (the logic), and style is your team colours (the CSS). Grab one bag and the whole player is ready, nothing missing or borrowed from someone else.
Step-by-Step Explanation
Step 1
Create the .vue file
Name the file after the component in PascalCase, e.g. UserCard.vue, so tooling and imports stay consistent.
Step 2
Add the template block
Write the component's markup inside a single <template> root, using Vue directives like v-if, v-for, and bindings.
Step 3
Add the script block
Use <script setup> to declare reactive state with ref/reactive, props with defineProps, and events with defineEmits.
Step 4
Add the style block
Place component CSS in <style>, adding the scoped attribute to keep rules local to this component.
Step 5
Compile with a build tool
Vite compiles the SFC into a standard JS module that Vue renders at runtime.
What Interviewer Expects
- Knowledge of the three blocks: template, script, style
- Awareness of <script setup> as the modern syntax
- Understanding that SFCs are compiled by a build tool
- Why co-locating concerns aids maintainability
- How scoped styles fit into the SFC model
Common Mistakes
- Thinking a template can have multiple root elements without a fragment
- Confusing <script setup> with the Options API's data() approach
- Believing .vue files run directly in the browser without compilation
- Forgetting that <style scoped> limits CSS to the component
Best Answer (HR Friendly)
“A single-file component is one Vue file that keeps a feature's HTML, JavaScript, and CSS together in one place. This makes each piece of the interface self-contained, easy to find, and simple to reuse across the app.”
Code Example
<template>
<button class="counter" @click="count++">
Clicked {{ count }} times
</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<style scoped>
.counter {
padding: 8px 16px;
font-weight: 600;
}
</style>Follow-up Questions
- What is the difference between <script> and <script setup>?
- How does scoped CSS work in an SFC?
- Can an SFC have more than one root element in its template?
- How are SFCs compiled for the browser?
- What is the difference between the Options API and Composition API in an SFC?
MCQ Practice
1. Which three blocks make up a standard Vue single-file component?
An SFC bundles a <template>, a <script> (logic), and a <style> block in one .vue file.
2. What is required before an SFC can run in the browser?
Browsers do not understand .vue files; a build tool compiles the SFC into a standard JavaScript module.
3. Which attribute keeps an SFC's CSS from leaking to other components?
Adding scoped to <style> limits the CSS rules to the current component.
Flash Cards
What is a Vue SFC? — A .vue file bundling template, script, and style blocks for one component.
What does <script setup> do? — Provides concise Composition API syntax where top-level bindings are exposed to the template.
How many root elements can a template have? — One or more; multiple roots become fragments, but a single root is common.
Why compile an SFC? — Browsers can't run .vue files directly, so tools like Vite compile them to JS modules.
Continue Learning
Related Interview Questions
What is Vue.js and how does it differ from React and Angular?
easy
What are Vue components and how do you register them globally vs locally?
easy
What is the difference between the Options API and the Composition API in Vue?
medium
What is the Vue instance and how does the application lifecycle work?
medium