From 5abd5edba5758a115fb53b14e9f73a42dcad344a Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Tue, 14 Feb 2023 21:24:33 +0800
Subject: [PATCH] i18n config

---
 app.vue         | 29 +++++++++++++++++++++++++++++
 lang/en-US.json |  3 +++
 lang/zh-CN.json |  3 +++
 nuxt.config.ts  | 29 +++++++++++++----------------
 4 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/app.vue b/app.vue
index d4cf6a4..fb649b2 100644
--- a/app.vue
+++ b/app.vue
@@ -13,6 +13,11 @@ const setTheme = (theme) => {
 const feedback = () => {
   window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
 }
+
+const { locale, locales } = useI18n()
+const setLang = (lang) => {
+  locale.value = lang
+}
 </script>
 
 <template>
@@ -22,6 +27,7 @@ const feedback = () => {
     <v-navigation-drawer
         v-model="drawer"
     >
+      {{ $t('hello') }}
       <v-list>
         <ModelDialog/>
       </v-list>
@@ -54,6 +60,29 @@ const feedback = () => {
             </v-list>
           </v-menu>
 
+          <v-menu
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                  v-bind="props"
+                  rounded="xl"
+                  prepend-icon="language"
+                  title="Language"
+              ></v-list-item>
+            </template>
+            <v-list
+                bg-color="white"
+            >
+              <v-list-item
+                  v-for="locale in locales"
+                  :key="locale.code"
+                  @click="setLang(locale.code)"
+              >
+                <v-list-item-title>{{ locale.name }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
           <v-list-item
               rounded="xl"
               prepend-icon="help_outline"
diff --git a/lang/en-US.json b/lang/en-US.json
index e69de29..a479da3 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -0,0 +1,3 @@
+{
+  "hello": "Hello"
+}
\ No newline at end of file
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index e69de29..ee0ffff 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -0,0 +1,3 @@
+{
+  "hello": "你好"
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f0072d0..01a694c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,32 +27,29 @@ export default defineNuxtConfig({
         '@nuxtjs/i18n'
     ],
     i18n: {
-        // add `vueI18n` option to `@nuxtjs/i18n` module options
-        vueI18n: {
-            legacy: false,
-            locale: 'en',
-            fallbackLocale: 'en',
-            messages: {
-                en: {
-                    welcome: 'Welcome'
-                },
-                fr: {
-                    welcome: 'Bienvenue'
-                }
-            }
+        detectBrowserLanguage: {
+            useCookie: true,
+            cookieKey: 'i18n_redirected',
+            redirectOn: 'root',  // recommended
+            alwaysRedirect: true
         },
         locales: [
             {
                 code: 'en',
-                file: 'en-US.js',
+                name: 'English',
+                file: 'en-US.json',
             },
             {
                 code: 'cn',
-                file: 'zn-CN.js',
+                name: '简体中文',
+                file: 'zn-CN.json',
             }
         ],
         lazy: true,
         langDir: 'lang',
-        defaultLocale: 'en'
+        defaultLocale: 'en',
+        vueI18n: {
+            fallbackLocale: 'en',
+        },
     }
 })