🌐 Add i18n tool chain and landing page translation to simplified chinese

app.vue

@@ -1,5 +1,6 @@
 <template>
   <v-app>
+    <nuxt-loading-indicator color="white" />
     <nuxt-layout>
       <nuxt-page />
     </nuxt-layout>

i18n.config.ts

@@ -0,0 +1,3 @@
+export default defineI18nConfig(() => ({
+  fallbackLocale: 'en',
+}))

lang/en-US.json

@@ -0,0 +1,9 @@
+{
+  "brandName": "Solsynth",
+  "brandNameFormal": "Solsynth LLC",
+  "indexIntroduce": "An energetic software company that create wonderful software which everyone love.",
+  "indexProductListHint": "See some of our products just there",
+  "indexActivities": "Activities",
+  "indexActivitiesCaption": "Keep in touch,\nand learn what we doing recently.",
+  "indexActivitiesHint": "See some posts in our realm just here"
+}

lang/zh-CN.json

@@ -0,0 +1,9 @@
+{
+  "brandName": "索尔辛茨",
+  "brandNameFormal": "索尔辛茨实业有限公司",
+  "indexIntroduce": "一家充满活力的软件公司，创造了人人喜爱的精彩软件。",
+  "indexProductListHint": "在这里看看我们的一些产品",
+  "indexActivities": "动态",
+  "indexActivitiesCaption": "开发软件，闭门造车是大忌，了解我们最近在做什么。",
+  "indexActivitiesHint": "看看我们领域中的一些帖子"
+}

layouts/default.vue

@@ -13,6 +13,29 @@
 
       <v-spacer></v-spacer>
 
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn
+            size="small"
+            icon="mdi-translate"
+            v-bind="props"
+          />
+        </template>
+        <v-list>
+          <v-list-item
+            class="w-48"
+            density="compact"
+            v-for="item in locales"
+            :key="item.code"
+            :value="item.code"
+            :active="locale == item.code"
+            @click.prevent.stop="setLocale(item.code)"
+          >
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
       <user-menu />
     </v-container>
   </v-app-bar>
@@ -24,6 +47,8 @@
 
 <script setup lang="ts">
 import Logo from "../assets/logo-w-shadow.png"
+
+const { locale, locales, setLocale } = useI18n()
 </script>
 
 <style scoped>

nuxt.config.ts

@@ -13,6 +13,23 @@ export default defineNuxtConfig({
     ],
   },
 
+  i18n: {
+    strategy: "no_prefix",
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieCrossOrigin: true,
+      cookieKey: "__capital_i18n",
+      redirectOn: "root",
+    },
+    locales: [
+      { code: "en", name: "English", file: "en-US.json" },
+      { code: "zh-CN", name: "简体中文", file: "zh-CN.json" },
+    ],
+    lazy: true,
+    langDir: "lang",
+    defaultLocale: "en",
+  },
+
   css: ["@/assets/index.css"],
 
   runtimeConfig: {
@@ -70,6 +87,7 @@ export default defineNuxtConfig({
     "@nuxt/image",
     "@nuxtjs/sitemap",
     "@pinia/nuxt",
+    "@nuxtjs/i18n",
     (_options, nuxt) => {
       nuxt.hooks.hook("vite:extendConfig", (config) => {
         // @ts-expect-error

package.json

@@ -13,6 +13,7 @@
     "@mdi/font": "^7.4.47",
     "@nuxt/content": "^2.13.2",
     "@nuxt/image": "^1.7.0",
+    "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/sitemap": "^6.0.0-beta.1",
     "@pinia/nuxt": "^0.5.3",
     "nuxt": "^3.12.4",

pages/index.vue

@@ -2,13 +2,13 @@
   <v-container class="flex flex-col my-2 gap-[4rem]">
     <v-row class="content-section">
       <v-col cols="12" md="4" class="flex justify-start">
-        <div>
-          <h1 class="text-4xl font-bold">Solsynth</h1>
-          <p class="text-lg mt-3">
-            An energetic software company that create wonderful software which everyone love.
+        <div class="flex flex-col items-start">
+          <h1 class="text-4xl font-bold">{{ t("brandName") }}</h1>
+          <p class="text-lg mt-3 max-w-2/3">
+            {{ t("indexIntroduce") }}
           </p>
           <p class="text-grey mt-2">
-            See some of our products just there
+            {{ t("indexProductListHint") }}
             <v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
           </p>
         </div>
@@ -26,15 +26,14 @@
         </v-card>
       </v-col>
       <v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
-        <div class="text-right">
-          <h1 class="text-4xl font-bold">Activities</h1>
-          <p class="text-lg mt-3">
-            Keep in touch, <br />
-            and learn what we doing recently.
+        <div class="text-right flex flex-col items-end">
+          <h1 class="text-4xl font-bold">{{ t("indexActivities") }}</h1>
+          <p class="text-lg mt-3 max-w-2/3">
+            {{ t("indexActivitiesCaption") }}
           </p>
           <p class="text-grey mt-2">
             <v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
-            See some posts in our realm just here
+            {{ t("indexActivitiesHint") }}
           </p>
         </div>
       </v-col>
@@ -43,6 +42,8 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
+
 const { data: products } = await useAsyncData("products", () => queryContent("/products").where({ archived: { $ne: true } }).limit(5).find())
 </script>