From 4c22495ea6235a97fef6b78562b6d593125b1024 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 20 Aug 2021 12:58:29 +0800
Subject: [PATCH] chore: update

---
 src/modules/i18n.ts     |  4 +++-
 src/modules/pinia.ts    |  2 ++
 src/pages/hi/[name].vue | 32 +++++++++++++++++---------------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/modules/i18n.ts b/src/modules/i18n.ts
index dfd2229..01984c3 100644
--- a/src/modules/i18n.ts
+++ b/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'))
diff --git a/src/modules/pinia.ts b/src/modules/pinia.ts
index 4dedf07..1e57030 100644
--- a/src/modules/pinia.ts
+++ b/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)
diff --git a/src/pages/hi/[name].vue b/src/pages/hi/[name].vue
index 473be8e..e7b1ddd 100644
--- a/src/pages/hi/[name].vue
+++ b/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') }}