Astro + React + Vue Counter Demo is a minimal boilerplate that demonstrates how to combine React and Vue components inside a single Astro project by passing a shared variable to both.
What is the Astro + React + Vue Counter Demo?
The Astro + React + Vue Counter Demo is a minimal boilerplate project on GitHub with 52 stars that shows the core Astro feature of multi-framework islands: a React counter and a Vue counter rendered on the same page, both receiving the same variable passed from an Astro component. It runs on the Astro build system and produces a static site in the ./dist/ folder. The repository does not list an author or company, appearing as an unofficial demo.
What makes this demo stand out?
The Astro + React + Vue Counter Demo is built around a single counter component duplicated in React and Vue, the smallest possible example that shows Astro's cross-framework data passing.
- Astro island architecture — Combines React and Vue components on a single page to illustrate Astro's ability to load multiple UI frameworks without shipping both runtimes to every visitor.
- Shared variable passing — Demonstrates how data can be passed from a parent Astro component to both a React and a Vue child component.
- Minimal counter example — The entire functional code is a simple counter, keeping the demo focused on framework interop rather than features.
- Three-command workflow —
npm install,npm run start, andnpm run buildare the only actions needed; the dev server runs atlocalhost:3000. - Netlify deployment ready — The repository includes a Netlify deploy-status badge, indicating the demo is configured to deploy to Netlify.
- Small scope — With just a handful of files, the project is easy to read in one sitting.
Who should use this demo?
The Astro + React + Vue Counter Demo is aimed at developers who want to see Astro's island architecture in a tiny codebase.
- Astro beginners — Learn how the islands architecture works by seeing two frameworks rendered side by side.
- React developers — See how a React component can be embedded in Astro and receive props.
- Vue developers — See how a Vue component can coexist with React in the same Astro page.
- Architects evaluating Astro — Use the counter demo to test whether Astro meets their need for gradual migration of a React or Vue codebase.
What can you do with it?
The Astro + React + Vue Counter Demo works best as a learning tool and a testbed, since it contains only a counter example.
- Learn multi-framework integration: Tinker with the counter code to understand how Astro passes variables to components written in different frameworks.
- Prototype an island pattern: Use the demo as a starting point for a larger project that mixes React and Vue components, such as a widget-heavy dashboard.
- Test a migration path: For a team slowly moving from one framework to another, this demo proves that both can live on the same page.
How does the demo work?
After cloning the repository, run npm install to fetch dependencies, then npm run start to launch the dev server at localhost:3000. To create a production build, run npm run build, which outputs the static site into ./dist/.
FAQ
Is this demo free?
Yes, the demo is a public GitHub repository, though the content provided does not state a specific license.
How do I install and run it?
Run npm install in the project root, then npm run start. The dev server will be available at localhost:3000.
What does the demo show?
It shows a React counter and a Vue counter rendered on the same Astro page, with a variable passed from Astro to both components.
Can I deploy it?
The repository includes a Netlify deploy-status badge, so it is set up to deploy to Netlify, but no deployment instructions are given.
