What is Vue - Hands-On Activity

What is Vue

📖 Scenario: You want to create a simple webpage that shows a friendly message using Vue. This will help you understand what Vue is and how it works.

🎯 Goal: Build a basic Vue component that displays the text "Hello from Vue!" on the page.

📋 What You'll Learn

Create a Vue 3 component using the Composition API with <script setup>

Use a ref to hold the message text

Display the message inside a <div> in the template

Use semantic HTML with a <main> container

Ensure the component is standalone and ready to render

💡 Why This Matters

🌍 Real World

Vue is used to build interactive web pages and apps that update smoothly when data changes, like social media feeds or online stores.

💼 Career

Knowing Vue helps you work as a frontend developer creating modern, user-friendly websites and applications.

1

Set up the Vue component skeleton

Create a Vue component file with <template> and <script setup> tags. Inside the template, add a <main> element.

Vue

  
    
  



// Your code here

Need a hint?

Start by writing the basic structure of a Vue component with template and script setup tags.

2

Create a message variable using ref

Inside the <script setup> tag, import ref from 'vue' and create a variable called message using ref with the value "Hello from Vue!".

Vue

  
  



// Import ref and create message variable
// Your code here

Need a hint?

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

3

Display the message in the template

Inside the <main> element in the template, add double curly braces to display the message variable.

Vue

  
    
  



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

Need a hint?

Use mustache syntax {{ message }} inside the main tag to show the message.

4

Make the component standalone

Add the standalone attribute to the <script setup> tag to make this Vue component standalone.

Vue

  
    {{ message }}
  



// Add standalone attribute here
import { ref } from 'vue'
const message = ref('Hello from Vue!')

Need a hint?

Add standalone inside the <script setup> tag like this: <script setup standalone>.