Nuxt.jsのプロジェクトでnuxt-i18nを使ってi18n（国際化）対応する方法

Nuxt.jsのプロジェクトにnuxt-i18nを導入し、i18n（国際化）対応する方法を紹介します。

nuxt-i18nとは

nuxt-i18nは、Nuxt.js用のi18nライブラリです。
Vue.js用のi18nライブラリであるvue-i118nにいくつかの機能が追加され、Nuxt.jsでの使用に特化しています。

パッケージをインストール

nuxt-i18nパッケージをインストールします。

$ npm i -D nuxt-i18n

言語ファイルを作成

ここでは、langディレクトリにJSON形式で英語と日本語の言語ファイルを作成します。

lang/en.json

{
  "HELLO_WORLD": "Hello World"
}

lang/ja.json

{
  "HELLO_WORLD": "こんにちは、世界"
}

わかりやすさのためにキーをアッパースネークケースにしていますが、別にキャメルケースでもかまいません。¹

nuxt-i18nの設定ファイルを作成

nuxt-i18nの設定をオブジェクトとして記述します。
nuxt.config.jsファイルに直接書いてもいいのですが、それなりに長いので別ファイルに切り出します。

nuxt-i18n.config.js

export default {
  locales: [
    {
      code: 'en',
      iso: 'en',
      file: 'en.json'
    },
    {
      code: 'ja',
      iso: 'ja',
      file: 'ja.json'
    }
  ],
  defaultLocale: 'en',
  lazy: true,
  langDir: 'lang/'
}

nuxt-i18nには多くの設定項目がありますが、ここでは最小限のもののみを指定しています。

• locales：使用する言語のリスト
  • code：URLなどに使用される識別子
  • iso：ISO形式の言語コード（詳細は後述）
  • file：言語ファイルのファイル名
• defaultLocale：デフォルトの言語
• lazy：言語ファイルを使用してレイジーロードをするか
• langDir：言語ファイルのディレクトリ

ISO形式の言語コード

ISO形式の言語コードは、以下のいずれかの形式で指定する必要があります。

• ISO 639-1のコード（言語コード）
  • en
  • jp
• ISO 639-1のコード（言語コード）とISO 3166-1 alpha-2のコード（国名コード）をハイフンで結合
  • en-US
  • ja-JP

プロジェクトにモジュールを追加

nuxt.config.jsファイルのmodulesに、nuxt-i18nとオプションオブジェクトを配列として追加します。

nuxt.config.js

import i18n from './nuxt-i18n.config'

export default {
  modules: [
    ['nuxt-i18n', i18n]
  ]
}

ここでは、さきほど作成した設定ファイルをインポートしてオプションとして使用しています。
nuxt.config.jsファイルが肥大化するのを許容できるのであれば、以下のようにリテラルで書いてもいいでしょう。

nuxt.config.js

export default {
  modules: [
    ['nuxt-i18n', {
      locales: [
        {
          code: 'en',
          iso: 'en',
          file: 'en.json'
        },
        {
          code: 'ja',
          iso: 'ja',
          file: 'ja.json'
        }
      ],
      defaultLocale: 'en',
      lazy: true,
      langDir: 'lang/'
    }]
  ]
}

コンポーネントで使用

nuxt-i18nの言語ファイルで定義したリソースは、コンポーネント内では$t(キー)という形式で使用します。

pages/index.vue

<template>
  <div>
    <span>{{ $t('HELLO_WORLD') }}</span>
  </div>
</template>

こうすることで、表示中の言語に対応する文字列が表示されます。

英語

日本語

例

• munierujp/nuxt-i18n-example

1. プログラミングにおける識別子の表記法まとめ🐫🐍⛓ - Qiita ↩