Astro + React + Vue Counter Demo is a minimal Boilerplate starter that shows how to render React and Vue components together on the same Astro page while passing a shared variable into both.
What is Astro + React + Vue Counter Demo?
This is a small demo project for the Astro framework. It takes two different frontend libraries, React and Vue, and mounts each as a counter component within a single Astro page. A single variable is passed from an Astro frontmatter section into both components, illustrating how Astro can coordinate multiple framework islands.
The project runs on Node.js via npm. The repository provides three standard commands: npm install installs dependencies, npm run start launches a local development server at localhost:3000, and npm run build compiles a production-ready static site into the ./dist/ folder. The demo is hosted on Netlify, and the repository metadata lists topics including astro, react, starter, vercel, and vue. There is no stated maintainer or license information in the visible content.
Key Features
- Combined React and Vue mounting — A single Astro page renders both a React component and a Vue component as independent islands, with no client-side framework conflict.
- Shared variable passing — A value defined in Astro's frontmatter is passed into each framework component, demonstrating cross-framework data flow in Astro.
- Counter interaction — Each component is a simple counter, allowing users to click and see the state update in both React and Vue implementations.
- Local development server —
npm run startserves the project atlocalhost:3000, with a live preview of the Astro page. - Static production build —
npm run buildoutputs a fully static site to./dist/, ready for deployment to any host such as Netlify or Vercel (both listed as repository topics). - Minimal starter footprint — The project is intentionally tiny, making it easier to inspect how Astro, React, and Vue integrate without a large codebase.
Who is this template for?
- Astro developers exploring multi-framework support — Those who want a concrete example of how to mount React and Vue components on the same page and pass props into both.
- Frontend developers learning Astro — People who are new to Astro and need a small reference project to see how islands hydration works with two familiar libraries.
- Starter users evaluating framework combinations — Developers who want a base to build a project that mixes React and Vue, such as migrating a component library from one framework to another.
What can you do with Astro + React + Vue Counter Demo?
- Prototype an Astro island architecture — Use the demo as a reference to structure a real Astro app that combines React and Vue components with data from Astro frontmatter.
- Compare state handling — Study how each framework manages the same counter state and how Astro coordinates the separate client bundles.
- Deploy a static site — Create your own version, then run
npm run buildand host the resulting./dist/folder on any static hosting service.
