AstroHow-ToBeginner · 3 min read

How to Use Vue with Astro: Simple Integration Guide

To use Vue with Astro, install the @astrojs/vue integration, add it to your astro.config.mjs, and then import Vue components inside your Astro files using --- frontmatter. This lets you render Vue components seamlessly alongside Astro content.

📐

Syntax

First, install the Vue integration package. Then, add it to your Astro config file. Inside your Astro component, import Vue components using the frontmatter script block. Use the imported Vue component as a regular component in your Astro template.

Installation: Adds Vue support to Astro.
Config: Enables Vue integration.
Import: Loads Vue components.
Usage: Renders Vue components in Astro.

bash and javascript

npm install @astrojs/vue

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  integrations: [vue()],
});

---
import MyVueComponent from '../components/MyVueComponent.vue';
---

<MyVueComponent />

💻

Example

This example shows a simple Astro page that uses a Vue component to display a greeting message. The Vue component is imported and rendered inside the Astro file.

vue and astro

// components/Greeting.vue
<template>
  <div>
    <h2>Hello from Vue!</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('Welcome to Astro with Vue integration.');
</script>

---
---
import Greeting from '../components/Greeting.vue';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Astro + Vue Example</title>
  </head>
  <body>
    <h1>Astro Page</h1>
    <Greeting />
  </body>
</html>

Output

<h1>Astro Page</h1> <div> <h2>Hello from Vue!</h2> <p>Welcome to Astro with Vue integration.</p> </div>

⚠️

Common Pitfalls

Some common mistakes when using Vue with Astro include:

Not installing or adding the @astrojs/vue integration in astro.config.mjs.
Forgetting to import Vue components in the frontmatter section of the Astro file.
Trying to use Vue component syntax directly in Astro without importing.
Not restarting the Astro dev server after adding the Vue integration.

Always ensure your Vue components have the .vue extension and are properly imported.

astro

/* Wrong: Using Vue component without import in Astro */
---
---
<Greeting /> <!-- This will cause an error because Greeting is not imported -->

/* Right: Import Vue component in frontmatter */
---
import Greeting from '../components/Greeting.vue';
---
<Greeting />

📊

Quick Reference

Summary tips for using Vue with Astro:

Install @astrojs/vue via npm.
Add vue() to integrations in astro.config.mjs.
Import Vue components in Astro frontmatter.
Use Vue components as JSX-like tags in Astro templates.
Restart dev server after config changes.

✅

Key Takeaways

Install and configure @astrojs/vue integration to enable Vue in Astro.

Import Vue components in the frontmatter section of Astro files before using them.

Use Vue components as normal tags inside Astro templates for seamless rendering.

Restart the Astro server after adding Vue integration to apply changes.

Ensure Vue components have the .vue extension and proper setup.