summaryrefslogtreecommitdiff
path: root/examples/framework-vue
diff options
context:
space:
mode:
authorGravatar Jonathan Neal <jonathantneal@hotmail.com> 2021-12-22 16:11:05 -0500
committerGravatar GitHub <noreply@github.com> 2021-12-22 16:11:05 -0500
commit6ddd7678ffb6598ae6e263706813cb5e94535f02 (patch)
treed4b45f7590b59c3574bd6593b17d8066f71007c6 /examples/framework-vue
parent305ce4182fbe89abcfb88008ddce178bd8863b6a (diff)
downloadastro-6ddd7678ffb6598ae6e263706813cb5e94535f02.tar.gz
astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.tar.zst
astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.zip
Use accessible indentation (#2253)
Diffstat (limited to 'examples/framework-vue')
-rw-r--r--examples/framework-vue/astro.config.mjs4
-rw-r--r--examples/framework-vue/src/components/Counter.vue48
-rw-r--r--examples/framework-vue/src/pages/index.astro48
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>