feat: use nuxt 4 structure

app/pages/[...all].vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
+    <div text-4xl>
+      <div i-carbon-warning inline-block />
+    </div>
+    <div>Not found</div>
+    <div>
+      <button text-sm btn m="3 t8" @click="router.back()">
+        Back
+      </button>
+    </div>
+  </main>
+</template>

app/pages/hi/[id].vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const route = useRoute<'hi-id'>()
+const user = useUserStore()
+const name = route.params.id
+
+watchEffect(() => {
+  user.setNewName(route.params.id as string)
+})
+
+definePageMeta({
+  layout: 'home',
+})
+</script>
+
+<template>
+  <div>
+    <div i-twemoji:waving-hand inline-block animate-shake-x animate-duration-5000 text-4xl />
+    <h3 text-2xl font-500>
+      Hi,
+    </h3>
+    <div text-xl>
+      {{ name }}!
+    </div>
+
+    <template v-if="user.otherNames.length">
+      <p my-4 text-sm>
+        <span op-50>Also as known as:</span>
+        <ul>
+          <li v-for="otherName in user.otherNames" :key="otherName">
+            <router-link :to="`/hi/${otherName}`" replace>
+              {{ otherName }}
+            </router-link>
+          </li>
+        </ul>
+      </p>
+    </template>
+
+    <Counter />
+
+    <div>
+      <NuxtLink
+        class="m-3 text-sm btn"
+        to="/"
+      >
+        Back
+      </NuxtLink>
+    </div>
+  </div>
+</template>

app/pages/index.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+
+const online = useOnline()
+</script>
+
+<template>
+  <div>
+    <Logos mb-6 />
+    <Suspense>
+      <ClientOnly>
+        <PageView v-if="online" />
+        <div v-else text-gray:80>
+          You're offline
+        </div>
+      </ClientOnly>
+      <template #fallback>
+        <div italic op50>
+          <span animate-pulse>Loading...</span>
+        </div>
+      </template>
+    </Suspense>
+    <InputEntry />
+  </div>
+</template>