patternjavascriptastroModerate
Astro component framework integration — using React, Vue, Svelte together
Viewed 0 times
Astro 2.0+
astro integrationsreact integrationvue integrationsvelte integrationmulti-frameworknanostores
Error Messages
Unable to render: no renderer found for componentError: Cannot import .astro component inside React componentProblem
Adding a UI framework to Astro (React, Vue, Svelte) and encountering errors because the integration is not installed, or mixing frameworks incorrectly.
Solution
Install integrations and configure them in astro.config.mjs:
# Install integrations
npx astro add react vue svelte
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [react(), vue(), svelte()],
});
// Now use any framework in .astro files
---
import ReactCounter from './Counter.jsx';
import VueAlert from './Alert.vue';
import SvelteSlider from './Slider.svelte';
---
<ReactCounter client:load />
<VueAlert message="Hello" client:visible />
<SvelteSlider client:idle />
// Passing complex props
---
const items = [{ id: 1, name: 'Item 1' }];
---
<ReactList items={items} client:load />
<!-- Astro serializes items as JSON automatically -->
# Install integrations
npx astro add react vue svelte
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [react(), vue(), svelte()],
});
// Now use any framework in .astro files
---
import ReactCounter from './Counter.jsx';
import VueAlert from './Alert.vue';
import SvelteSlider from './Slider.svelte';
---
<ReactCounter client:load />
<VueAlert message="Hello" client:visible />
<SvelteSlider client:idle />
// Passing complex props
---
const items = [{ id: 1, name: 'Item 1' }];
---
<ReactList items={items} client:load />
<!-- Astro serializes items as JSON automatically -->
Why
Each Astro integration registers a renderer for that framework's components. Multiple frameworks can coexist because each island is independently hydrated — they don't share a runtime. Props are serialized between server and client automatically.
Gotchas
- Framework components cannot import .astro components — only Astro can import both
- Props must be JSON-serializable — no functions, Dates, or class instances unless handled by the framework
- Each framework adds its runtime to the client bundle for that island — don't use all three if only one is needed
- Sharing state across framework islands requires a framework-agnostic store like nanostores
Code Snippets
Cross-framework state with nanostores
// Cross-island state with nanostores
// src/stores/cart.ts
import { atom, computed } from 'nanostores';
export const cartItems = atom([]);
export const cartTotal = computed(cartItems, items =>
items.reduce((sum, i) => sum + i.price, 0)
);
// Use in React island
import { useStore } from '@nanostores/react';
const items = useStore(cartItems);
// Use in Vue island
import { useStore } from '@nanostores/vue';
const items = useStore(cartItems);Context
When using multiple UI frameworks together in an Astro project
Revisions (0)
No revisions yet.