Documentation Index Fetch the complete documentation index at: https://mintlify.com/withastro/docs/llms.txt
Use this file to discover all available pages before exploring further.
Astro supports multiple UI frameworks including React, Vue, Svelte, Solid, Preact, and more. Framework integrations enable rendering and client-side hydration for your components.
Available Framework Integrations
React The most popular JavaScript library for building user interfaces
Vue Progressive JavaScript framework for building web interfaces
Svelte Compile-time framework for building web applications
Solid Declarative JavaScript library for building user interfaces
React The @astrojs/react integration enables rendering and client-side hydration for your React components.
Installation Install the package: npm install @astrojs/react
Install peer dependencies: npm install react react-dom @types/react @types/react-dom
Add to your config: import { defineConfig } from 'astro/config' ; import react from '@astrojs/react' ; export default defineConfig ({ integrations: [ react ()] , }) ;
Update tsconfig.json: { "compilerOptions" : { "jsx" : "react-jsx" , "jsxImportSource" : "react" } }
Usage Example src/components/Counter.jsx
import { useState } from 'react' ; export default function Counter () { const [ count , setCount ] = useState ( 0 ); return ( < button onClick = { () => setCount ( count + 1 ) } > Count: { count } </ button > ); }
--- import Counter from '../components/Counter.jsx' ; --- < Counter client:load />
Configuration Options Multiple JSX Frameworks When using multiple JSX frameworks, specify which files belong to which framework:
import { defineConfig } from 'astro/config' ; import react from '@astrojs/react' ; import preact from '@astrojs/preact' ; export default defineConfig ({ integrations: [ react ({ include: [ '**/react/*' ], }), preact ({ include: [ '**/preact/*' ], }), ] , }) ;
Vue The @astrojs/vue integration enables rendering and client-side hydration for your Vue 3 components.
Installation Install the package: Install peer dependencies: Add to your config: import { defineConfig } from 'astro/config' ; import vue from '@astrojs/vue' ; export default defineConfig ({ integrations: [ vue ()] , }) ;
Usage Example src/components/Counter.vue
< script setup > import { ref } from 'vue' ; const count = ref ( 0 ); </ script > < template > < button @ click = " count ++ " > Count: {{ count }} </ button > </ template >
--- import Counter from '../components/Counter.vue' ; --- < Counter client:load />
Configuration Options App Entrypoint Extend the Vue app instance to add plugins:
import { defineConfig } from 'astro/config' ; import vue from '@astrojs/vue' ; export default defineConfig ({ integrations: [ vue ({ appEntrypoint: '/src/pages/_app' })] , }) ;
import type { App } from 'vue' ; import i18nPlugin from 'my-vue-i18n-plugin' ; export default ( app : App ) => { app . use ( i18nPlugin ); };
Vue JSX Enable Vue JSX support:
import { defineConfig } from 'astro/config' ; import vue from '@astrojs/vue' ; export default defineConfig ({ integrations: [ vue ({ jsx: true })] , }) ;
Svelte The @astrojs/svelte integration enables rendering and client-side hydration for your Svelte 5 components.
Installation Install the package: npm install @astrojs/svelte
Install peer dependencies: npm install svelte typescript
Add to your config: import { defineConfig } from 'astro/config' ; import svelte from '@astrojs/svelte' ; export default defineConfig ({ integrations: [ svelte ()] , }) ;
Create Svelte config: import { vitePreprocess } from '@astrojs/svelte' ; export default { preprocess: vitePreprocess () , }
Usage Example src/components/Counter.svelte
< script > let count = 0 ; </ script > < button on : click = { () => count ++ } > Count: { count } </ button >
--- import Counter from '../components/Counter.svelte' ; --- < Counter client:load />
Client Directives All framework components support client directives for hydration:
client:load - Hydrate immediately on page loadclient:idle - Hydrate when the browser is idleclient:visible - Hydrate when the component enters the viewportclient:media - Hydrate when a media query matchesclient:only - Skip server rendering, only render on client
< ReactComponent client:load /> < VueComponent client:idle /> < SvelteComponent client:visible />
Mixing Frameworks You can use multiple frameworks in the same project and even on the same page:
--- import ReactCounter from '../components/ReactCounter.jsx' ; import VueCounter from '../components/VueCounter.vue' ; import SvelteCounter from '../components/SvelteCounter.svelte' ; --- < ReactCounter client:load /> < VueCounter client:load /> < SvelteCounter client:load />