vue-i18nの設定とメッセージファイル

i18nとは

Vue I18nのインストール

// terminal
// npm install vue-i18n

メッセージファイル

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

トルコ語ロケールの追加

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

i18nインスタンスの作成

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

legacy: falseを使う理由

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

アプリへの登録

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

テンプレートでの$tの使用

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

fallbackLocaleの動作

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

プレースホルダーによる補間

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

メッセージファイルの整理

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

理解度チェック

復習