fix: language

app/app.vue

@@ -1,7 +1,10 @@
 <script setup>
 import Taskbar from '~/components/Taskbar.vue';
 import AboutMeWindow from '~/components/AboutMeWindow.vue';
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
 
 // Reactive array to hold all window states
 const windows = reactive([]);

app/components/Taskbar.vue

@@ -27,10 +27,10 @@
     </div>
     <div class="right-section">
       <div class="language-toggle" @click="toggleLanguage">
-        <span>{{ locale === 'zh' ? '注音' : 'ABC' }}</span>
+        <span>{{ locale === 'zh-tw' ? '注音' : 'ABC' }}</span>
       </div>
       <div class="clock">
-        <span>{{ currentTime }}</span>
+        <span v-if="isMounted">{{ currentTime }}</span>
       </div>
     </div>
   </div>
@@ -40,9 +40,8 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const { t, locale } = useI18n();
-
-const props = defineProps({
+const { t, locale, setLocale } = useI18n();
+defineProps({
   minimizedWindows: {
     type: Array,
     default: () => [],
@@ -50,6 +49,7 @@ const props = defineProps({
 });
 
 const currentTime = ref(new Date().toLocaleTimeString());
+const isMounted = ref(false);
 let timerId = null;
 const showStartMenu = ref(false);
 
@@ -70,7 +70,9 @@ const closeAllWindows = () => {
 };
 
 const toggleLanguage = () => {
-  locale.value = locale.value === 'zh' ? 'en' : 'zh';
+  const newLocale = locale.value === 'zh-tw' ? 'en' : 'zh-tw';
+  locale.value = newLocale;
+  setLocale(newLocale);
 };
 
 const restoreMinimizedWindow = (id) => {
@@ -78,6 +80,7 @@ const restoreMinimizedWindow = (id) => {
 };
 
 onMounted(() => {
+  isMounted.value = true;
   timerId = setInterval(() => {
     currentTime.value = new Date().toLocaleTimeString();
   }, 1000);

nuxt.config.ts

@@ -14,13 +14,21 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
   ],
   i18n: {
+      langDir: 'locales',
       locales: [
-          { code: 'en', file: 'en.json', name: 'English' },
-          { code: 'zh', file: 'zh.json', name: '繁體中文' }
+          {
+              code: 'en',
+              iso: 'en-US',
+              file: 'en.json'
+          },
+          {
+              code: 'zh-tw',
+              iso: 'zh-TW',
+              file: 'zh-tw.json'
+          }
       ],
-      langDir: 'locales', // 你的語言文件夾名稱
-      defaultLocale: 'zh', // 預設語言
-      strategy: 'no_prefix', // 或者 'prefix_except_default'
+      defaultLocale: 'zh-tw',
+      strategy: 'no_prefix',
   },
   build: {
       transpile: ['@nuxtjs/i18n']

package-lock.json

@@ -19,6 +19,7 @@
         "nuxt": "^4.1.1",
         "typescript": "^5.9.2",
         "vue": "^3.5.21",
+        "vue-i18n": "^11.1.12",
         "vue-router": "^4.5.1"
       }
     },

package.json

@@ -22,6 +22,7 @@
     "nuxt": "^4.1.1",
     "typescript": "^5.9.2",
     "vue": "^3.5.21",
+    "vue-i18n": "^11.1.12",
     "vue-router": "^4.5.1"
   }
 }