Script setup syntax in Vue - Mini Project: Build & Apply

Using Script Setup Syntax in Vue 3

📖 Scenario: You are building a simple Vue 3 component that shows a greeting message and a button to change the greeting.

🎯 Goal: Create a Vue 3 component using the <script setup> syntax that displays a greeting message and updates it when a button is clicked.

📋 What You'll Learn

Use the <script setup> syntax

Create a reactive variable for the greeting message

Display the greeting message in the template

Add a button that changes the greeting message when clicked

💡 Why This Matters

🌍 Real World

Vue 3's <code>&lt;script setup&gt;</code> syntax is used in modern web apps to write cleaner and more concise components.

💼 Career

Understanding <code>&lt;script setup&gt;</code> is essential for frontend developers working with Vue 3, improving productivity and code readability.

1

Create the initial greeting variable

Inside the <script setup> block, create a reactive variable called greeting using ref and set its initial value to 'Hello, Vue!'.

Vue

  
    
  



// Create a reactive variable called greeting with initial value 'Hello, Vue!'
// Your code here

Hint

Use import { ref } from 'vue' and then const greeting = ref('Hello, Vue!').

2

Display the greeting in the template

In the