Vue components in Astro - Mini Project: Build & Apply

Using Vue Components in Astro

📖 Scenario: You are building a simple Astro website that uses Vue components to show interactive content. Astro lets you mix Vue components inside its pages easily.

🎯 Goal: Create an Astro page that imports a Vue component, passes a message to it, and displays it on the page.

📋 What You'll Learn

Create a Vue component file with a message prop

Create an Astro page that imports the Vue component

Pass a message string from Astro to the Vue component

Render the Vue component inside the Astro page

💡 Why This Matters

🌍 Real World

Astro is a modern framework for building fast websites. Using Vue components inside Astro lets you add interactive UI parts easily while keeping the site fast.

💼 Career

Many web development jobs require integrating frontend frameworks like Vue with modern static site generators or meta-frameworks like Astro. This skill helps build performant, interactive websites.

1

Create a Vue component with a message prop

Create a Vue component file named MessageDisplay.vue with a props option that accepts a message string. Inside the template, display the message inside a <p> tag.

Astro

Hint

Use defineProps in the <script setup> block to declare the message prop.

2

Create an Astro page and import the Vue component

Create an Astro page file named index.astro. Import the Vue component MessageDisplay from ./MessageDisplay.vue. Create a constant variable greeting with the value "Hello from Astro!".

Astro

  {{ message }}



defineProps({
  message: String
})


---
// Import Vue component and create greeting variable here

# Your code here

Hint

Use import MessageDisplay from './MessageDisplay.vue' and const greeting = "Hello from Astro!".

3

Use the Vue component in the Astro page with the message prop

In the index.astro file, inside the frontmatter separator ---, add the Vue component <MessageDisplay /> in the page markup. Pass the greeting variable as the message prop to MessageDisplay.

Astro

  {{ message }}



defineProps({
  message: String
})


---
import MessageDisplay from './MessageDisplay.vue';

const greeting = "Hello from Astro!";


# Your code here

Hint

Use <MessageDisplay message={greeting} /> in the Astro page markup.

4

Add the Vue integration to the Astro page

In the index.astro file, add the directive client:load to the <MessageDisplay> component to enable Vue client-side rendering.

Astro

  {{ message }}



defineProps({
  message: String
})


---
import MessageDisplay from './MessageDisplay.vue';

const greeting = "Hello from Astro!";


# Your code here

Hint

Add client:load to the <MessageDisplay> tag to load the Vue component on the client.