0
0
Astroframework~5 mins

Why Astro supports multiple frameworks

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Astro supports multiple frameworks so you can use your favorite tools together in one project. This helps you build websites faster and easier without being stuck to just one way.

You want to add a React button inside a mostly static site.
You like Vue for interactive parts but prefer Astro for fast page loading.
You need to mix Svelte components with Markdown content.
You want to try different frameworks without starting a new project.
You want to use the best features from several frameworks in one website.
Syntax
Astro
import ReactComponent from './Component.jsx';
import VueComponent from './Component.vue';

---

<ReactComponent />
<VueComponent />
Astro lets you import components from different frameworks in the same file.
You can use these components just like normal HTML tags inside your Astro pages.
Examples
Using a React component inside an Astro page.
Astro
---
import Button from './Button.jsx';
---

<Button />
Using a Svelte component inside an Astro page.
Astro
---
import Counter from './Counter.svelte';
---

<Counter />
Using a Vue component inside an Astro page.
Astro
---
import Alert from './Alert.vue';
---

<Alert />
Sample Program

This Astro page uses both a React button and a Vue message component together. It shows how Astro lets you mix frameworks easily.

Astro
---
import ReactButton from './ReactButton.jsx';
import VueMessage from './VueMessage.vue';
---

<html lang="en">
  <head>
    <title>Astro Multi-Framework Example</title>
  </head>
  <body>
    <h1>Welcome to Astro!</h1>
    <ReactButton />
    <VueMessage />
  </body>
</html>
OutputSuccess
Important Notes

Astro only loads the JavaScript needed for each component, helping pages load faster.

You can gradually add interactivity by mixing frameworks without rewriting your whole site.

Summary

Astro supports multiple frameworks to give you flexibility and speed.

You can use React, Vue, Svelte, and others together in one project.

This helps build modern websites with less hassle and better performance.