Cross-Framework State Sharing

Watch React, Vue, and Svelte components communicate seamlessly through shared state. Add items with React, manage them with Vue, and checkout with Svelte.

★

How It Works

All three frameworks share the same Nano Stores cart state. When React adds an item, Vue and Svelte see it immediately. This proves Astro's multi-framework architecture isn't just about coexistence—it's about collaboration.

Products

React Components
👕React

Astro T-Shirt

Comfy cotton tee with Astro logo

$29.99
🚀React

Rocket Mug

Start your day with rocket fuel

$14.99
🧢React

Islands Cap

Partial hydration, full style

$24.99
🧥React

Zero JS Hoodie

Ships with zero JavaScript

$49.99
🧦React

Component Socks

Keep your feet framework-agnostic

$12.99
🍶React

Build Time Bottle

Hydration when you need it

$19.99

Shopping Cart

Vue
0 items

Your cart is empty

Add items using the React cards above

Total:$0.00

Checkout

Svelte
Items: 0
Subtotal: $0.00
Shipping: Free
Total: $0.00

This Svelte component reads cart state set by React and Vue

The Magic Behind It

Shared Store (cart.ts) typescript 
import { atom, computed } from 'nanostores';

export const cartItems = atom<CartItem[]>([]);

export const cartTotal = computed(cartItems, (items) =>
  items.reduce((sum, i) => sum + i.price * i.quantity, 0)
);

export function addToCart(item: CartItem) {
  cartItems.set([...cartItems.get(), item]);
}
React Usage tsx 
import { addToCart } from '../stores/cart';

function ProductCard({ product }) {
  const handleAdd = () => {
    addToCart({
      id: product.id,
      name: product.name,
      price: product.price,
      framework: 'react',
    });
  };

  return <button onClick={handleAdd}>Add</button>;
}
Vue Usage vue 
<script setup>
import { useStore } from '@nanostores/vue';
import { cartItems, cartTotal } from '../stores/cart';

const items = useStore(cartItems);
const total = useStore(cartTotal);
</script>

<template>
  <div v-for="item in items">{{ item.name }}</div>
  <span>Total: {{ total }}</span>
</template>
Svelte Usage svelte 
<script>
  import { cartItems, clearCart } from '../stores/cart';

  let items = $state([]);

  $effect(() => {
    return cartItems.subscribe(v => items = v);
  });
</script>

<button onclick={() => clearCart()}>
  Clear {items.length} items
</button>

Why This Matters

Team Flexibility

Different teams can use their preferred framework. A React team's components work alongside a Vue team's components.

Gradual Migration

Migrate from one framework to another incrementally. No big bang rewrites— just replace components one at a time.

Best Tool for the Job

Use React for complex forms, Vue for dashboards, Svelte for animations. Pick the right tool for each component.