vue-i18nにさわる

ロケールによってメッセージや項目名などの言語を切り替える仕組みですが、今回は単にVueテンプレートに埋め込む文字列を別ファイルに切り出したかったので使ってみます。

インストール

yarn add vue-i18n@next

設定

src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import stores from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import { createI18n } from "vue-i18n";

const i18n = createI18n({
  locale: "ja",
  messages: {
    ja: (await import("@/locales/ja.json")).default,
  },
});

const app = createApp(App);
app.use(router);
app.use(ElementPlus);
stores.forEach(({ store, key }) => {
  app.use(store, key);
});
app.use(i18n);
app.mount("#app");

src/locales/ja.json

{
  "label": {
    "homePage": {
      "message": "こんにちわわ！"
    }
  }
}

src/views/menu/homePage.vue

<template lang="pug">
MenuLayout
  p {{$t("label.homePage.message")}}
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MenuLayout from "@/layouts/MenuLayout.vue";

export default defineComponent({
  name: "HomePage",
  components: {
    MenuLayout,
  },
});
</script>

参照する際は$t関数にJSONのパスを指定して参照する

$t("label.homePage.message")