Single File Components concept in Vue - Mini Project: Build & Apply

Building a Simple Vue Single File Component

📖 Scenario: You are creating a small Vue app to show a greeting message. You will build a Single File Component (SFC) step-by-step.

🎯 Goal: Build a Vue Single File Component named Greeting.vue that displays a greeting message inside a <template> block, uses a message data property in the <script setup> block, and styles the message with a CSS class in the <style scoped> block.

📋 What You'll Learn

Create a Vue Single File Component named Greeting.vue

Add a <template> block with a <div> showing the greeting message

Add a <script setup> block defining a reactive message variable with the text 'Hello, Vue!'

Add a <style scoped> block that styles the greeting text color to blue

💡 Why This Matters

🌍 Real World

Single File Components are the standard way to build Vue apps. They keep HTML, JavaScript, and CSS together for each component, making code easier to manage and reuse.

💼 Career

Vue developers use SFCs daily to build interactive web apps. Understanding SFC structure is essential for frontend roles involving Vue.

1

Create the template block with a div

Create a <template> block in Greeting.vue containing a <div> element with the text {{ message }} inside it.

Vue

Need a hint?

The <template> block holds the HTML structure. Use mustache syntax {{ message }} to show the message variable.

2

Add the script setup block with message variable

Add a <script setup> block below the template. Inside it, import ref from 'vue' and create a constant called message using ref with the initial value 'Hello, Vue!'.

Vue

  {{ message }}



// Import ref and create message variable here

Need a hint?

Use import { ref } from 'vue' and then const message = ref('Hello, Vue!') to create a reactive variable.

3

Add scoped style block to color the message blue

Add a <style scoped> block below the script. Inside it, write CSS to make the div text color blue.

Vue

  {{ message }}



import { ref } from 'vue'
const message = ref('Hello, Vue!')



/* Add CSS to color div text blue */

Need a hint?

The scoped attribute limits styles to this component. Use div { color: blue; } to style the text.

4

Complete the Single File Component structure

Ensure the Greeting.vue file has the <template>, <script setup>, and <style scoped> blocks in this order, with the exact content from previous steps.

Vue

  {{ message }}



import { ref } from 'vue'
const message = ref('Hello, Vue!')



div {
  color: blue;
}

Need a hint?

Check that all three blocks are present and in the correct order with the correct content.