🌐 add i18n

.vscode/settings.json

@@ -1,20 +1,12 @@
 {
   // other config
-  "typescript.preferences.autoImportFileExcludePatterns": ["vue-router"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "i18n-ally.keystyle": "nested",
-  "i18n-ally.sortKeys": true,
-  "i18n-ally.enabledParsers": ["ts", "json"],
-  "i18n-ally.sourceLanguage": "zh-CN",
-  "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": ["react"],
-  "i18n-ally.localesPaths": ["apps/web/locale"],
   "workbench.colorTheme": "Dracula",
   "workbench.editor.tabCloseButton": "left",
   "workbench.iconTheme": "vscode-great-icons",

apps/web/locales/en.yml

@@ -1,3 +1,4 @@
+Plant-monitoring-system: Plant monitoring system
 button:
   about: About
   back: Back
@@ -6,9 +7,9 @@ button:
   toggle_dark: Toggle dark mode
   toggle_langs: Change languages
 intro:
+  aka: Also known as
   desc: Opinionated Vite Starter Template
   dynamic-route: Demo of dynamic route
   hi: Hi, {name}!
-  aka: Also known as
   whats-your-name: What's your name?
 not-found: Not found

apps/web/locales/ja.yml

@@ -0,0 +1,14 @@
+button:
+  about: これは？
+  back: 戻る
+  go: 進む
+  home: ホーム
+  toggle_dark: ダークモード切り替え
+  toggle_langs: 言語切り替え
+intro:
+  desc: 固執された Vite スターターテンプレート
+  dynamic-route: 動的ルートのデモ
+  hi: こんにちは、{name}!
+  whats-your-name: 君の名は。
+not-found: 見つかりませんでした
+Plant-monitoring-system: 植物モニタリングシステムです

apps/web/locales/ko.yml

@@ -0,0 +1,14 @@
+button:
+  about: 소개
+  back: 뒤로가기
+  go: 이동
+  home: 홈
+  toggle_dark: 다크모드 토글
+  toggle_langs: 언어 변경
+intro:
+  desc: Vite 애플리케이션 템플릿
+  dynamic-route: 다이나믹 라우트 데모
+  hi: 안녕, {name}!
+  whats-your-name: 이름이 뭐예요?
+not-found: 찾을 수 없습니다
+Plant-monitoring-system: 식물 감시 시스템

apps/web/locales/zh-CN.yml

@@ -12,3 +12,4 @@ intro:
   aka: 也叫
   whats-your-name: 输入你的名字
 not-found: 未找到页面
+Plant-monitoring-system: 植物监测系统

apps/web/src/modules/i18n.ts

@@ -4,8 +4,6 @@ import type { UserModule } from '../../types/types'
 
 // 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 i18n = createI18n({
   legacy: false,
   locale: '',
@@ -46,5 +44,5 @@ export async function loadLanguageAsync(lang: string): Promise<Locale> {
 
 export const install: UserModule = ({ app }) => {
   app.use(i18n)
-  loadLanguageAsync('en')
+  loadLanguageAsync('zh-CN')
 }

apps/web/src/pages/[...all].vue

@@ -1,6 +1,10 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
   <div>
-    not-found
+    {{ t('not-found') }}
   </div>
 </template>