UI Framework Integrations

Add support for React, Vue, Svelte, and other UI frameworks in your Astro project.

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

Automatic

npx astro add react

Manual

Install the package:

npm install @astrojs/react

Install peer dependencies:

npm install react react-dom @types/react @types/react-dom

Add to your config:

astro.config.mjs

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

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

Update tsconfig.json:

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>
  );
}

src/pages/index.astro

---
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:

astro.config.mjs

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

Automatic

npx astro add vue

Manual

Install the package:

npm install @astrojs/vue

Install peer dependencies:

npm install vue

Add to your config:

astro.config.mjs

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>

src/pages/index.astro

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

<Counter client:load />

Configuration Options

App Entrypoint

Extend the Vue app instance to add plugins:

astro.config.mjs

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

export default defineConfig({
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});

src/pages/_app.ts

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:

astro.config.mjs

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

Automatic

npx astro add svelte

Manual

Install the package:

npm install @astrojs/svelte

Install peer dependencies:

npm install svelte typescript

Add to your config:

astro.config.mjs

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

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

Create Svelte config:

svelte.config.js

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>

src/pages/index.astro

---
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 load
• client:idle - Hydrate when the browser is idle
• client:visible - Hydrate when the component enters the viewport
• client:media - Hydrate when a media query matches
• client: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:

src/pages/index.astro

---
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 />