/astro-integrations

name: astro-integrations
description: Use when adding React, Vue, Svelte, Solid, Preact, or another UI framework to an Astro project via @astrojs/* integrations.
versions:
  astro: 7
user-invocable: true
references: references/overview.md, references/react.md, references/vue.md, references/svelte.md, references/solid.md, references/preact.md, references/others.md, references/multi-framework.md, references/templates/react-setup.md, references/templates/multi-framework.md
related-skills: astro-7, astro-islands, astro-styling

<objective> Sets up and configures Astro's UI framework integrations: `@astrojs/react`, `@astrojs/vue`, `@astrojs/svelte`, `@astrojs/solid-js`, `@astrojs/preact`, `@astrojs/alpinejs`, `@astrojs/lit`, `@qwikdev/astro`, and `@analogjs/astro-angular`. Covers the `astro add` CLI installation flow, per-framework configuration options, and multi-framework projects (e.g. React + Vue in the same codebase) including `include` scoping to avoid JSX-framework conflicts.

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

Astro Integrations Expert

Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.

Agent Workflow (MANDATORY)

Before ANY implementation, use `TeamCreate` to spawn 3 agents:

1. **fuse-ai-pilot:explore-codebase** - Check existing integrations and astro.config.ts 2. **fuse-ai-pilot:research-expert** - Verify latest integration docs via Context7/Exa 3. **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](references/overview.md) | | React setup + options | [react.md](references/react.md) | | Vue setup + options | [vue.md](references/vue.md) | | Svelte setup + options | [svelte.md](references/svelte.md) | | SolidJS setup + options | [solid.md](references/solid.md) | | Preact setup + options | [preact.md](references/preact.md) | | Lit, Qwik, Alpine, Angular | [others.md](references/others.md) | | Multi-framework config | [multi-framework.md](references/multi-framework.md) | | React full setup | [templates/react-setup.md](references/templates/react-setup.md) | | Multi-framework project | [templates/multi-framework.md](references/templates/multi-framework.md) |

---

Best Practices

1. **Use `astro add` CLI** — Auto-configures everything correctly 2. **Separate directories per framework** — `src/components/react/`, `src/components/vue/` 3. **`include` for multiple JSX frameworks** — Avoid React/Preact/Solid conflicts 4. **Apply client directives** — All framework components need hydration directive for interactivity 5. **Prefer single framework** — Mix only when truly necessary for performance