Setup function basics in Vue - Mini Project: Build & Apply

Setup function basics

📖 Scenario: You are building a simple Vue 3 component that shows a greeting message. You will use the <script setup> to define the component's data.

🎯 Goal: Create a Vue 3 component using the Composition API with <script setup> that defines a reactive variable message with the value 'Hello, Vue!'. The message will be automatically available for use in the template.

📋 What You'll Learn

Use the Composition API with <script setup>

Import and use ref from 'vue'

Create a reactive variable called message with the exact value 'Hello, Vue!'

Make the message variable available to the template (automatic in <script setup>)

Use the message variable in the template with interpolation

💡 Why This Matters

🌍 Real World

Vue 3's <code>&lt;script setup&gt;</code> is the modern way to write components. It helps organize code clearly and makes it easier to manage reactive data.

💼 Career

Understanding the <code>&lt;script setup&gt;</code> and Composition API is essential for modern Vue development jobs, as many projects use this pattern for better scalability and maintainability.

1

Create the Vue component skeleton

Write the basic Vue 3 component structure with <template> and <script setup> tags. Inside the template, add a <div> element that will later display the message.

Vue

  
    
  



// Your code here

Need a hint?

Start by writing the template with a <div> that uses {{ message }} interpolation. Then add the <script setup> block below.

2

Import ref from Vue

Inside the <script setup> block, write an import statement to import ref from the 'vue' package.

Vue

  
    {{ message }}
  



import { ref } from 'vue'
// Your code here

Need a hint?

Use the ES module import syntax: import { ref } from 'vue'.

3

Create the reactive message variable

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

Vue

  
    {{ message }}
  



import { ref } from 'vue'
const message = ref('')
// Your code here

Need a hint?

Use const message = ref('Hello, Vue!') to create the reactive variable.

4

Make the message variable available for template use

In the <script setup> block, ensure the message variable is available to the template by simply defining it in the <script setup> context (no explicit return needed). Confirm the template uses {{ message }} to display the message.

Vue

  
    {{ message }}
  



import { ref } from 'vue'
const message = ref('Hello, Vue!')
// Confirm message is used in template

Need a hint?

In <script setup>, variables are automatically exposed to the template. Just make sure {{ message }} is in the template.