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.

Practice

1. What is the main purpose of a Vue Single File Component (SFC)?

easy

A. To write only JavaScript code without any HTML or CSS

B. To separate HTML, CSS, and JavaScript into different files

C. To keep template, script, and style in one file for better organization

D. To create components without any styling or templates

Solution

1. Step 1: Understand the structure of a Vue SFC

   A Vue Single File Component combines template (HTML), script (JavaScript), and style (CSS) in one file for easier management.

2. Step 2: Compare options with this concept

   To keep template, script, and style in one file for better organization correctly describes this purpose. Options B, C, and D contradict the idea of combining all parts in one file.

3. Final Answer:

   To keep template, script, and style in one file for better organization -> Option C

4. Quick Check:

   Single File Component = Combined template, script, style [OK]

Hint: SFC means all parts in one file for neatness [OK]

Common Mistakes:

• Thinking SFC separates files instead of combining
• Believing SFC is only JavaScript code
• Ignoring the style section in SFC

2. Which of the following is the correct way to define the style section in a Vue Single File Component to apply styles only to this component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall how scoped styles work in Vue SFC

   Using the uses the correct 'scoped' attribute. Others like 'global', 'module', or 'isolated' are incorrect or unrelated here.

2. Final Answer:

   <style scoped> ... </style> -> Option A

3. Quick Check:

   Scoped style = <style scoped> [OK]

Hint: Use 'scoped' attribute to limit styles to component [OK]

Common Mistakes:

• Using <style> without scoped causes global styles
• Confusing 'module' with 'scoped' attribute
• Trying non-existent attributes like 'isolated'

3. Given this Vue SFC snippet, what will be displayed when the component renders?

<template>
  <div>{{ message }}</div>
</template>

<script setup>
const message = 'Hello Vue!'
</script>

medium

A. undefined

B. Hello Vue!

C. {{ message }}

D. Error: message is not defined

Solution

1. Step 1: Understand template interpolation

   The template uses {{ message }} which displays the value of the 'message' variable from the script.

2. Step 2: Check the script setup variable

   The script setup defines 'message' as 'Hello Vue!'. This value will replace {{ message }} in the template.

3. Final Answer:

   Hello Vue! -> Option B

4. Quick Check:

   Template interpolation shows variable value [OK]

Hint: Variables in script setup show in template with {{ }} [OK]

Common Mistakes:

• Thinking {{ message }} prints literally
• Assuming message is undefined without export
• Confusing script setup with normal script

4. Identify the error in this Vue Single File Component:

<template>
  <button @click='increment'>Count: {{ count }}</button>
</template>

<script setup>
let count = 0
function increment() {
  count++
}
</script>

medium

A. The script setup block cannot contain functions

B. The increment function is missing parentheses in the template

C. The template syntax for event binding is incorrect

D. The count variable should be a ref to be reactive

Solution

1. Step 1: Check reactivity of count variable

   In Vue 3 script setup, to make a variable reactive and update the template, it must be a ref or reactive object.

2. Step 2: Analyze the code

   Here, count is a plain number, so incrementing it won't update the template. It should be defined as const count = ref(0).

3. Final Answer:

   The count variable should be a ref to be reactive -> Option D

4. Quick Check:

   Reactive state needs ref() or reactive() [OK]

Hint: Use ref() for reactive variables in script setup [OK]

Common Mistakes:

• Forgetting to import ref from 'vue'
• Thinking functions can't be in script setup
• Misusing event binding syntax

5. You want to create a reusable Vue Single File Component that accepts a title prop and displays it inside an <h1> tag. Which of the following is the correct way to define the prop and use it in the template?

hard

A.
{{ title }}

B.
{{ props.title }}

C.
{{ title }}

D.
{{ title }}

Solution

1. Step 1: Understand how to define props in script setup

   In Vue 3 script setup, props are defined using defineProps(), which returns an object with prop values.

2. Step 2: Check how to use props in template

   Since defineProps returns an object named props, you can destructure or use the props object. But Vue automatically exposes props keys as variables, so {{ title }} works if you assign props to a variable.

3. Step 3: Analyze options

   {{ title }}

   correctly defines props and uses {{ title }} in template.

   {{ props.title }}

   incorrectly uses {{ props.title }} in template (props is not exposed automatically).

   {{ title }}

   wrongly assigns defineProps to title.

   {{ title }}

   does not use defineProps.

4. Final Answer:

   Option A correctly defines and uses the title prop -> Option A

5. Quick Check:

   Use defineProps() and {{ title }} for props [OK]

Hint: Use defineProps() and {{ title }} to access props [OK]

Common Mistakes:

• Using props.title in template without destructuring
• Assigning defineProps() result to wrong variable
• Not using defineProps() at all