feat: update UI

app.vue

@@ -1,6 +1,7 @@
 <template>
   <main class="py-20 px-10 text-center">
     <NuxtPage />
+    <Footer />
   </main>
 </template>
 

components/Counter.vue

@@ -3,15 +3,15 @@ const { count, inc, dec } = useCount()
 </script>
 
 <template>
-  <div m="y-3">
+  <div inline-flex m="y-3">
-    <button class="btn" @click="dec()">
+    <button btn class="!p-2" @click="dec()">
-      -
+      <div i-carbon-subtract></div>
     </button>
-    <div font="mono" w="15" inline-block>
+    <div font="mono" w="15" m-auto inline-block>
       {{ count }}
     </div>
-    <button class="btn" @click="inc()">
+    <button btn class="!p-2" @click="inc()">
-      +
+      <div i-carbon-add></div>
     </button>
   </div>
 </template>

components/Footer.vue

@@ -6,7 +6,8 @@
     justify-center
     gap-2
   >
-    <a i-carbon-campsite href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
+    <NuxtLink i-carbon-campsite to="/" />
+    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
     <DarkToggle />
   </div>
 </template>

components/InputEntry.vue

@@ -16,6 +16,7 @@ const go = () => {
     type="text"
     autocomplete="false"
     p="x-4 y-2"
+    m="t-5"
     w="250px"
     text="center"
     bg="transparent"

components/PageView.vue

@@ -3,7 +3,7 @@ const { data } = await useFetch('/api/pageview')
 </script>
 
 <template>
-  <div>
+  <div op50>
-    Page view: {{ data.pageview }}
+    Pageview: {{ data.pageview }}
   </div>
 </template>

nuxt.config.ts

@@ -2,6 +2,9 @@ import { defineNuxtConfig } from 'nuxt3'
 import { presetAttributify, presetUno, presetIcons } from 'unocss'
 
 export default defineNuxtConfig({
+  meta: {
+    title: 'Vitesse Nuxt 3',
+  },
   buildModules: [
     '@vueuse/core/nuxt',
     '@unocss/nuxt',

pages/hi/[id].vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 const route = useRoute()
+
+const name = route.params.id
 </script>
 
 <template>
   <div>
-    <div>Hi: {{ route.params.id }}</div>
+    <div i-twemoji:waving-hand text-4xl inline-block animate-bounce></div>
+    <h3 text-2xl>
+      Hi!
+    </h3>
+    <div>{{ name }}</div>
 
     <div>
       <NuxtLink

pages/index.vue

@@ -2,13 +2,19 @@
   <div>
     <img w-16 inline-block src="/nuxt.png" />
     <img w-16 inline-block src="/vite.png" />
-    <h1 mt-1 mb-3 text-2xl cursor-default>
+    <h1 mt-1 text-2xl cursor-default>
       <span text-green-500 hover:text-white hover:bg-green-600>Nuxt 3</span>
       <span text-gray-400 mx-2>+</span>
       <span text-purple-500>Vitesse</span>
     </h1>
-    <InputEntry />
+    <Suspense>
       <PageView />
-    <Footer />
+      <template #fallback>
+        <div op50 italic animate-pulse>
+          Loading...
+        </div>
+      </template>
+    </Suspense>
+    <InputEntry />
   </div>
 </template>