Text interpolation with mustache syntax in Vue - Mini Project: Build & Apply

Text interpolation with mustache syntax

📖 Scenario: You are building a simple Vue app that shows a greeting message to users. The message should update automatically when the data changes.

🎯 Goal: Create a Vue component that uses mustache syntax to display a greeting message stored in the component's data.

📋 What You'll Learn

Use Vue 3 with the Composition API and <script setup>

Create a reactive variable called greeting with the value 'Hello, Vue learner!'

Use mustache syntax {{ greeting }} in the template to show the greeting

Ensure the component is standalone and can be rendered directly

💡 Why This Matters

🌍 Real World

Text interpolation is used in many web apps to show dynamic data like user names, messages, or live updates.

💼 Career

Understanding how to bind data to the UI with mustache syntax is a fundamental skill for Vue developers and frontend engineers.

1

Create the greeting data variable

In the <script setup> section, import ref from 'vue' and create a reactive variable called greeting with the value 'Hello, Vue learner!'.

Vue

  



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

Need a hint?

Use ref to create a reactive variable in Vue 3 Composition API.

2

Add the template with mustache syntax

In the <template> section, add a <p> tag that displays the greeting variable using mustache syntax {{ greeting }}.

Vue

   tag that shows the greeting using {{ greeting }} -->
  



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

Need a hint?

Use double curly braces {{ }} to show reactive data in Vue templates.

3

Add a button to change the greeting

Below the <p> tag, add a <button> that changes the greeting variable to 'You clicked the button!' when clicked. Use the @click event with an inline arrow function.

Vue

  {{ greeting }}
  
  



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

Need a hint?

Use @click with an arrow function to update reactive data.

4

Make the component standalone

Add the export default { block with name: 'GreetingComponent' and standalone: true below the <script setup> code to make the component standalone.

Vue

  {{ greeting }}
   greeting.value = 'You clicked the button!'">Click me



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

// Add export default with name and standalone true
// Your code here

Need a hint?

Standalone components can be used directly without modules.