update: homepage

src/App.vue

@@ -15,11 +15,13 @@ router.afterEach(() => {
 
 <template>
   <Navbar />
-  <RouterView v-slot="{ Component }">
-    <KeepAlive>
-      <component :is="Component" v-if="$route.meta.keepAlive" />
-    </KeepAlive>
-    <component :is="Component" v-if="!$route.meta.keepAlive" />
-  </RouterView>
-  <!-- <Footer :visitCount="visitCount" /> -->
+  <div style="flex: 1;">
+    <RouterView v-slot="{ Component }">
+      <KeepAlive>
+        <component :is="Component" v-if="$route.meta.keepAlive" />
+      </KeepAlive>
+      <component :is="Component" v-if="!$route.meta.keepAlive" />
+    </RouterView>
+  </div>
+  <Footer :visitCount="visitCount" />
 </template>

src/components/Footer.vue

@@ -3,7 +3,7 @@ defineProps(['visitCount']);
 </script>
 
 <template>
-  <div class="ts-content is-center-aligned is-vertically-very-padded">
+  <div class="ts-content is-center-aligned is-vertically-padded">
     <div class="ts-container">
       <div class="ts-text is-secondary">Total Visitor: {{ visitCount }}</div>
     </div>

src/style.css

@@ -0,0 +1,8 @@
+html, body, #app {
+  height: 100%;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+}

src/views/HomeView.vue

@@ -1,5 +1,38 @@
+<script setup>
+</script>
+
 <template>
-  <div class="ts-container">
-    Home
+  <div class="ts-container center has-full-height">
+    <div>
+      <a href="https://vite.dev" target="_blank">
+        <img src="/vite.svg" class="logo" alt="Vite logo" />
+      </a>
+      <a href="https://vuejs.org/" target="_blank">
+        <img src="/vue.svg" class="logo vue" alt="Vue logo" />
+      </a>
+    </div>
+    <div class="ts-header is-huge is-center-aligned">Vite + Vue</div>
   </div>
-</template>
+</template>
+
+<style scoped>
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 128px;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>