はじめよう #

Vue + Vue I18nでグローバルアプリケーションを作るのは非常にシンプルです。すでにVue.jsを使って作られたアプリがあるならば、そのi18nに必要なのは、リソースメッセージの用意とVue I18nが提供するローカライゼーションAPIの使用のみです。

以下は基本的な例です：

HTML #

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

HTMLテンプレートで、Vue I18nによって注入された$t翻訳APIを使用して、ローカライズしています。これにより、Vue I18nはテンプレートを複数用意することなくロケールを変更することができ、グローバルなアプリケーションに対応できます。

JavaScript #

// 1. 翻訳したロケールメッセージを準備
// ロケールメッセージは、それぞれのロケールをトップのプロパティに持つ階層構造のオブジェクトです
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// 2. オプションを指定してi18nインスタンスを生成
const i18n = VueI18n.createI18n({
  locale: 'ja', // ロケールをセット
  fallbackLocale: 'en', // フォールバックロケールをセット
  messages, // ロケールメッセージをセット
  // その他オプションを指定できます
  // ...
})


// 3. vueルートインスタンスを生成
const app = Vue.createApp({
  // オプションを設定
  // ...
})

// 4. アプリ全体でi18nを使えるようにi18nインスタンスをインストール
app.use(i18n)

// 5. マウント
app.mount('#app')

// アプリが開始される

以下を出力します：

<div id="app">
  <p>こんにちは、世界</p>
</div>

app.use(i18n)を呼び出すことで、デフォルトで各コンポーネントから、this.$i18nでVueI18nインスタンスにアクセスできます。これはcreateI18nで作成したi18nインスタンスのglobalプロパティから参照できます。また、this.$tのような翻訳APIも各コンポーネントに注入されるので、これらのAPIをテンプレートで使用することができます。

同様の方法をsetup関数で使用するには、useI18n関数を呼び出す必要があります。これについては、Composition APIで詳しく説明されています。

このドキュメントでは、this.$i18nやthis.$tといった API を使用していますが、これらは Vue I18n v8.x からの後方互換性をほぼ維持しています。

以降のセクションはLegacy APIモードを使って説明されます。