Single File Components concept in Vue - Step-by-Step Execution

Concept Flow - Single File Components concept

Create .vue file

↓

Add <template> section

↓

Add <script setup> section

↓

Add <style> section

↓

Vue compiler processes file

↓

Component ready to use

↓

Import and render component in app

This flow shows how a Vue Single File Component is created with template, script, and style sections, then compiled and used in the app.

Execution Sample

Vue

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
button { color: blue; font-size: 1.2rem; }
</style>

A Vue Single File Component with a button that increments a counter on click, styled with scoped CSS.

Execution Table

Step	Action	State Change	Output/Effect
1	Vue reads <template>	Template parsed	Button element created with click event binding
2	Vue reads <script setup>	count variable initialized to 0	Reactive count variable ready
3	Vue reads <style scoped>	CSS rules scoped to this component	Button styled with blue color and larger font
4	Component compiled	Template, script, style combined	Component ready to render
5	Component rendered	count = 0	Button shows 'Clicked 0 times'
6	User clicks button	count increments to 1	Button updates to 'Clicked 1 time'
7	User clicks button again	count increments to 2	Button updates to 'Clicked 2 times'
8	No more clicks	count remains 2	Button shows 'Clicked 2 times'

💡 User stops clicking; component state remains reactive and UI updates accordingly

Variable Tracker

Variable	Start	After Step 5	After Step 6	After Step 7	Final
count	undefined	0	1	2	2

Key Moments - 3 Insights

Why does the button text update automatically when count changes?

Because count is a reactive variable created with ref(), Vue tracks its changes and updates the template automatically as shown in steps 6 and 7 of the execution_table.

What is the purpose of the <style scoped> section?

The <style scoped> section applies CSS only to this component's elements, preventing styles from leaking out or affecting other parts of the app, as noted in step 3.

Why do we use <script setup> instead of a normal <script>?

<script setup> is a simpler syntax that runs at compile time, allowing direct use of variables in the template without needing to return them, demonstrated in step 2.

Visual Quiz - 3 Questions

Look at the execution_table at step 6. What is the value of count after the user clicks the button once?

A 0

B 1

C 2

D undefined

💡 Hint

Check the 'State Change' column at step 6 in the execution_table.

At which step does Vue apply scoped CSS styles to the component?

A Step 3

B Step 1

C Step 5

D Step 7

💡 Hint

Look for the step mentioning CSS rules scoped to the component in the execution_table.

If we remove the ref() from count, what would happen to the button text updates?

A Button text updates normally

B Button text updates but with delay

C Button text never updates after clicks

D Component fails to compile

💡 Hint

Refer to the variable_tracker and key_moments about reactivity and ref() usage.

Concept Snapshot

Vue Single File Components (.vue files) combine template, script, and style in one file.
Use <template> for HTML structure.
Use <script setup> for reactive logic with Composition API.
Use <style scoped> to style only this component.
Vue compiles these parts into a reusable component.
Reactive variables update the UI automatically.

Full Transcript

A Vue Single File Component is a special file ending with .vue that holds three parts: template, script, and style. The template defines the HTML structure, the script (using <script setup>) contains reactive variables and logic, and the style (with scoped attribute) applies CSS only to this component. When Vue processes this file, it compiles these parts together into a component that can be used in the app. Reactive variables like those created with ref() automatically update the displayed content when their values change, as seen when clicking the button increments the count and updates the text. Scoped styles ensure the CSS does not affect other parts of the app. This approach keeps component code organized and easy to maintain.