WIP: feat(i18n): Setup vue-i18n

package.json

@@ -70,6 +70,7 @@
     "systeminformation": "5.21.15",
     "tree-kill": "1.2.2",
     "vue": "3.5.13",
+    "vue-i18n": "10.0.5",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "zod": "3.22.4"
@@ -79,6 +80,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "1.5.0",
+    "@intlify/unplugin-vue-i18n": "6.0.3",
     "@openapitools/openapi-generator-cli": "2.15.3",
     "@playwright/test": "1.48.2",
     "@quasar/vite-plugin": "1.8.1",

src/components/Talk/AudioDetail.vue

@@ -52,11 +52,11 @@
             マウスホイールを使って<br />
             スライダーを微調整できます。
           </p>
-          ホイール: ±0.1<br />
-          <span v-if="isMac">Command</span><span v-else>Ctrl</span> + ホイール:
-          ±0.01<br />
-          <span v-if="isMac">Option</span><span v-else>Alt</span> + ホイール:
-          一括調整
+          {{ t("message.wheel") }}: ±0.1<br />
+          <span v-if="isMac">Command</span><span v-else>Ctrl</span> +
+          {{ t("message.wheel") }}: ±0.01<br />
+          <span v-if="isMac">Option</span><span v-else>Alt</span> +
+          {{ t("message.wheel") }}: 一括調整
         </ToolTip>
         <AccentPhrase
           v-for="(accentPhrase, accentPhraseIndex) in accentPhrases"
@@ -82,6 +82,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import AccentPhrase from "./AccentPhrase.vue";
 import ToolTip from "@/components/ToolTip.vue";
 import { useStore } from "@/store";
@@ -92,6 +93,8 @@ import { useShiftKey, useAltKey } from "@/composables/useModifierKey";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { handlePossiblyNotMorphableError } from "@/store/audioGenerate";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   activeAudioKey: AudioKey;
 }>();

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "message": {
+    "wheel": "wheel"
+  }
+}

src/locales/ja.json

@@ -0,0 +1,5 @@
+{
+  "message": {
+    "wheel": "ホイール"
+  }
+}

src/main.ts

@@ -1,10 +1,15 @@
 import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
 import { createGtm } from "@gtm-support/vue-gtm";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
 import { store, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
 import { hotkeyPlugin } from "./plugins/hotkeyPlugin";
+
+import en from "./locales/en.json";
+import ja from "./locales/ja.json";
+
 import App from "@/components/App.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
@@ -16,6 +21,18 @@ import "./styles/_index.scss";
 //       ため、それを防止するため自前でdataLayerをあらかじめ用意する
 window.dataLayer = [];
 
+type MessageSchema = typeof ja;
+
+const i18n = createI18n<[MessageSchema], "en" | "ja">({
+  legacy: false,
+  locale: "ja",
+  fallbackLocale: "en",
+  messages: {
+    en,
+    ja,
+  },
+});
+
 createApp(App)
   .use(store, storeKey)
   .use(
@@ -43,4 +60,5 @@ createApp(App)
   .use(hotkeyPlugin)
   .use(ipcMessageReceiver, { store })
   .use(markdownItPlugin)
+  .use(i18n)
   .mount("#app");

tsconfig.json

@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "@intlify/unplugin-vue-i18n/messages"],
     "paths": {
       "@/*": ["src/*"]
     },

vite.config.mts

@@ -8,6 +8,7 @@
 import checker from "vite-plugin-checker";
 import { BuildOptions, defineConfig, loadEnv, Plugin } from "vite";
 import { quasar } from "@quasar/vite-plugin";
+import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import { z } from "zod";
 
 const isElectron = process.env.VITE_TARGET === "electron";
@@ -76,6 +77,9 @@
     plugins: [
       vue(),
       quasar({ autoImportComponentCase: "pascal" }),
+      VueI18nPlugin({
+        include: path.resolve(__dirname, "./src/locales/**")
+      }),
       mode !== "test" &&
         checker({
           overlay: false,