feat: use nuxt 4 structure

app/components/Counter.vue

@@ -0,0 +1,17 @@
+<script setup lang='ts'>
+const { count, inc, dec } = useCount()
+</script>
+
+<template>
+  <div inline-flex m="y-3">
+    <button rounded-full p-2 btn @click="dec()">
+      <div i-carbon-subtract />
+    </button>
+    <div font="mono" w="15" m-auto inline-block>
+      {{ count }}
+    </div>
+    <button rounded-full p-2 btn @click="inc()">
+      <div i-carbon-add />
+    </button>
+  </div>
+</template>

app/components/DarkToggle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+useHead({
+  meta: [{
+    id: 'theme-color',
+    name: 'theme-color',
+    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
+  }],
+})
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark">
+    <div class="i-carbon-sun dark:i-carbon-moon" />
+  </button>
+</template>

app/components/Footer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div text="xl gray4" m-5 flex="~ gap3" justify-center>
+    <NuxtLink i-carbon-campsite to="/" />
+    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="_blank" />
+    <DarkToggle />
+  </div>
+</template>

app/components/InputEntry.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+function go() {
+  if (name.value)
+    router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
+<template>
+  <div>
+    <input
+      id="input"
+      v-model="name"
+      placeholder="What's your name?"
+      type="text" autocomplete="off"
+      p="x-4 y-2" m="t-5" w="250px"
+      text="center" bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
+    >
+    <div>
+      <button
+        m-3 text-sm btn
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
+  </div>
+</template>

app/components/Logos.vue

@@ -0,0 +1,17 @@
+<template>
+  <div inline-flex cursor-default text-2xl font-300>
+    <div flex flex-col children:mx-auto>
+      <img inline-block h-18 w-18 src="/nuxt.svg">
+      <span mt--2 text-green5>Nuxt 3</span>
+    </div>
+    <div
+      text="3xl gray4"
+      m="x-4 y-auto"
+      i-carbon-add transform transition-all-500 hover:rotate-135
+    />
+    <div flex flex-col children:mx-auto>
+      <img inline-block h-18 w-18 src="/vite.png">
+      <span mt--2 text-purple5>Vitesse</span>
+    </div>
+  </div>
+</template>

app/components/PageView.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data } = await useFetch('/api/pageview')
+
+const time = useTimeAgo(() => data.value?.startAt || 0)
+</script>
+
+<template>
+  <div text-gray:80>
+    <span text-gray font-500>{{ data?.pageview }}</span>
+    page views since
+    <span text-gray>{{ time }}</span>
+  </div>
+</template>