Single File Components concept in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Single File Component (SFC) in Vue?

A Single File Component in Vue is a file with a .vue extension that contains the template, script, and style sections all in one file. It helps organize code by keeping related parts together.

beginner

Which three main sections are found inside a Vue Single File Component?

The three main sections are:
1. <template> for HTML structure
2. <script> for JavaScript logic
3. <style> for CSS styling

intermediate

How does using Single File Components help in building Vue apps?

It keeps the template, logic, and styles together, making the code easier to read and maintain. It also supports scoped styles and better tooling support like syntax highlighting and linting.

intermediate

What does the scoped attribute do in the <style> section of a Vue SFC?

The scoped attribute makes the CSS styles apply only to the current component, preventing them from affecting other parts of the app.

advanced

Can you use multiple <script> or <style> tags in a Vue Single File Component?

Yes, you can have multiple <style> tags (for example, with different scopes or languages like SCSS) and multiple <script> tags (e.g., <script setup> and <script> for options).

What file extension do Vue Single File Components use?

A .vue

B .js

C .html

D .css

Vue Single File Components always use the .vue extension to combine template, script, and style.

Which section in a Vue SFC contains the HTML markup?

A <script>

B <style>

C <template>

D <markup>

The <template> section holds the HTML structure of the component.

What is the purpose of the scoped attribute in the <style> tag?

A To apply styles only to the current component

B To disable styles

C To apply styles globally

D To import external styles

The scoped attribute limits styles to the component, avoiding conflicts.

Can you have more than one <script> tag in a Vue SFC?

A Yes, but only two

B Yes, unlimited

C Only if they are empty

D No, only one is allowed

Vue SFCs support multiple <script> tags, such as <script setup> and a regular <script> for options.

Why are Single File Components useful in Vue development?

A They only work with CSS frameworks

B They separate template, logic, and styles into different files

C They remove the need for JavaScript

D They combine template, logic, and styles in one file for better organization

SFCs keep all parts of a component together, making code easier to manage.

Explain what a Vue Single File Component is and why it is helpful.

Think about how keeping related code together helps when building apps.

Describe the role of the scoped attribute in Vue SFC styles and how it affects CSS.

Consider how styles might accidentally affect other parts of a page without scoping.

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