nuxt-i18nを使ってNuxt.jsを多言語化する手順

公開日：2020/03/18 更新日：2020/03/18

Nuxt.js

はじめに

Nuxt.jsで表示を日本語と英語の両方を表示できるようにし、さらに日本語と英語を切り替えするためのボタンも実装したのでその手順をまとめます。ここではnuxt-i18nというプラグインを使用します。

できるようになること

以下のGIF画像のように、Nuxt.jsで作成したWebサイトを日本語と英語の両方に対応させて、ボタンから言語を指定することで表示言語を切り替えできるようにします。

なお、上記はCSSフレームワークとしてVuetifyを使っていますが、多言語化対応するにあたってCSSフレームワークはなんでも大丈夫です。

前提と環境

以下の通りとなります。

Nuxt.js : 2.0.0
nuxt-i18n : 6.6.1

nuxt-i18nの公式リポジトリは以下です。

github.com

i18n for Nuxt

i18n for your Nuxt project

また、公式ドキュメントは以下です。

nuxt-community.github.io

nuxt-i18n

nuxt-i18n provides i18n features for your Nuxt project:

nuxt-i18nをインストールする

npmもしくはyarnでnuxt-i18nをインストールします。

myproject

$ npm install --save nuxt-i18n # npm
$ yarn add nuxt-i18n # yarn

以上でインストールが完了です。

nuxt.config.jsを編集する

nuxt-i18nを使用できるようnuxt.config.jsのmodulesに追記します。

~/myproject/nuxt.config.js

 modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    // nuxt-i18n用に以下を追記する
    [
      'nuxt-i18n',
      {
        // 使用する言語の設定
        locales: [
          { code: 'ja', name: 'Japanese', iso: 'ja_JP', file: 'ja.json' },
          { code: 'en', name: 'English', iso: 'en-US', file: 'en.json' }
        ],
        defaultLocale: 'en', // デフォルトの言語
        langDir: 'locales/', // 翻訳ファイルのディレクトリパス
        strategy: 'prefix_and_default', // URLに言語のプレフィックスを追加するかの指定
        vueI18n: {
          // 翻訳ファイルが見つからなかった場合の言語を指定
          fallbackLocale: 'en'
        },
        vueI18nLoader: true,
        lazy: true // 遅延読み込みの有効化
      }
    ]
  ],

以上でnuxt.config.jsの編集が完了です。なお、その他に指定できるオプションや詳細な説明は以下の公式ドキュメントに記載されていますので見てみてください。

nuxt-community.github.io

Options

Here are all the options available when configuring the module and their default values:

strategyオプションについて

strategyについてはURLにja、en等のプレフィックスを追加するかの設定になります。例えば、strategy: 'prefix'と設定すると、以下のように各言語のプレフィックスがURLに追加されます。以下は例です。

http://localhost/ja/signin
http://localhost/en/signin

strategy: 'no_prefix'を指定すると、言語に関わらずプレフィックスは付与されません。

http://localhost/signin

注意点として、no_prefixを指定すると、以降で説明する言語切り替えボタンで使用するswitchLocalePathというメソッドが使用できなくなります。

他にstrategy: 'prefix_except_default'、strategy: 'prefix_and_default'というオプションを指定でき、それぞれ「デフォルトの言語の場合はプレフィックスを付与しない」、「デフォルトの言語の場合もプレフィックスを付与する」という指定になります。

翻訳ファイルを作成する

nuxt.config.jsに記述した通り、プロジェクトディレクトリの直下にlocalesという名前のディレクトリを作成してその中に日本語用にja.json、英語用にen.jsonを作成します。

./myproject
├── locales
│   ├── ja.json
│   └── en.json

そしてja.jsonを以下の内容にします。

locales/ja.json

{
  "login": "ログイン",
  "welcome": "ようこそ",
  "message": {
    "hello": "こんにちは",
    "goodbye": "さようなら"
  },
  "error": {
    "required": "必須項目です。",
    "minlength": "最低８文字以上です。"
  },
  "form": {
    "password": "パスワード",
    "email": "メールアドレス"
  },
  "button": {
    "login": "ログイン",
    "logout": "ログアウト"
  }
}

en.jsonを以下の内容にします。

locales/en.json

{
  "login": "Login",
  "welcome": "Welcome",
  "message": {
    "hello": "Hello",
    "goodbye": "Good bye"
  },
  "error": {
    "required": "Required",
    "minlength": "At least 8 characters"
  },
  "form": {
    "password": "Password",
    "email": "E-mail"
  },
  "button": {
    "login": "Login",
    "logout": "Logout"
  }
}

以上で翻訳ファイルの作成が完了です。後は実際にVueファイル内で翻訳ファイルを読み込んで使用します。

Vueファイル内で使用する

適当なvueファイルで以下のように$tを使うことで言語設定に対応した表示にできます。

<p>{{ $t('login') }}</p>

以下のようにすることで翻訳ファイルのネストした部分も表示できます。

<button>{{ $t('button.login') }}</button>

もしHTMLタグの引数として使用したい場合は以下のようにします。

<input v-model="email" :placeholder="$t('form.email')" />

また、メソッドやデータ内等で使用したい場合は、以下のようにthis.$tで翻訳ファイルにアクセスできます。

 data () {
    return {
      required_message: this.$t('error.required'),
      login_message: this.$t('button.login')
    }
  },

上記のrequired_message、login_messageは定義する意味は全くないです。例になります。

リンクの対応について

注意点として、nuxt-linkなどでリンクを作成する場合は、以下のようにlocalPathを通す必要があります。

<nuxt-link :to="localePath('index')">{{ $t('home') }}</nuxt-link>

以下のように言語を指定してリンクを作成することもできます。

<nuxt-link :to="localePath('index', 'en')">Homepage in English</nuxt-link>

以下のようにパスをそのまま指定したい場合やパラメータを渡したい場合でも使用できます。

<nuxt-link :to="localePath('/user')">ユーザーページ</nuxt-link>
<nuxt-link
  :to="localePath({ name: 'users-id', params: { id: user.id } })">
  {{ user.name }}
</nuxt-link>

言語切り替えボタンを作成する

言語を切り替えるには、nuxt-linkで各言語へのリンクを作成します。

# 日本語への切り替えボタン
<button><nuxt-link :to="switchLocalePath('ja')">Japanese</nuxt-link></button>

# 英語への切り替えボタン
<button><nuxt-link :to="switchLocalePath('en')">English</nuxt-link></button>

ちなみに、公式ドキュメントにも記載されていますが以下のようにすると設定した翻訳ファイル全てのリンクを作成できます。

<nuxt-link
  v-for="locale in availableLocales"
  :key="locale.code"
  :to="switchLocalePath(locale.code)">
    {{ locale.name }}
</nuxt-link>

上記のavailableLocalesはcomputedで以下のように定義しておきます。

computed: {
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  }

もし任意のHTMLタグで囲む形で言語切り替え用のリンクを作成したい場合は例えば以下のようにします。

<ul>
  <li
    v-for="locale in availableLocales"
    :key="locale.code"
  >
    <nuxt-link :to="switchLocalePath(locale.code)">
      {{ locale.name }}
    </nuxt-link>
  </li>
</ul>