This skill is Astro-specific (the framework is embedded via astro.config.ts, not a standalone React/Vue/Svelte app). Does not cover hydration directives once a component is added (astro-islands) or component styling (astro-styling) — those are separate skills.
Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
- fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
- mcp__context7__query-docs - Get setup and configuration examples
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Adding React/Vue/Svelte components to an Astro site
- Migrating an existing framework app into Astro
- Using multiple frameworks in the same project
- Integrating web components (Lit) or signals-based frameworks
Supported Frameworks
| Integration | Package | Notes |
|---|---|---|
| React | @astrojs/react |
Requires react + react-dom |
| Vue | @astrojs/vue |
Requires vue |
| Svelte | @astrojs/svelte |
Requires svelte |
| SolidJS | @astrojs/solid-js |
Requires solid-js |
| Preact | @astrojs/preact |
Lightweight React alternative |
| AlpineJS | @astrojs/alpinejs |
Minimal JS sprinkles |
| Lit | @astrojs/lit |
Web components |
| Qwik | @qwikdev/astro |
Resumability |
| Angular | @analogjs/astro-angular |
Via AnalogJS |
Quick Setup
# Official integrations via CLI (recommended)
npx astro add react
npx astro add vue
npx astro add svelte
npx astro add solid-js
npx astro add preact
The CLI auto-installs packages and updates astro.config.ts.
Reference Guide
| Need | Reference |
|---|---|
| Architecture overview | overview.md |
| React setup + options | react.md |
| Vue setup + options | vue.md |
| Svelte setup + options | svelte.md |
| SolidJS setup + options | solid.md |
| Preact setup + options | preact.md |
| Lit, Qwik, Alpine, Angular | others.md |
| Multi-framework config | multi-framework.md |
| React full setup | templates/react-setup.md |
| Multi-framework project | templates/multi-framework.md |
Best Practices
- Use
astro addCLI — Auto-configures everything correctly - Separate directories per framework —
src/components/react/,src/components/vue/ includefor multiple JSX frameworks — Avoid React/Preact/Solid conflicts- Apply client directives — All framework components need hydration directive for interactivity
- Prefer single framework — Mix only when truly necessary for performance