Introduction

In modern web development, developers often face the challenge of choosing the right framework or library to build their web applications. Each framework—whether it’s React, Vue, or Angular—has its strengths. What if you could use all three in a single project without unnecessary complexity? Enter Astro, a modern static site generator (SSG) that allows seamless integration of various front-end frameworks like React, Vue, and Angular in one cohesive environment.

This blog will introduce you to Astro, its capabilities, and how you can implement and integrate React, Vue, and Angular components within it.

---

What is Astro?

Astro is a next-generation static site generator designed for performance and flexibility. Unlike traditional frameworks that often bundle unnecessary JavaScript to the client, Astro adopts an island architecture. This means that only the interactive components of a site are hydrated, while static content is served as pure HTML, making websites faster by reducing JavaScript payload.

Key Features of Astro:

1. Framework Agnostic: Astro allows you to use popular JavaScript frameworks and libraries like React, Vue, Svelte, Angular, and more.
2. Partial Hydration: Only the necessary JavaScript for interactive components is sent to the browser.
3. Built-in SSR: Astro supports Server-Side Rendering (SSR) and Static Site Generation (SSG).
4. File-based Routing: Simple and intuitive routing structure.
5. SEO Friendly: By delivering minimal JavaScript and static HTML, Astro ensures high performance and better search engine optimization (SEO).

---

How Astro Allows Different Frameworks to Coexist

Astro achieves its framework-agnostic capabilities by treating each component as an island of interactivity. These islands can be built using different front-end frameworks, and Astro orchestrates the rendering of each island independently.

Under the hood, Astro compiles components written in React, Vue, or Angular into optimized static HTML and then hydrates them when necessary. The magic lies in Astro’s component system and astro.config.mjs setup, where you define support for different frameworks.

---

Implementing React, Vue, and Angular in Astro

Let’s walk through a simple example of building an Astro project that includes components from React, Vue, and Angular.

Step 1: Set Up a New Astro Project

First, create a new Astro project.

# Create a new Astro project<br>npm create astro@latest my-astro-project<br><br># Navigate to the project directory<br>cd my-astro-project<br><br># Install project dependencies<br>npm install<br>

Step 2: Install the Framework Integrations

Astro provides official integrations for React, Vue, and Angular. Install them using the following commands:

# Install React integration
npm install @astrojs/react

# Install Vue integration
npm install @astrojs/vue

# Install Angular integration
npm install @astrojs/angular

Step 3: Configure Astro to Use the Integrations

Open the astro.config.mjs file and add the integrations:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
import angular from '@astrojs/angular';

export default defineConfig({
  integrations: [
    react(),
    vue(),
    angular(),
  ],
});

Step 4: Create Components in Different Frameworks

Now, let’s create a simple component for each framework.

React Component

Create a new file src/components/ReactCounter.jsx:

import { useState } from 'react';

export default function ReactCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>React Counter</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Vue Component

Create a new file src/components/VueCounter.vue:

<template>
  <div>
    <h2>Vue Counter</h2>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Angular Component

Create a new Angular component in src/components/angular-counter:

1. Create the folder angular-counter and add the following files:

angular-counter.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'angular-counter',
  templateUrl: './angular-counter.component.html',
  styleUrls: ['./angular-counter.component.css']
})
export class AngularCounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

angular-counter.component.html:

<div>
  <h2>Angular Counter</h2>
  <p>Count: {{ count }}</p>
  <button (click)="increment()">Increment</button>
</div>

angular-counter.component.css: (Optional)

button {
  cursor: pointer;
  padding: 0.5em;
}

2. Update the angular.json or configure it for component registration in your Astro project.

Step 5: Use the Components in an Astro Page

Now, let’s use these components in an Astro page.

Create a new file src/pages/index.astro:

---
import ReactCounter from '../components/ReactCounter.jsx';
import VueCounter from '../components/VueCounter.vue';
import { AngularCounterComponent } from '../components/angular-counter/angular-counter.component';
---

<html>
  <head>
    <title>Astro with React, Vue, and Angular</title>
  </head>
  <body>
    <h1>Welcome to Astro with Multiple Frameworks</h1>

    <!-- React Component -->
    <ReactCounter client:visible />

    <!-- Vue Component -->
    <VueCounter client:visible />

    <!-- Angular Component -->
    <AngularCounterComponent client:visible />
  </body>
</html>

Step 6: Run the Project

Finally, run the project using the development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You will see the React, Vue, and Angular components running on the same page!

---

Understanding the client:visible Directive

In the example, we used the client:visible directive to specify when the component should be hydrated. Astro provides several hydration strategies:

• client:load: Hydrates the component when the page loads.
• client:visible: Hydrates the component when it becomes visible in the viewport.
• client:idle: Hydrates when the browser is idle.

---

Conclusion

Astro offers a powerful and flexible environment for integrating multiple front-end frameworks like React, Vue, and Angular in a single project. Its island architecture ensures performance optimization by sending minimal JavaScript to the client, while still allowing the flexibility of using different frameworks based on project needs.

By following the steps outlined in this blog, you can build and deploy fast, interactive, and modern web applications that leverage the strengths of multiple frameworks in one cohesive project.

Happy coding! 🚀