0
0
Astroframework~5 mins

Vue components in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Vue components let you build interactive parts of a website. Using them in Astro helps combine Vue's power with Astro's fast page loading.

You want to add a button that changes when clicked inside an Astro page.
You need a form with live validation inside an Astro project.
You want to reuse a Vue-built widget like a slider or modal in your Astro site.
You want to mix static content with dynamic Vue parts for better performance.
Syntax
Astro
---
import MyVueComponent from '../components/MyVueComponent.vue';
---

<MyVueComponent client:load />

Use import to bring your Vue component into the Astro file.

Add client:load or other client directives to tell Astro when to load the Vue component in the browser.

Examples
This loads the Counter Vue component when the page loads in the browser.
Astro
---
import Counter from '../components/Counter.vue';
---

<Counter client:load />
This loads the Vue component when the browser is idle, improving initial page speed.
Astro
---
import InteractiveButton from '../components/InteractiveButton.vue';
---

<InteractiveButton client:idle />
This loads the Vue component only when it becomes visible on the screen.
Astro
---
import Modal from '../components/Modal.vue';
---

<Modal client:visible />
Sample Program

This Astro page imports a Vue component called ClickCounter. The component will load in the browser when the page loads, letting users click a button that updates a count.

Astro
---
import ClickCounter from '../components/ClickCounter.vue';
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue in Astro Example</title>
  </head>
  <body>
    <h1>Click the button below:</h1>
    <ClickCounter client:load />
  </body>
</html>
OutputSuccess
Important Notes

Astro supports different client directives like client:load, client:idle, and client:visible to control when Vue components load.

Make sure your Vue components are in the correct folder and have the .vue extension.

Use browser DevTools to check if Vue components load and work as expected.

Summary

Vue components add interactivity inside Astro pages.

Import Vue components and use client directives to control loading.

This helps combine fast static sites with dynamic features.