i18n config

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"

lang/en-US.json

@@ -0,0 +1,3 @@
+{
+  "hello": "Hello"
+}

lang/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "hello": "你好"
+}

nuxt.config.ts

@@ -27,32 +27,29 @@ export default defineNuxtConfig({
         '@nuxtjs/i18n'
     ],
     i18n: {
-        // add `vueI18n` option to `@nuxtjs/i18n` module options
+        detectBrowserLanguage: {
-        vueI18n: {
+            useCookie: true,
-            legacy: false,
+            cookieKey: 'i18n_redirected',
-            locale: 'en',
+            redirectOn: 'root',  // recommended
-            fallbackLocale: 'en',
+            alwaysRedirect: true
-            messages: {
-                en: {
-                    welcome: 'Welcome'
-                },
-                fr: {
-                    welcome: 'Bienvenue'
-                }
-            }
         },
         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',
+        },
     }
 })