From f254751906257879e3aeb8faeb453682feb66b8f Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sat, 13 Jan 2024 14:15:58 +0800
Subject: [PATCH 1/3] feat: vue i18n tab

---
 packages/client/src/constants/tab.ts          |  8 ++
 packages/client/src/main.ts                   |  2 +
 packages/client/src/pages/i18n.vue            | 92 ++++++++++++++++++
 packages/core/src/bridge/core.ts              |  2 +
 packages/core/src/bridge/devtools.ts          |  4 +
 packages/core/src/bridge/user-app.ts          |  6 ++
 packages/devtools-kit/src/api/index.ts        | 19 +++-
 packages/devtools-kit/src/api/plugin.ts       |  2 +
 .../src/core/component-inspector/index.ts     | 13 +++
 packages/playground/locales/README.md         |  7 ++
 packages/playground/locales/ar.yml            | 14 +++
 packages/playground/locales/de.yml            | 14 +++
 packages/playground/locales/en.yml            | 14 +++
 packages/playground/locales/es.yml            | 14 +++
 packages/playground/locales/fr.yml            | 14 +++
 packages/playground/locales/id.yml            | 14 +++
 packages/playground/locales/it.yml            | 13 +++
 packages/playground/locales/ja.yml            | 13 +++
 packages/playground/locales/ka.yml            | 14 +++
 packages/playground/locales/ko.yml            | 13 +++
 packages/playground/locales/pl.yml            | 14 +++
 packages/playground/locales/pt-BR.yml         | 14 +++
 packages/playground/locales/ru.yml            | 13 +++
 packages/playground/locales/tr.yml            | 14 +++
 packages/playground/locales/uk.yml            | 13 +++
 packages/playground/locales/uz.yml            | 14 +++
 packages/playground/locales/vi.yml            | 13 +++
 packages/playground/locales/zh-CN.yml         | 14 +++
 packages/playground/package.json              |  2 +
 packages/playground/src/App.preview.vue       |  6 ++
 packages/playground/src/main.ts               |  3 +
 packages/playground/src/modules/i18n.ts       | 49 ++++++++++
 packages/playground/vite.config.ts            |  9 ++
 packages/schema/src/types/vue.ts              |  1 +
 pnpm-lock.yaml                                | 93 +++++++++++++++++++
 35 files changed, 563 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/pages/i18n.vue
 create mode 100644 packages/playground/locales/README.md
 create mode 100644 packages/playground/locales/ar.yml
 create mode 100644 packages/playground/locales/de.yml
 create mode 100644 packages/playground/locales/en.yml
 create mode 100644 packages/playground/locales/es.yml
 create mode 100644 packages/playground/locales/fr.yml
 create mode 100644 packages/playground/locales/id.yml
 create mode 100644 packages/playground/locales/it.yml
 create mode 100644 packages/playground/locales/ja.yml
 create mode 100644 packages/playground/locales/ka.yml
 create mode 100644 packages/playground/locales/ko.yml
 create mode 100644 packages/playground/locales/pl.yml
 create mode 100644 packages/playground/locales/pt-BR.yml
 create mode 100644 packages/playground/locales/ru.yml
 create mode 100644 packages/playground/locales/tr.yml
 create mode 100644 packages/playground/locales/uk.yml
 create mode 100644 packages/playground/locales/uz.yml
 create mode 100644 packages/playground/locales/vi.yml
 create mode 100644 packages/playground/locales/zh-CN.yml
 create mode 100644 packages/playground/src/modules/i18n.ts

diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts
index 7a4ff1f8..d581f937 100644
--- a/packages/client/src/constants/tab.ts
+++ b/packages/client/src/constants/tab.ts
@@ -56,6 +56,13 @@ export const builtinTab: [string, ModuleBuiltinTab[]][] = [
       path: 'pinia',
       title: 'Pinia',
     },
+    {
+      icon: 'i-carbon-language',
+      name: 'i18n',
+      order: -100,
+      path: 'i18n',
+      title: 'I18n Resources',
+    },
   ]],
   ['advanced', [
     {
@@ -79,6 +86,7 @@ type Detective = NonNullable<DevtoolsBridgeAppRecord['moduleDetectives']>
 const moduleDetectivesMapping = {
   pinia: 'pinia',
   router: 'vueRouter',
+  i18n: 'vueI18n',
 } satisfies Record<string, keyof Detective>
 
 export function isDetected(moduleDetectives: Detective, tab: ModuleBuiltinTab) {
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index ef0e5f26..39549628 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -14,6 +14,7 @@ import Components from '~/pages/components.vue'
 import Overview from '~/pages/overview.vue'
 import PiniaPage from '~/pages/pinia.vue'
 import RouterPage from '~/pages/router.vue'
+import I18nPage from '~/pages/i18n.vue'
 import Timeline from '~/pages/timeline.vue'
 import Pages from '~/pages/pages.vue'
 import Assets from '~/pages/assets.vue'
@@ -40,6 +41,7 @@ const routes = [
   { path: '/components', component: Components },
   { path: '/pinia', component: PiniaPage },
   { path: '/router', component: RouterPage },
+  { path: '/i18n', component: I18nPage },
   { path: '/timeline', component: Timeline },
   { path: '/pages', component: Pages },
   { path: '/assets', component: Assets },
diff --git a/packages/client/src/pages/i18n.vue b/packages/client/src/pages/i18n.vue
new file mode 100644
index 00000000..f21a9ae2
--- /dev/null
+++ b/packages/client/src/pages/i18n.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useDevToolsBridgeRpc } from '@vue/devtools-core'
+
+// eslint-disable-next-line ts/no-import-type-side-effects
+import { type InspectorNodeTag, type InspectorState } from '@vue/devtools-kit'
+import { Pane, Splitpanes } from 'splitpanes'
+
+const bridgeRpc = useDevToolsBridgeRpc()
+const INSPECTOR_ID = 'vue-i18n-resource-inspector'
+
+const selected = ref('')
+const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
+const state = ref<{
+  inspectorId?: string
+  state?: InspectorState[]
+  getters?: InspectorState[]
+}>({})
+
+function getPiniaState(nodeId: string) {
+  bridgeRpc.getInspectorState({ inspectorId: INSPECTOR_ID, nodeId }).then(({ data }) => {
+    state.value = data
+  })
+}
+
+function clearPiniaState() {
+  state.value = {}
+}
+
+watch(selected, () => {
+  clearPiniaState()
+  getPiniaState(selected.value)
+})
+
+createCollapseContext('inspector-state')
+
+onDevToolsClientConnected(() => {
+  bridgeRpc.getInspectorTree({ inspectorId: INSPECTOR_ID, filter: '' }).then(({ data }) => {
+    tree.value = data
+    if (!selected.value && data.length) {
+      selected.value = data[0].id
+      getPiniaState(data[0].id)
+    }
+  })
+
+  bridgeRpc.on.inspectorTreeUpdated((data) => {
+    if (!data?.data.length)
+      return
+    tree.value = data.data
+    if (!selected.value && data.data.length) {
+      selected.value = data.data[0].id
+      getPiniaState(data.data[0].id)
+    }
+  }, {
+    inspectorId: INSPECTOR_ID,
+  })
+
+  bridgeRpc.on.inspectorStateUpdated((data) => {
+    if (!data || !data.state.length)
+      return
+
+    state.value = data
+  }, {
+    inspectorId: INSPECTOR_ID,
+  })
+})
+
+onUnmounted(() => {
+  bridgeRpc.unhighlightElement()
+})
+</script>
+
+<template>
+  <PanelGrids h-screen>
+    <Splitpanes>
+      <Pane flex flex-col border="r base">
+        <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
+          <InspectorTree v-model="selected" :data="tree" />
+        </div>
+      </Pane>
+      <Pane flex flex-col>
+        <div :key="selected" h-0 grow overflow-auto p-2 class="no-scrollbar">
+          <InspectorState
+            v-for="(item, key) in state" :id="key"
+            :key="key"
+            :inspector-id="INSPECTOR_ID"
+            :node-id="selected" :data="item" :name="`${key}`"
+          />
+        </div>
+      </Pane>
+    </Splitpanes>
+  </PanelGrids>
+</template>
diff --git a/packages/core/src/bridge/core.ts b/packages/core/src/bridge/core.ts
index 82d03eef..8368b985 100644
--- a/packages/core/src/bridge/core.ts
+++ b/packages/core/src/bridge/core.ts
@@ -85,6 +85,7 @@ export const bridgeRpcEvents = {
   toggleApp: 'toggle-app',
   isVueInspectorDetected: 'vue-inspector:detected',
   enableVueInspector: 'vue-inspector:enable',
+  unhighlightElement: 'element:unhighlight',
 } as const
 
 export type BridgeRpcEvents = typeof bridgeRpcEvents
@@ -116,6 +117,7 @@ export interface BridgeRpcEventPayload {
   [bridgeRpcEvents.toggleApp]: string
   [bridgeRpcEvents.isVueInspectorDetected]: boolean
   [bridgeRpcEvents.enableVueInspector]: null
+  [bridgeRpcEvents.unhighlightElement]: null
 }
 
 export class BridgeRpcCore {
diff --git a/packages/core/src/bridge/devtools.ts b/packages/core/src/bridge/devtools.ts
index 62a46dde..74493680 100644
--- a/packages/core/src/bridge/devtools.ts
+++ b/packages/core/src/bridge/devtools.ts
@@ -95,6 +95,10 @@ export class BridgeRpc {
     return devtoolsBridge.rpc.emit<{ data: { id: string } }>(bridgeRpcEvents.inspectComponentInspector)
   }
 
+  static unhighlightElement() {
+    return devtoolsBridge.rpc.emit(bridgeRpcEvents.unhighlightElement)
+  }
+
   static scrollToComponent(payload: BridgeRpcEventPayload['scroll-to-component']) {
     return devtoolsBridge.rpc.emit(bridgeRpcEvents.scrollToComponent, payload)
   }
diff --git a/packages/core/src/bridge/user-app.ts b/packages/core/src/bridge/user-app.ts
index 89f1b79c..aa7b4322 100644
--- a/packages/core/src/bridge/user-app.ts
+++ b/packages/core/src/bridge/user-app.ts
@@ -42,6 +42,12 @@ export function registerBridgeRpc(bridge: BridgeInstanceType) {
     return devtools.api.inspectComponentInspector()
   })
 
+  // unhighlight element
+  bridgeRpcCore.on(bridgeRpcEvents.unhighlightElement, () => {
+    devtools.api.unhighlightElement()
+    return Promise.resolve(JSON.stringify({}))
+  })
+
   // scroll to component
   bridgeRpcCore.on(bridgeRpcEvents.scrollToComponent, (payload) => {
     devtools.api.scrollToComponent(payload!)
diff --git a/packages/devtools-kit/src/api/index.ts b/packages/devtools-kit/src/api/index.ts
index 35604e72..2dbcba52 100644
--- a/packages/devtools-kit/src/api/index.ts
+++ b/packages/devtools-kit/src/api/index.ts
@@ -14,7 +14,7 @@ import { addCustomCommand, removeCustomCommand } from '../core/custom-command'
 import type { CustomCommand } from '../core/custom-command'
 
 import { getVueInspector } from '../core/vue-inspector'
-import { inspectComponentInspector, scrollToComponent, toggleComponentInspector } from '../core/component-inspector'
+import { highlight as highlightElement, inspectComponentInspector, scrollToComponent, toggleComponentInspector, unhighlight as unhighlightElement } from '../core/component-inspector'
 import { clear } from './off'
 import type { DevToolsEvent } from './on'
 import { DevToolsEvents, apiHooks, on } from './on'
@@ -178,6 +178,23 @@ export class DevToolsPluginApi {
     openInEditor(payload)
   }
 
+  highlightElement(instance) {
+    highlightElement(instance)
+  }
+
+  unhighlightElement() {
+    unhighlightElement()
+  }
+
+  async getComponentInstances(app) {
+    const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__
+    const appId = appRecord.id.toString()
+    const instances = [...appRecord.instanceMap]
+      .filter(([key]) => key.split(':')[0] === appId)
+      .map(([,instance]) => instance)
+    return instances
+  }
+
   // Vite only
   getVueInspector() {
     return getVueInspector()
diff --git a/packages/devtools-kit/src/api/plugin.ts b/packages/devtools-kit/src/api/plugin.ts
index 2506db09..e2540ebf 100644
--- a/packages/devtools-kit/src/api/plugin.ts
+++ b/packages/devtools-kit/src/api/plugin.ts
@@ -41,11 +41,13 @@ export async function registerPlugin(options: { app: VueAppInstance, api: DevToo
     const globalProperties = record.app?.config?.globalProperties
     if (!globalProperties)
       return record
+
     return {
       ...record,
       moduleDetectives: {
         vueRouter: !!globalProperties.$router,
         pinia: !!globalProperties.$pinia,
+        vueI18n: !!globalProperties.$i18n,
       },
     }
   })
diff --git a/packages/devtools-kit/src/core/component-inspector/index.ts b/packages/devtools-kit/src/core/component-inspector/index.ts
index 5da64866..5108c56c 100644
--- a/packages/devtools-kit/src/core/component-inspector/index.ts
+++ b/packages/devtools-kit/src/core/component-inspector/index.ts
@@ -142,6 +142,19 @@ export function toggleComponentInspector(options: ToggleComponentInspectorOption
   }
 }
 
+export function highlight(instance: VueAppInstance) {
+  const bounds = getComponentBoundingRect(instance)
+  const name = getInstanceName(instance)
+  const container = getCotainerElement()
+  container ? update({ bounds, name }) : create({ bounds, name })
+}
+
+export function unhighlight() {
+  const el = getCotainerElement()
+  if (el)
+    el.style.display = 'none'
+}
+
 let inspectInstance: VueAppInstance = null!
 function inspectFn(e: MouseEvent) {
   const target = e.target as { __vueParentComponent?: VueAppInstance }
diff --git a/packages/playground/locales/README.md b/packages/playground/locales/README.md
new file mode 100644
index 00000000..4b24ec29
--- /dev/null
+++ b/packages/playground/locales/README.md
@@ -0,0 +1,7 @@
+## i18n
+
+This directory is to serve your locale translation files. YAML under this folder would be loaded automatically and register with their filenames as locale code.
+
+Check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next) for more details.
+
+If you are using VS Code, [`i18n Ally`](https://github.com/lokalise/i18n-ally) is recommended to make the i18n experience better.
diff --git a/packages/playground/locales/ar.yml b/packages/playground/locales/ar.yml
new file mode 100644
index 00000000..9c1bbb61
--- /dev/null
+++ b/packages/playground/locales/ar.yml
@@ -0,0 +1,14 @@
+button:
+  about: حول
+  back: رجوع
+  go: تجربة
+  home: الرئيسية
+  toggle_dark: التغيير إلى الوضع المظلم
+  toggle_langs: تغيير اللغة
+intro:
+  desc: vite مثال لتطبيق
+  dynamic-route: عرض لتوجيهات ديناميكية
+  hi: مرحبا {name}
+  aka: معروف أيضا تحت مسمى
+  whats-your-name: ما إسمك؟
+not-found: صفحة غير موجودة
diff --git a/packages/playground/locales/de.yml b/packages/playground/locales/de.yml
new file mode 100644
index 00000000..621f6cb5
--- /dev/null
+++ b/packages/playground/locales/de.yml
@@ -0,0 +1,14 @@
+button:
+  about: Über
+  back: Zurück
+  go: Los
+  home: Startseite
+  toggle_dark: Dunkelmodus umschalten
+  toggle_langs: Sprachen ändern
+intro:
+  desc: Vite Startvorlage mit Vorlieben
+  dynamic-route: Demo einer dynamischen Route
+  hi: Hi, {name}!
+  aka: Auch bekannt als
+  whats-your-name: Wie heißt du?
+not-found: Nicht gefunden
diff --git a/packages/playground/locales/en.yml b/packages/playground/locales/en.yml
new file mode 100644
index 00000000..a0997459
--- /dev/null
+++ b/packages/playground/locales/en.yml
@@ -0,0 +1,14 @@
+button:
+  about: About
+  back: Back
+  go: GO
+  home: Home
+  toggle_dark: Toggle dark mode
+  toggle_langs: Change languages
+intro:
+  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
diff --git a/packages/playground/locales/es.yml b/packages/playground/locales/es.yml
new file mode 100644
index 00000000..44596439
--- /dev/null
+++ b/packages/playground/locales/es.yml
@@ -0,0 +1,14 @@
+button:
+  about: Acerca de
+  back: Atrás
+  go: Ir
+  home: Inicio
+  toggle_dark: Alternar modo oscuro
+  toggle_langs: Cambiar idiomas
+intro:
+  desc: Plantilla de Inicio de Vite Dogmática
+  dynamic-route: Demo de ruta dinámica
+  hi: ¡Hola, {name}!
+  aka: También conocido como
+  whats-your-name: ¿Cómo te llamas?
+not-found: No se ha encontrado
diff --git a/packages/playground/locales/fr.yml b/packages/playground/locales/fr.yml
new file mode 100644
index 00000000..7f93ce24
--- /dev/null
+++ b/packages/playground/locales/fr.yml
@@ -0,0 +1,14 @@
+button:
+  about: À propos
+  back: Retour
+  go: Essayer
+  home: Accueil
+  toggle_dark: Basculer en mode sombre
+  toggle_langs: Changer de langue
+intro:
+  desc: Exemple d'application Vite
+  dynamic-route: Démo de route dynamique
+  hi: Salut, {name}!
+  aka: Aussi connu sous le nom de
+  whats-your-name: Comment t'appelles-tu ?
+not-found: Page non trouvée
diff --git a/packages/playground/locales/id.yml b/packages/playground/locales/id.yml
new file mode 100644
index 00000000..738573f2
--- /dev/null
+++ b/packages/playground/locales/id.yml
@@ -0,0 +1,14 @@
+button:
+  about: Tentang
+  back: Kembali
+  go: Pergi
+  home: Beranda
+  toggle_dark: Ubah ke mode gelap
+  toggle_langs: Ubah bahasa
+intro:
+  desc: Template awal vite
+  dynamic-route: Contoh rute dinamik
+  hi: Halo, {name}!
+  aka: Juga diketahui sebagai
+  whats-your-name: Siapa nama anda?
+not-found: Tidak ditemukan
diff --git a/packages/playground/locales/it.yml b/packages/playground/locales/it.yml
new file mode 100644
index 00000000..fa0d9889
--- /dev/null
+++ b/packages/playground/locales/it.yml
@@ -0,0 +1,13 @@
+button:
+  about: Su di me
+  back: Indietro
+  go: Vai
+  home: Home
+  toggle_dark: Attiva/disattiva modalità scura
+  toggle_langs: Cambia lingua
+intro:
+  desc: Modello per una Applicazione Vite
+  dynamic-route: Demo di rotta dinamica
+  hi: Ciao, {name}!
+  whats-your-name: Come ti chiami?
+not-found: Non trovato
diff --git a/packages/playground/locales/ja.yml b/packages/playground/locales/ja.yml
new file mode 100644
index 00000000..834228e6
--- /dev/null
+++ b/packages/playground/locales/ja.yml
@@ -0,0 +1,13 @@
+button:
+  about: これは？
+  back: 戻る
+  go: 進む
+  home: ホーム
+  toggle_dark: ダークモード切り替え
+  toggle_langs: 言語切り替え
+intro:
+  desc: 固執された Vite スターターテンプレート
+  dynamic-route: 動的ルートのデモ
+  hi: こんにちは、{name}!
+  whats-your-name: 君の名は。
+not-found: 見つかりませんでした
diff --git a/packages/playground/locales/ka.yml b/packages/playground/locales/ka.yml
new file mode 100644
index 00000000..47e273b0
--- /dev/null
+++ b/packages/playground/locales/ka.yml
@@ -0,0 +1,14 @@
+button:
+  about: შესახებ
+  back: უკან
+  go: დაწყება
+  home: მთავარი
+  toggle_dark: გადართე მუქი რეჟიმი
+  toggle_langs: ენის შეცვლა
+intro:
+  desc: Opinionated Vite Starter Template
+  dynamic-route: დინამიური როუტინგის დემო
+  hi: გამარჯობა, {name}!
+  aka: ასევე ცნობილი როგორც
+  whats-your-name: რა გქვია?
+not-found: ვერ მოიძებნა
diff --git a/packages/playground/locales/ko.yml b/packages/playground/locales/ko.yml
new file mode 100644
index 00000000..780f88ec
--- /dev/null
+++ b/packages/playground/locales/ko.yml
@@ -0,0 +1,13 @@
+button:
+  about: 소개
+  back: 뒤로가기
+  go: 이동
+  home: 홈
+  toggle_dark: 다크모드 토글
+  toggle_langs: 언어 변경
+intro:
+  desc: Vite 애플리케이션 템플릿
+  dynamic-route: 다이나믹 라우트 데모
+  hi: 안녕, {name}!
+  whats-your-name: 이름이 뭐예요?
+not-found: 찾을 수 없습니다
diff --git a/packages/playground/locales/pl.yml b/packages/playground/locales/pl.yml
new file mode 100644
index 00000000..7929c340
--- /dev/null
+++ b/packages/playground/locales/pl.yml
@@ -0,0 +1,14 @@
+button:
+  about: O nas
+  back: Wróć
+  go: WEJDŹ
+  home: Strona główna
+  toggle_dark: Ustaw tryb nocny
+  toggle_langs: Zmień język
+intro:
+  desc: Opiniowany szablon startowy Vite
+  dynamic-route: Demonstracja dynamicznego route
+  hi: Cześć, {name}!
+  aka: Znany też jako
+  whats-your-name: Jak masz na imię?
+not-found: Nie znaleziono
diff --git a/packages/playground/locales/pt-BR.yml b/packages/playground/locales/pt-BR.yml
new file mode 100644
index 00000000..bd99e3bf
--- /dev/null
+++ b/packages/playground/locales/pt-BR.yml
@@ -0,0 +1,14 @@
+button:
+  about: Sobre
+  back: Voltar
+  go: Ir
+  home: Início
+  toggle_dark: Alternar modo escuro
+  toggle_langs: Mudar de idioma
+intro:
+  desc: Modelo Opinativo de Partida de Vite
+  dynamic-route: Demonstração de rota dinâmica
+  hi: Olá, {name}!
+  aka: Também conhecido como
+  whats-your-name: Qual é o seu nome?
+not-found: Não encontrado
diff --git a/packages/playground/locales/ru.yml b/packages/playground/locales/ru.yml
new file mode 100644
index 00000000..32398f1d
--- /dev/null
+++ b/packages/playground/locales/ru.yml
@@ -0,0 +1,13 @@
+button:
+  about: О шаблоне
+  back: Назад
+  go: Перейти
+  home: Главная
+  toggle_dark: Включить темный режим
+  toggle_langs: Сменить язык
+intro:
+  desc: Самостоятельный начальный шаблон Vite
+  dynamic-route: Демо динамического маршрута
+  hi: Привет, {name}!
+  whats-your-name: Как тебя зовут?
+not-found: Не найден
diff --git a/packages/playground/locales/tr.yml b/packages/playground/locales/tr.yml
new file mode 100644
index 00000000..b969b2c4
--- /dev/null
+++ b/packages/playground/locales/tr.yml
@@ -0,0 +1,14 @@
+button:
+  about: Hakkımda
+  back: Geri
+  go: İLERİ
+  home: Anasayfa
+  toggle_dark: Karanlık modu değiştir
+  toggle_langs: Dilleri değiştir
+intro:
+  desc: Görüşlü Vite Başlangıç Şablonu
+  dynamic-route: Dinamik rota demosu
+  hi: Merhaba, {name}!
+  aka: Ayrıca şöyle bilinir
+  whats-your-name: Adınız nedir?
+not-found: Bulunamadı
diff --git a/packages/playground/locales/uk.yml b/packages/playground/locales/uk.yml
new file mode 100644
index 00000000..280eecaf
--- /dev/null
+++ b/packages/playground/locales/uk.yml
@@ -0,0 +1,13 @@
+button:
+  about: Про шаблон
+  back: Назад
+  go: Перейти
+  home: Головна
+  toggle_dark: Переключити темний режим
+  toggle_langs: Змінити мову
+intro:
+  desc: Самостійний початковий шаблон Vite
+  dynamic-route: Демо динамічного маршруту
+  hi: Привіт, {name}!
+  whats-your-name: Як тебе звати?
+not-found: Не знайдено
diff --git a/packages/playground/locales/uz.yml b/packages/playground/locales/uz.yml
new file mode 100644
index 00000000..53e0044b
--- /dev/null
+++ b/packages/playground/locales/uz.yml
@@ -0,0 +1,14 @@
+button:
+  about: Haqida
+  back: Orqaga
+  go: Kettik
+  home: Bosh sahifa
+  toggle_dark: Qorong‘i rejimga o‘tish
+  toggle_langs: Tilni o‘zgartirish
+intro:
+  desc: O‘ylangan boshlang‘ich Vite shabloni
+  dynamic-route: Dynamic route demo'si
+  hi: Assalomu alaykum, {name}!
+  aka: shuningdek
+  whats-your-name: Ismingiz nima?
+not-found: Topilmadi
diff --git a/packages/playground/locales/vi.yml b/packages/playground/locales/vi.yml
new file mode 100644
index 00000000..ba2322ed
--- /dev/null
+++ b/packages/playground/locales/vi.yml
@@ -0,0 +1,13 @@
+button:
+  about: Về
+  back: Quay lại
+  go: Đi
+  home: Khởi đầu
+  toggle_dark: Chuyển đổi chế độ tối
+  toggle_langs: Thay đổi ngôn ngữ
+intro:
+  desc: Ý kiến cá nhân Vite Template để bắt đầu
+  dynamic-route: Bản giới thiệu về dynamic route
+  hi: Hi, {name}!
+  whats-your-name: Tên bạn là gì?
+not-found: Không tìm thấy
diff --git a/packages/playground/locales/zh-CN.yml b/packages/playground/locales/zh-CN.yml
new file mode 100644
index 00000000..7d9ce762
--- /dev/null
+++ b/packages/playground/locales/zh-CN.yml
@@ -0,0 +1,14 @@
+button:
+  about: 关于
+  back: 返回
+  go: 确定
+  home: 首页
+  toggle_dark: 切换深色模式
+  toggle_langs: 切换语言
+intro:
+  desc: 固执己见的 Vite 项目模板
+  dynamic-route: 动态路由演示
+  hi: 你好，{name}
+  aka: 也叫
+  whats-your-name: 输入你的名字
+not-found: 未找到页面
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 79f488d9..dfb36687 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -13,9 +13,11 @@
     "@vueuse/core": "^10.7.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.4",
+    "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vue/devtools": "workspace:*",
     "@vue/devtools-api": "workspace:*",
diff --git a/packages/playground/src/App.preview.vue b/packages/playground/src/App.preview.vue
index 4e35a6a1..5ea1a62a 100644
--- a/packages/playground/src/App.preview.vue
+++ b/packages/playground/src/App.preview.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import STC from './components/ScrollToComponent.vue'
 import { useAppStore } from './stores'
 
+const { t } = useI18n()
+
 const age = ref(10)
 const app = useAppStore()
 </script>
@@ -10,6 +13,9 @@ const app = useAppStore()
 <template>
   <div class="container">
     <RouterView />
+    <p>
+      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
+    </p>
     <p>
       Age: {{ age }}
     </p>
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
index 217244c6..dc5a3ecd 100644
--- a/packages/playground/src/main.ts
+++ b/packages/playground/src/main.ts
@@ -12,6 +12,8 @@ import Hello from './pages/Hello.vue'
 import Hey from './pages/Hey.vue'
 import './style.css'
 
+import { install as installI18n } from './modules/i18n'
+
 // connect to remote devtools
 // devtools.connect('http://localhost', 8080)
 
@@ -89,6 +91,7 @@ addCustomCommand({
   ],
 })
 
+installI18n({ app })
 app.use(router)
 app.use(pinia)
 
diff --git a/packages/playground/src/modules/i18n.ts b/packages/playground/src/modules/i18n.ts
new file mode 100644
index 00000000..c8790428
--- /dev/null
+++ b/packages/playground/src/modules/i18n.ts
@@ -0,0 +1,49 @@
+import type { Locale } from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
+
+// 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: '',
+  messages: {},
+})
+
+const localesMap = Object.fromEntries(
+  Object.entries(import.meta.glob('../../locales/*.yml'))
+    .map(([path, loadLocale]) => [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]),
+) as Record<Locale, () => Promise<{ default: Record<string, string> }>>
+
+export const availableLocales = Object.keys(localesMap)
+
+const loadedLanguages: string[] = []
+
+function setI18nLanguage(lang: Locale) {
+  i18n.global.locale.value = lang as any
+  if (typeof document !== 'undefined')
+    document.querySelector('html')?.setAttribute('lang', lang)
+  return lang
+}
+
+export async function loadLanguageAsync(lang: string): Promise<Locale> {
+  // If the same language
+  if (i18n.global.locale.value === lang)
+    return setI18nLanguage(lang)
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang))
+    return setI18nLanguage(lang)
+
+  // If the language hasn't been loaded yet
+  const messages = await localesMap[lang]()
+  i18n.global.setLocaleMessage(lang, messages.default)
+  loadedLanguages.push(lang)
+  return setI18nLanguage(lang)
+}
+
+export const install = ({ app }) => {
+  app.use(i18n)
+  loadLanguageAsync('en')
+}
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
index a9d37154..fac478c7 100644
--- a/packages/playground/vite.config.ts
+++ b/packages/playground/vite.config.ts
@@ -1,13 +1,22 @@
+import path from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 import VueDevtools from 'vite-plugin-vue-devtools'
+import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     VueDevtools(),
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+    VueI18n({
+      runtimeOnly: true,
+      compositionOnly: true,
+      fullInstall: true,
+      include: [path.resolve('./locales/**')],
+    }),
   ],
   server: {
     port: 3000,
diff --git a/packages/schema/src/types/vue.ts b/packages/schema/src/types/vue.ts
index ff41a2a5..0382b212 100644
--- a/packages/schema/src/types/vue.ts
+++ b/packages/schema/src/types/vue.ts
@@ -100,6 +100,7 @@ export interface AppRecord {
   moduleDetectives?: {
     vueRouter: boolean
     pinia: boolean
+    vueI18n: boolean
   }
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81d2bed6..f0977690 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -434,10 +434,16 @@ importers:
       vue:
         specifier: ^3.4.4
         version: 3.4.4(typescript@5.3.3)
+      vue-i18n:
+        specifier: ^9.9.0
+        version: 9.9.0(vue@3.4.4)
       vue-router:
         specifier: ^4.2.5
         version: 4.2.5(vue@3.4.4)
     devDependencies:
+      '@intlify/unplugin-vue-i18n':
+        specifier: ^2.0.0
+        version: 2.0.0(rollup@3.28.1)(vue-i18n@9.9.0)
       '@vitejs/plugin-vue':
         specifier: ^4.6.2
         version: 4.6.2(vite@5.0.10)(vue@3.4.4)
@@ -2965,6 +2971,82 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@intlify/bundle-utils@7.5.0(vue-i18n@9.9.0):
+    resolution: {integrity: sha512-6DymqusddBQ8kVtVBsVFFF7arNfIhuLacOmmsqayT2vl427j9m0VX12mMC+cgoVIodSpRfzYPaPTdPuJq7mK0Q==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/message-compiler': 9.9.0
+      '@intlify/shared': 9.9.0
+      acorn: 8.11.2
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.0
+      magic-string: 0.30.5
+      mlly: 1.4.2
+      source-map-js: 1.0.2
+      vue-i18n: 9.9.0(vue@3.4.4)
+      yaml-eslint-parser: 1.2.2
+    dev: true
+
+  /@intlify/core-base@9.9.0:
+    resolution: {integrity: sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/message-compiler': 9.9.0
+      '@intlify/shared': 9.9.0
+
+  /@intlify/message-compiler@9.9.0:
+    resolution: {integrity: sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/shared': 9.9.0
+      source-map-js: 1.0.2
+
+  /@intlify/shared@9.9.0:
+    resolution: {integrity: sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==}
+    engines: {node: '>= 16'}
+
+  /@intlify/unplugin-vue-i18n@2.0.0(rollup@3.28.1)(vue-i18n@9.9.0):
+    resolution: {integrity: sha512-1oKvm92L9l2od2H9wKx2ZvR4tzn7gUtd7bPLI7AWUmm7U9H1iEypndt5d985ypxGsEs0gToDaKTrytbBIJwwSg==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+      vue-i18n-bridge: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+      vue-i18n-bridge:
+        optional: true
+    dependencies:
+      '@intlify/bundle-utils': 7.5.0(vue-i18n@9.9.0)
+      '@intlify/shared': 9.9.0
+      '@rollup/pluginutils': 5.1.0(rollup@3.28.1)
+      '@vue/compiler-sfc': 3.4.4
+      debug: 4.3.4
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.1
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+      unplugin: 1.6.0
+      vue-i18n: 9.9.0(vue@3.4.4)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -15124,6 +15206,17 @@ packages:
     resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==}
     dev: true
 
+  /vue-i18n@9.9.0(vue@3.4.4):
+    resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.9.0
+      '@intlify/shared': 9.9.0
+      '@vue/devtools-api': 6.5.1
+      vue: 3.4.4(typescript@5.3.3)
+
   /vue-loader@15.11.1(@vue/compiler-sfc@3.4.4)(css-loader@6.8.1)(webpack@5.89.0):
     resolution: {integrity: sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==}
     peerDependencies:

From 8be6c3ca2b619764bcdc1cbeeef43029bb892a8c Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sat, 13 Jan 2024 14:22:11 +0800
Subject: [PATCH 2/3] chore: update

---
 packages/playground/locales/README.md   |  7 -------
 packages/playground/locales/ar.yml      | 14 --------------
 packages/playground/locales/de.yml      | 14 --------------
 packages/playground/locales/id.yml      | 14 --------------
 packages/playground/locales/it.yml      | 13 -------------
 packages/playground/locales/ka.yml      | 14 --------------
 packages/playground/locales/ko.yml      | 13 -------------
 packages/playground/locales/pl.yml      | 14 --------------
 packages/playground/locales/pt-BR.yml   | 14 --------------
 packages/playground/locales/ru.yml      | 13 -------------
 packages/playground/locales/tr.yml      | 14 --------------
 packages/playground/locales/uk.yml      | 13 -------------
 packages/playground/locales/uz.yml      | 14 --------------
 packages/playground/locales/vi.yml      | 13 -------------
 packages/playground/src/App.preview.vue | 17 ++++++++++++++++-
 15 files changed, 16 insertions(+), 185 deletions(-)
 delete mode 100644 packages/playground/locales/README.md
 delete mode 100644 packages/playground/locales/ar.yml
 delete mode 100644 packages/playground/locales/de.yml
 delete mode 100644 packages/playground/locales/id.yml
 delete mode 100644 packages/playground/locales/it.yml
 delete mode 100644 packages/playground/locales/ka.yml
 delete mode 100644 packages/playground/locales/ko.yml
 delete mode 100644 packages/playground/locales/pl.yml
 delete mode 100644 packages/playground/locales/pt-BR.yml
 delete mode 100644 packages/playground/locales/ru.yml
 delete mode 100644 packages/playground/locales/tr.yml
 delete mode 100644 packages/playground/locales/uk.yml
 delete mode 100644 packages/playground/locales/uz.yml
 delete mode 100644 packages/playground/locales/vi.yml

diff --git a/packages/playground/locales/README.md b/packages/playground/locales/README.md
deleted file mode 100644
index 4b24ec29..00000000
--- a/packages/playground/locales/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## i18n
-
-This directory is to serve your locale translation files. YAML under this folder would be loaded automatically and register with their filenames as locale code.
-
-Check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next) for more details.
-
-If you are using VS Code, [`i18n Ally`](https://github.com/lokalise/i18n-ally) is recommended to make the i18n experience better.
diff --git a/packages/playground/locales/ar.yml b/packages/playground/locales/ar.yml
deleted file mode 100644
index 9c1bbb61..00000000
--- a/packages/playground/locales/ar.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: حول
-  back: رجوع
-  go: تجربة
-  home: الرئيسية
-  toggle_dark: التغيير إلى الوضع المظلم
-  toggle_langs: تغيير اللغة
-intro:
-  desc: vite مثال لتطبيق
-  dynamic-route: عرض لتوجيهات ديناميكية
-  hi: مرحبا {name}
-  aka: معروف أيضا تحت مسمى
-  whats-your-name: ما إسمك؟
-not-found: صفحة غير موجودة
diff --git a/packages/playground/locales/de.yml b/packages/playground/locales/de.yml
deleted file mode 100644
index 621f6cb5..00000000
--- a/packages/playground/locales/de.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: Über
-  back: Zurück
-  go: Los
-  home: Startseite
-  toggle_dark: Dunkelmodus umschalten
-  toggle_langs: Sprachen ändern
-intro:
-  desc: Vite Startvorlage mit Vorlieben
-  dynamic-route: Demo einer dynamischen Route
-  hi: Hi, {name}!
-  aka: Auch bekannt als
-  whats-your-name: Wie heißt du?
-not-found: Nicht gefunden
diff --git a/packages/playground/locales/id.yml b/packages/playground/locales/id.yml
deleted file mode 100644
index 738573f2..00000000
--- a/packages/playground/locales/id.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: Tentang
-  back: Kembali
-  go: Pergi
-  home: Beranda
-  toggle_dark: Ubah ke mode gelap
-  toggle_langs: Ubah bahasa
-intro:
-  desc: Template awal vite
-  dynamic-route: Contoh rute dinamik
-  hi: Halo, {name}!
-  aka: Juga diketahui sebagai
-  whats-your-name: Siapa nama anda?
-not-found: Tidak ditemukan
diff --git a/packages/playground/locales/it.yml b/packages/playground/locales/it.yml
deleted file mode 100644
index fa0d9889..00000000
--- a/packages/playground/locales/it.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-button:
-  about: Su di me
-  back: Indietro
-  go: Vai
-  home: Home
-  toggle_dark: Attiva/disattiva modalità scura
-  toggle_langs: Cambia lingua
-intro:
-  desc: Modello per una Applicazione Vite
-  dynamic-route: Demo di rotta dinamica
-  hi: Ciao, {name}!
-  whats-your-name: Come ti chiami?
-not-found: Non trovato
diff --git a/packages/playground/locales/ka.yml b/packages/playground/locales/ka.yml
deleted file mode 100644
index 47e273b0..00000000
--- a/packages/playground/locales/ka.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: შესახებ
-  back: უკან
-  go: დაწყება
-  home: მთავარი
-  toggle_dark: გადართე მუქი რეჟიმი
-  toggle_langs: ენის შეცვლა
-intro:
-  desc: Opinionated Vite Starter Template
-  dynamic-route: დინამიური როუტინგის დემო
-  hi: გამარჯობა, {name}!
-  aka: ასევე ცნობილი როგორც
-  whats-your-name: რა გქვია?
-not-found: ვერ მოიძებნა
diff --git a/packages/playground/locales/ko.yml b/packages/playground/locales/ko.yml
deleted file mode 100644
index 780f88ec..00000000
--- a/packages/playground/locales/ko.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-button:
-  about: 소개
-  back: 뒤로가기
-  go: 이동
-  home: 홈
-  toggle_dark: 다크모드 토글
-  toggle_langs: 언어 변경
-intro:
-  desc: Vite 애플리케이션 템플릿
-  dynamic-route: 다이나믹 라우트 데모
-  hi: 안녕, {name}!
-  whats-your-name: 이름이 뭐예요?
-not-found: 찾을 수 없습니다
diff --git a/packages/playground/locales/pl.yml b/packages/playground/locales/pl.yml
deleted file mode 100644
index 7929c340..00000000
--- a/packages/playground/locales/pl.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: O nas
-  back: Wróć
-  go: WEJDŹ
-  home: Strona główna
-  toggle_dark: Ustaw tryb nocny
-  toggle_langs: Zmień język
-intro:
-  desc: Opiniowany szablon startowy Vite
-  dynamic-route: Demonstracja dynamicznego route
-  hi: Cześć, {name}!
-  aka: Znany też jako
-  whats-your-name: Jak masz na imię?
-not-found: Nie znaleziono
diff --git a/packages/playground/locales/pt-BR.yml b/packages/playground/locales/pt-BR.yml
deleted file mode 100644
index bd99e3bf..00000000
--- a/packages/playground/locales/pt-BR.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: Sobre
-  back: Voltar
-  go: Ir
-  home: Início
-  toggle_dark: Alternar modo escuro
-  toggle_langs: Mudar de idioma
-intro:
-  desc: Modelo Opinativo de Partida de Vite
-  dynamic-route: Demonstração de rota dinâmica
-  hi: Olá, {name}!
-  aka: Também conhecido como
-  whats-your-name: Qual é o seu nome?
-not-found: Não encontrado
diff --git a/packages/playground/locales/ru.yml b/packages/playground/locales/ru.yml
deleted file mode 100644
index 32398f1d..00000000
--- a/packages/playground/locales/ru.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-button:
-  about: О шаблоне
-  back: Назад
-  go: Перейти
-  home: Главная
-  toggle_dark: Включить темный режим
-  toggle_langs: Сменить язык
-intro:
-  desc: Самостоятельный начальный шаблон Vite
-  dynamic-route: Демо динамического маршрута
-  hi: Привет, {name}!
-  whats-your-name: Как тебя зовут?
-not-found: Не найден
diff --git a/packages/playground/locales/tr.yml b/packages/playground/locales/tr.yml
deleted file mode 100644
index b969b2c4..00000000
--- a/packages/playground/locales/tr.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: Hakkımda
-  back: Geri
-  go: İLERİ
-  home: Anasayfa
-  toggle_dark: Karanlık modu değiştir
-  toggle_langs: Dilleri değiştir
-intro:
-  desc: Görüşlü Vite Başlangıç Şablonu
-  dynamic-route: Dinamik rota demosu
-  hi: Merhaba, {name}!
-  aka: Ayrıca şöyle bilinir
-  whats-your-name: Adınız nedir?
-not-found: Bulunamadı
diff --git a/packages/playground/locales/uk.yml b/packages/playground/locales/uk.yml
deleted file mode 100644
index 280eecaf..00000000
--- a/packages/playground/locales/uk.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-button:
-  about: Про шаблон
-  back: Назад
-  go: Перейти
-  home: Головна
-  toggle_dark: Переключити темний режим
-  toggle_langs: Змінити мову
-intro:
-  desc: Самостійний початковий шаблон Vite
-  dynamic-route: Демо динамічного маршруту
-  hi: Привіт, {name}!
-  whats-your-name: Як тебе звати?
-not-found: Не знайдено
diff --git a/packages/playground/locales/uz.yml b/packages/playground/locales/uz.yml
deleted file mode 100644
index 53e0044b..00000000
--- a/packages/playground/locales/uz.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-button:
-  about: Haqida
-  back: Orqaga
-  go: Kettik
-  home: Bosh sahifa
-  toggle_dark: Qorong‘i rejimga o‘tish
-  toggle_langs: Tilni o‘zgartirish
-intro:
-  desc: O‘ylangan boshlang‘ich Vite shabloni
-  dynamic-route: Dynamic route demo'si
-  hi: Assalomu alaykum, {name}!
-  aka: shuningdek
-  whats-your-name: Ismingiz nima?
-not-found: Topilmadi
diff --git a/packages/playground/locales/vi.yml b/packages/playground/locales/vi.yml
deleted file mode 100644
index ba2322ed..00000000
--- a/packages/playground/locales/vi.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-button:
-  about: Về
-  back: Quay lại
-  go: Đi
-  home: Khởi đầu
-  toggle_dark: Chuyển đổi chế độ tối
-  toggle_langs: Thay đổi ngôn ngữ
-intro:
-  desc: Ý kiến cá nhân Vite Template để bắt đầu
-  dynamic-route: Bản giới thiệu về dynamic route
-  hi: Hi, {name}!
-  whats-your-name: Tên bạn là gì?
-not-found: Không tìm thấy
diff --git a/packages/playground/src/App.preview.vue b/packages/playground/src/App.preview.vue
index 5ea1a62a..d964b7ad 100644
--- a/packages/playground/src/App.preview.vue
+++ b/packages/playground/src/App.preview.vue
@@ -4,10 +4,20 @@ import { useI18n } from 'vue-i18n'
 import STC from './components/ScrollToComponent.vue'
 import { useAppStore } from './stores'
 
-const { t } = useI18n()
+import { availableLocales, loadLanguageAsync } from './modules/i18n'
 
 const age = ref(10)
 const app = useAppStore()
+
+const { t, locale } = useI18n()
+
+async function toggleLocales() {
+  // change to some real logic
+  const locales = availableLocales
+  const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+  await loadLanguageAsync(newLocale)
+  locale.value = newLocale
+}
 </script>
 
 <template>
@@ -16,6 +26,11 @@ const app = useAppStore()
     <p>
       <em text-sm opacity-75>{{ t('intro.desc') }}</em>
     </p>
+    <p>
+      <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
+        Toggle Langs
+      </a>
+    </p>
     <p>
       Age: {{ age }}
     </p>

From 50d947f9c18dc3d40298643f07970be14744f838 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sat, 13 Jan 2024 14:31:48 +0800
Subject: [PATCH 3/3] chore: fix typo

---
 packages/client/src/pages/i18n.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/pages/i18n.vue b/packages/client/src/pages/i18n.vue
index f21a9ae2..0a4ab4d9 100644
--- a/packages/client/src/pages/i18n.vue
+++ b/packages/client/src/pages/i18n.vue
@@ -16,19 +16,19 @@ const state = ref<{
   getters?: InspectorState[]
 }>({})
 
-function getPiniaState(nodeId: string) {
+function getI18nState(nodeId: string) {
   bridgeRpc.getInspectorState({ inspectorId: INSPECTOR_ID, nodeId }).then(({ data }) => {
     state.value = data
   })
 }
 
-function clearPiniaState() {
+function clearI18nState() {
   state.value = {}
 }
 
 watch(selected, () => {
-  clearPiniaState()
-  getPiniaState(selected.value)
+  clearI18nState()
+  getI18nState(selected.value)
 })
 
 createCollapseContext('inspector-state')
@@ -38,7 +38,7 @@ onDevToolsClientConnected(() => {
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id
-      getPiniaState(data[0].id)
+      getI18nState(data[0].id)
     }
   })
 
@@ -48,7 +48,7 @@ onDevToolsClientConnected(() => {
     tree.value = data.data
     if (!selected.value && data.data.length) {
       selected.value = data.data[0].id
-      getPiniaState(data.data[0].id)
+      getI18nState(data.data[0].id)
     }
   }, {
     inspectorId: INSPECTOR_ID,