├── .gitignore
├── .npmrc
├── .nvmrc
├── README.md
├── astro.config.mjs
├── netlify.toml
├── package-lock.json
├── package.json
├── public
├── assets
│ └── logo.svg
├── favicon.svg
├── robots.txt
└── style
│ ├── global.css
│ └── home.css
└── src
├── components
├── CounterReact.jsx
└── CounterVue.vue
└── pages
└── index.astro
/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist
3 |
4 | # dependencies
5 | node_modules/
6 | .snowpack/
7 |
8 | # logs
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 |
13 | # environment variables
14 | .env
15 | .env.production
16 |
17 | # macOS-specific files
18 | .DS_Store
19 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | ## force pnpm to hoist
2 | shamefully-hoist = true
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v14.15.1
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Astro + React + Vue Counter Demo
2 |
3 | [](https://app.netlify.com/sites/dreamy-heisenberg-535c2e/deploys)
4 |
5 | This is an incredibly small demo of using React and Vue together in an Astro project, with a variable passed in to both.
6 |
7 | ## Commands
8 |
9 | All commands are run from the root of the project, from a terminal:
10 |
11 | | Command | Action |
12 | | :-------------- | :------------------------------------------ |
13 | | `npm install` | Installs dependencies |
14 | | `npm run start` | Starts local dev server at `localhost:3000` |
15 | | `npm run build` | Build your production site to `./dist/` |
16 |
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project.
3 | // pages: './src/pages', // Path to Astro components, pages, and data
4 | // dist: './dist', // When running `astro build`, path to final static output
5 | // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
6 | buildOptions: {
7 | // site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
8 | // sitemap: true, // Generate sitemap (set to "false" to disable)
9 | },
10 | devOptions: {
11 | // port: 3000, // The port to run the dev server on.
12 | // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "npm run build"
3 | publish = "dist"
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@astrojs/starter-kit",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "astro dev",
7 | "build": "astro build"
8 | },
9 | "devDependencies": {
10 | "astro": "^0.14.0"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/public/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: /
3 |
--------------------------------------------------------------------------------
/public/style/global.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | }
5 |
6 | :root {
7 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
8 | font-size: 1rem;
9 | --user-font-scale: 1rem - 16px;
10 | font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
11 | }
12 |
13 | body {
14 | padding: 4rem 2rem;
15 | width: 100%;
16 | min-height: 100vh;
17 | display: grid;
18 | justify-content: center;
19 | background: #f9fafb;
20 | color: #111827;
21 | }
22 |
23 | @media (prefers-color-scheme: dark) {
24 | body {
25 | background: #111827;
26 | color: #fff;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/public/style/home.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
3 | --color-light: #F3F4F6;
4 | }
5 |
6 | @media (prefers-color-scheme: dark) {
7 | :root {
8 | --color-light: #1F2937;
9 | }
10 | }
11 |
12 | a {
13 | color: inherit;
14 | }
15 |
16 | header > div {
17 | font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
18 | }
19 |
20 | header > div {
21 | display: flex;
22 | flex-direction: column;
23 | align-items: center;
24 | }
25 |
26 | header h1 {
27 | font-size: 1em;
28 | font-weight: 500;
29 | }
30 | header img {
31 | width: 2em;
32 | height: 2.667em;
33 | }
34 |
35 | h2 {
36 | font-weight: 500;
37 | font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/CounterReact.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | export default function CounterReact({ demo }) {
4 | let [count, setCount] = useState(0);
5 |
6 | let add = () => {
7 | setCount(count + 1);
8 | };
9 |
10 | let subtract = () => {
11 | setCount(count - 1);
12 | };
13 |
14 | return (
15 |
16 | React Count: {count} {demo}
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/CounterVue.vue:
--------------------------------------------------------------------------------
1 |
2 | Vue Count: {{ count }} {{ demo }}
3 |
4 |
5 |
6 |
7 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import CounterReact from '../components/CounterReact.jsx';
3 | import CounterVue from '../components/CounterVue.vue';
4 |
5 | let variableExample = '<=== look';
6 | ---
7 |
8 |
9 |
10 |
11 |
12 |
13 | Astro
14 |
15 |
16 |
17 |
18 |
19 |
20 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
Welcome to Astro
35 |