diff options
Diffstat (limited to 'examples/framework-vue')
| -rw-r--r-- | examples/framework-vue/astro.config.mjs | 4 | ||||
| -rw-r--r-- | examples/framework-vue/src/components/Counter.vue | 48 | ||||
| -rw-r--r-- | examples/framework-vue/src/pages/index.astro | 48 |
3 files changed, 50 insertions, 50 deletions
diff --git a/examples/framework-vue/astro.config.mjs b/examples/framework-vue/astro.config.mjs index c60760357..950355760 100644 --- a/examples/framework-vue/astro.config.mjs +++ b/examples/framework-vue/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Vue renderer to support Vue components. - renderers: ['@astrojs/renderer-vue'], + // Enable the Vue renderer to support Vue components. + renderers: ['@astrojs/renderer-vue'], }); diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue index 155717ea4..d5d5215f7 100644 --- a/examples/framework-vue/src/components/Counter.vue +++ b/examples/framework-vue/src/components/Counter.vue @@ -1,40 +1,40 @@ <template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="counter-message"> - <slot /> - </div> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div class="counter-message"> + <slot /> + </div> </template> <script> import { ref } from 'vue'; export default { - setup() { - const count = ref(0); - const add = () => (count.value = count.value + 1); - const subtract = () => (count.value = count.value - 1); + setup() { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); - return { - count, - add, - subtract, - }; - }, + return { + count, + add, + subtract, + }; + }, }; </script> <style> .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } </style> diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro index 449c3a614..98a667f77 100644 --- a/examples/framework-vue/src/pages/index.astro +++ b/examples/framework-vue/src/pages/index.astro @@ -1,32 +1,32 @@ --- // Component Imports -import Counter from '../components/Counter.vue' - +import Counter from '../components/Counter.vue'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <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> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <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> |