AstroHow-ToBeginner · 3 min read

How to Mix Frameworks in Astro: Simple Guide

In Astro, you can mix frameworks by importing components from different frameworks like React, Vue, or Svelte directly into your Astro files. Use the --- frontmatter to import and then include these components in your template to combine them seamlessly.

📐

Syntax

Astro lets you import components from different frameworks inside the frontmatter section marked by ---. Then you use those components as custom tags in your template.

Example parts:

import ReactComponent from './Component.jsx'; - imports a React component.
import VueComponent from './Component.vue'; - imports a Vue component.
Use the components as HTML-like tags: <ReactComponent />, <VueComponent />.

astro

---
import ReactComponent from './ReactComponent.jsx';
import VueComponent from './VueComponent.vue';
---

<html>
  <body>
    <ReactComponent />
    <VueComponent />
  </body>
</html>

💻

Example

This example shows an Astro page mixing React and Vue components. It imports each component in the frontmatter and uses them in the template. When rendered, both components appear on the page.

astro

---
import CounterReact from '../components/CounterReact.jsx';
import CounterVue from '../components/CounterVue.vue';
---

<html lang="en">
  <head>
    <title>Mix Frameworks in Astro</title>
  </head>
  <body>
    <h1>React Counter</h1>
    <CounterReact />
    <h1>Vue Counter</h1>
    <CounterVue />
  </body>
</html>

Output

<h1>React Counter</h1> <button>Count: 0</button> <h1>Vue Counter</h1> <button>Count: 0</button>

⚠️

Common Pitfalls

Common mistakes when mixing frameworks in Astro include:

Not installing the required framework integrations (e.g., @astrojs/react, @astrojs/vue).
Forgetting to add the framework adapter in astro.config.mjs.
Trying to use framework-specific features outside their components.
Not wrapping components properly if they require client-side hydration.

Always check that your components are hydrated with directives like client:load or client:idle if they need interactivity.

astro

---
import ReactComponent from './Component.jsx';
---

<html>
  <body>
    <!-- Wrong: no hydration directive, React component won't be interactive -->
    <ReactComponent />

    <!-- Right: add client:load for hydration -->
    <ReactComponent client:load />
  </body>
</html>

📊

Quick Reference

Step	Description
Install integrations	Run npm install for needed frameworks and add them in astro.config.mjs
Import components	Use frontmatter `import` to bring in React, Vue, Svelte components
Use components	Place imported components as tags in your Astro template
Add hydration	Use directives like `client:load` to enable interactivity
Build & run	Astro compiles and bundles all frameworks together

✅

Key Takeaways

Astro supports mixing frameworks by importing components in frontmatter and using them as tags.

Always install and configure the required framework integrations in your Astro project.

Use hydration directives like client:load to enable interactive components.

You can combine React, Vue, Svelte, and others seamlessly in one Astro page.

Check your build config to ensure all frameworks are properly bundled.