diff options
| author |  github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
| 2025-06-05 14:25:23 +0000 |
|---|---|---|
| committer | github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
| 2025-06-05 14:25:23 +0000 |
| commit | e586d7d704d475afe3373a1de6ae20d504f79d6d (patch) | |
| tree | 7e3fa24807cebd48a86bd40f866d792181191ee9 /examples/framework-multiple/src/pages/index.astro | |
| download | astro-e586d7d704d475afe3373a1de6ae20d504f79d6d.tar.gz astro-e586d7d704d475afe3373a1de6ae20d504f79d6d.tar.zst astro-e586d7d704d475afe3373a1de6ae20d504f79d6d.zip | |
Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest
Diffstat (limited to 'examples/framework-multiple/src/pages/index.astro')
| -rw-r--r-- | examples/framework-multiple/src/pages/index.astro | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro new file mode 100644 index 000000000..d420111a2 --- /dev/null +++ b/examples/framework-multiple/src/pages/index.astro @@ -0,0 +1,48 @@ +--- +// Style Imports +import '../styles/global.css'; + +// Component Imports +// For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported! +import * as react from '../components/react/ReactCounter'; +import { PreactCounter } from '../components/preact/PreactCounter'; +import SolidCounter from '../components/solid/SolidCounter'; + +import VueCounter from '../components/vue/VueCounter.vue'; +import SvelteCounter from '../components/svelte/SvelteCounter.svelte'; + +// Full Astro Component Syntax: +// https://docs.astro.build/basics/astro-components/ +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + </head> + <body> + <main> + <react.Counter client:visible> + <h1>Hello from React!</h1> + </react.Counter> + + <PreactCounter client:visible> + <h1>Hello from Preact!</h1> + </PreactCounter> + + <SolidCounter client:visible> + <h1>Hello from Solid!</h1> + </SolidCounter> + + <VueCounter client:visible> + <h1>Hello from Vue!</h1> + </VueCounter> + + <SvelteCounter client:visible> + <h1>Hello from Svelte!</h1> + </SvelteCounter> + </main> + </body> +</html> |