入門ガイド

Vue + Vue I18n を使用したグローバルアプリケーションの作成は非常に簡単です。Vue.js では、すでにコンポーネントを使用してアプリケーションを構成しています。Vue I18n を導入する場合、リソースメッセージを準備し、Vue I18n で提供されるローカライズ API のみを使用するだけで済みます。

注意

このガイドでは、すでに Vue 自体に精通していることを前提としています。Vue の専門家である必要はありませんが、特定の機能についての詳細情報が必要な場合は、コア Vue ドキュメントを参照する必要があります。

例

この例を見てみましょう：

• StackBlitz example

まずはルートコンポーネントである App.vue を見てみましょう。

App.vue

<template>
  <h1>{{ $t('message.hello') }}</h1>
</template>

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

次の出力が得られます：

<h1>こんにちは、世界</h1>

JavaScript でこれが実現される方法を見てみましょう！

i18n インスタンスの作成

i18n インスタンスは、関数 createI18n を呼び出して作成します。

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

createI18n にいくつかのオプションを指定できます。 重要なオプションは locale、fallbackLocale、および messages オプションです。

locale はローカライズする Vue アプリケーションの言語です。

fallbackLocale は、$t 翻訳 API で指定されたキーが locale の言語で見つからない場合にフォールバックする言語です。

messages は $t 翻訳 API で翻訳するロケールメッセージです。ロケールメッセージの構造は、各ロケールをトッププロパティとする階層的オブジェクト構造です。

i18n プラグインの登録

i18n インスタンスを作成したら、アプリケーションで use を呼び出してプラグインとして登録する必要があります：

const app = createApp(Vue)
app.use(i18n)
app.mount('#app')

ほとんどの Vue プラグインと同様に、use の呼び出しは mount の呼び出しよりも前にする必要があります。

このプラグインが何をするか気になる方は、その一部の責任は以下の通りです：

1. $t や $i18n などのグローバルプロパティとメソッドの追加
2. useI18n コンポーザブルの有効化
3. i18n-t、i18n-d、i18n-n コンポーネントのグローバル登録

このガイドの規約

シングルファイルコンポーネント

Vue I18n は、バンドラ（たとえば Vite）と SFCs（つまり .vue ファイル）を使用して構築されたアプリケーションで最も一般的に使用されます。このガイドの多くの例はそのスタイルで書かれていますが、Vue I18n 自体はビルドツールや SFC を使用する必要はありません。

例えば、Vue と Vue I18n のグローバルビルドを使用している場合、ライブラリはインポートではなくグローバルオブジェクトを通じて公開されます：

const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

コンポーネント API スタイル

Vue I18n は Composition API と Options API の両方で使用できます。関連する場合は、このガイドの例では両方のスタイルで記述されたコンポーネントを示します。Composition API の例では、明示的な setup 関数ではなく <script setup> を使用することが一般的です。

2 つのスタイルについて復習が必要な場合は、Vue - API Styles を参照してください。

Vue I18n は Vue の Composition API と Options API の両方で動作します。Vue と同じく、Composition API と Options API 用の Legacy API の 2 つの API スタイルがあります。

重要

Vue I18n v9 以降、Vue I18n v8.x で提供されていた API は Legacy API モードと呼ばれます。 Legacy API は Vue I18n v11 で非推奨となり、Vue I18n v12 で削除されます。Composition API モードの使用を推奨します。

以降のセクションでは、Legacy API を使用して説明します。

Composition API スタイルで使用したい場合かつ、Vue I18n を理解している場合は、こちらへ進んでください。