feat: use nuxt 4 structure

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>