Within the earlier article, we checked out including React to an Astro 1.0 venture.
At the moment we’ll have a look at how we will run a number of frameworks concurrently in Astro.
It is a actual superpower as we’re free to combine and match frameworks.
Let’s take the earlier article as our start line.
Get the department from GitHub
You may technically select any framework. I will be utilizing Vue for this case.
Including a second framework to Astro
The very first thing we’ll must do is set up the brand new framework.
For Vue, we will run the next command.
npm run astro add vue
As soon as accomplished, you must see React and Vue setup in your astro.config.mjs file.
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
export default defineConfig({
integrations: [react(), vue()],
});
Now we will add a brand new Vue part to our src/elements listing.
I am going to name this file Vue.vue (tremendous unique).
<script>
export default {
information() {
return {
rely: 0,
identify: 'Vue',
};
},
};
</script>
<template>
<button @click on="count--">-</button>
<pre>{{ rely }}</pre>
<button @click on="rely++">+</button>
<p>I am a {{ identify }} part</p>
</template>
It is a primary counter we made for the React part. After which, we response with what language this particular part is in.
Now we will try to add this part to our index.astro web page.
---
import React from '../elements/React.jsx';
import Vue from '../elements/Vue.vue';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<hyperlink rel="icon" kind="picture/svg+xml" href="/favicon.svg" />
<meta identify="viewport" content material="width=device-width" />
<meta identify="generator" content material={Astro.generator} />
<title>Astro</title>
</head>
<physique>
<React shopper:load />
<hr />
<Vue shopper:load />
</physique>
</html>
As you’ll be able to see, we determined to hydrate this on shopper:load so the counter will work.
Learn extra about hydration (Scroll down a bit of bit).
If we now run our utility, we should always see each elements lively and dealing.
You can even discover at this time’s code on this GitHub repo.
Thanks for studying, and let’s join!
Thanks for studying my weblog. Be at liberty to subscribe to my electronic mail e-newsletter and join on Fb or Twitter
