chore: update

src/modules/i18n.ts

@@ -1,8 +1,10 @@
 import { createI18n } from 'vue-i18n'
 import { UserModule } from '~/types'
 
-// import i18n resources
+// Import i18n resources
 // https://vitejs.dev/guide/features.html#glob-import
+//
+// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
 const messages = Object.fromEntries(
   Object.entries(
     import.meta.globEager('../../locales/*.y(a)?ml'))

src/modules/pinia.ts

@@ -1,6 +1,8 @@
 import { createPinia } from 'pinia'
 import { UserModule } from '~/types'
 
+// Setup Pinia
+// https://pinia.esm.dev/
 export const install: UserModule = ({ isClient, initialState, app }) => {
   const pinia = createPinia()
   app.use(pinia)

src/pages/hi/[name].vue

@@ -8,10 +8,9 @@ const router = useRouter()
 const { t } = useI18n()
 const user = useUserStore()
 
-watch(() => props.name, (name) => {
-  user.setNewName(name)
-}, { immediate: true })
-
+watchEffect(() => {
+  user.setNewName(props.name)
+})
 </script>
 
 <template>
@@ -22,24 +21,27 @@ watch(() => props.name, (name) => {
     <p>
       {{ t('intro.hi', { name: props.name }) }}
     </p>
-    <template v-if="user.otherNames.length">
-      <p class="text-sm">
-        {{ t('intro.aka') }}:
-        <ul>
-          <li v-for="name in user.otherNames">
-            {{ name }}
-          </li>
-        </ul>
-      </p>
-    </template>
 
     <p class="text-sm opacity-50">
       <em>{{ t('intro.dynamic-route') }}</em>
     </p>
 
+    <template v-if="user.otherNames.length">
+      <p class="text-sm mt-4">
+        <span class="opacity-75">{{ t('intro.aka') }}:</span>
+        <ul>
+          <li v-for="name in user.otherNames" :key="name">
+            <router-link :to="`/hi/${name}`" replace>
+              {{ name }}
+            </router-link>
+          </li>
+        </ul>
+      </p>
+    </template>
+
     <div>
       <button
-        class="btn m-3 text-sm mt-8"
+        class="btn m-3 text-sm mt-6"
         @click="router.back()"
       >
         {{ t('button.back') }}