diff options
Diffstat (limited to 'examples/framework-vue/src')
| -rw-r--r-- | examples/framework-vue/src/components/Counter.vue | 32 | ||||
| -rw-r--r-- | examples/framework-vue/src/pages/index.astro | 33 |
2 files changed, 65 insertions, 0 deletions
diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue new file mode 100644 index 000000000..11f2bf1b5 --- /dev/null +++ b/examples/framework-vue/src/components/Counter.vue @@ -0,0 +1,32 @@ +<script setup lang="ts"> +import { ref } from 'vue'; + +const count = ref(0); +const add = () => count.value++; +const subtract = () => count.value--; +</script> + +<template> + <div class="counter"> + <button @click="subtract">-</button> + <pre>{{ count }}</pre> + <button @click="add">+</button> + </div> + <div class="counter-message"> + <slot /> + </div> +</template> + +<style> +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} + +.counter-message { + text-align: center; +} +</style> diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro new file mode 100644 index 000000000..bae5effe8 --- /dev/null +++ b/examples/framework-vue/src/pages/index.astro @@ -0,0 +1,33 @@ +--- +// Component Imports +import Counter from '../components/Counter.vue'; + +// 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" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter client:visible> + <h1>Hello, Vue!</h1> + </Counter> + </main> + </body> +</html> |