UI Integrations - Using React, Vue, and Svelte in Astro

So far, we have treated Astro as a static site generator. That is, we have used Astro components, routing, and Markdown to generate static content.

But the JavaScript ecosystem is vast. You probably already have a React component library you love, a complex calendar built in Vue, or simply prefer Svelte’s reactivity for certain interactions.

Do we have to rewrite everything to use Astro? Not at all. You can bring your own components from your favorite framework and Astro will render them.

The “Bring Your Own Framework” Concept

Astro tries not to reinvent the wheel of reactivity. Instead of creating its own complex client-side state management engine (like React’s Virtual DOM), Astro allows you to use the engines that already exist.

You can use React / Preact, Vue, Svelte, SolidJS, AlpineJS… almost any Framework you can think of. And most impressively: you can use them all at once on the same page.

Installing Adapters

For Astro to understand a React or Vue component, we need to install its corresponding adapter.

As we saw in the previous article with Tailwind, we will use the astro add command.

npx astro add react

npx astro add vue
# or
npx astro add svelte

Once finished, if we look at our astro.config.mjs, we will see something like this:

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

export default defineConfig({
  // We can have multiple integrations at once!
  integrations: [tailwind(), react()],
});

Creating Our First Framework Component

Let’s create a classic component: a Counter in React (boring as it is, but it’s the “hello world” of reactivity).

We’ll create it in the src/components/ folder, but this time with the .jsx extension (or .tsx if you use TypeScript).

import { useState } from 'react';

export default function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div className="p-4 border rounded bg-white shadow">
      <p className="text-xl mb-2">Cuenta actual: {cuenta}</p>
      <button 
        className="bg-blue-500 text-white px-4 py-2 rounded"
        onClick={() => setCuenta(cuenta + 1)}
      >
        Sumar +1
      </button>
    </div>
  );
}

Rendering the Component in Astro

Now we go back to one of our pages, for example src/pages/index.astro, and import the component.

---
import Layout from '../layouts/Layout.astro';

// We import the React component just like an Astro one
import Contador from '../components/Contador.tsx';
---

<Layout title="Probando React">
  <h1>Testing Integrations</h1>
  
  <p>Below you will see a React component:</p>

  <Contador />

</Layout>

The “Trick” of Static Rendering

If you save the file and go to the browser, you will see the counter. You will see the blue button. But if you click the button, nothing will happen!

Is it broken? Did we configure React wrong? No. Welcome to Astro’s philosophy.

That is, what is happening is:

This is “Zero JS by default”. Astro assumes that, unless you tell it otherwise, you only want to use React as a templating engine to generate nice HTML, not for interactivity.

<script setup>
  defineProps(['mensaje'])
</script>

<template>
  <div class="aviso">
    ¡Vue says: {{ mensaje }}!
  </div>
</template>

<style scoped>
  .aviso { color: green; font-weight: bold; }
</style>

---
import Contador from '../components/Contador.tsx';
import Aviso from '../components/Aviso.vue';
---

<Contador />
<Aviso mensaje="Hello from the other side" />

How Do I Make the Button Work?

Now you might be wondering:

Wonderful static HTML, Luis, but I want the button to add

Ok, ok. 👍. For the component to “come alive” in the browser and be interactive, we need to explicitly tell Astro to load the JavaScript.

Astro uses a system of Hydration Directives (client:*) to control this behavior with surgical precision.

But this is such an important topic that it has its own article. In the next installment, we will see how to “awaken” our Islands of interactivity.