Nuxt.jsでi18n対応 #Vue.js

Nuxt.js簡単にサイト構築ができてとても便利ですね。
今回はNuxt.jsでi18n対応をやりましたのでその手順を記載します。

i18n対応とは

国際化対応とも言われる。
ソフトウェアやインターネットサイトを複数の言語で使用、閲覧可能な状態にすること。
「Internationalization」の省略表記で、最初と末尾の文字、及びその間の文字数を記載して「i18n」と呼ぶらしい。

今回はnuxt-i18nのパッケージを使用。

nuxt-i18nのインストール

i18n対応可能とするパッケージnuxt-i18nをインストール

yarn add nuxt-i18n

package.jsonに追加されていることを確認

"dependencies": {
    ...
    "nuxt-i18n": "^6.26.0"
}

言語翻訳ファイルの作成

./locales/[laguage] 配下に言語ファイルを作成
以下は、./locales/ja/index.jsonの作成例
※必要に応じて、他言語のファイルも作成

./locales/ja/index.json

{
    "welcome": "ようこそ！"
}

nuxt.config.jsファイルの設定

nuxt.config.jsファイルのmudulesの箇所に以下の文言を追加

./nuxt.config.js

modules: [
    [
      'nuxt-i18n', 
      {
        // 使用する言語の設定
        locales: [
          { code: 'ja', name: 'Japanese', iso: 'ja_JP', file: 'ja/index.json' },
          { code: 'en', name: 'English', iso: 'en-US', file: 'en/index.json' }
        ],
        defaultLocale: 'ja', // デフォルトの言語
        langDir: 'locales/', // 翻訳ファイルのディレクトリパス
        strategy: 'prefix_and_default', // URLに言語のプレフィックスを追加するかの指定
        vueI18n: {
          // 翻訳ファイルが見つからなかった場合の言語を指定
          fallbackLocale: 'ja'
        },
        vueI18nLoader: true,
        lazy: true
      }
    ]
  ],

Vueファイル内での使用

コンテンツ部となるVueファイル内で、jsonのキー情報を埋め込む
$t('key-name')を指定することで、翻訳ファイルのキーと一致させることが可能

./pages/index.vue

<v-card-text>
    <p>{{ $t('welcome')}}</p>
    ...
</v-card>

言語切替ボタンの追加

言語切替ボタンを追加するにはnuxt-linkを使用する
v-btnを使用してボタン表示（UIフレームワークとしてvuetifyを使用）

./pages/index.vue

<nuxt-link :to="switchLocalePath('ja')"><v-btn color="primary">Japanese</v-btn></nuxt-link>
<nuxt-link :to="switchLocalePath('en')"><v-btn color="primary">English</v-btn></nuxt-link>

実行確認

一連の修正を実施して動作確認

npm run dev

実際表示された画面

真ん中の部分の「Japanese」及び「English」のボタンで言語切替が可能となりました。
※ボタンすぐ上の「welcome！」の箇所が多言語対応されています。

最後に

UIフレームワークとしてVuetifyを使用しましたが、そもそもVuetifyがi18n対応済でvue-i18nとは連携可能とことです。

この辺り、もう少し深堀りすることでもっと効率の良いやり方があるかも知れません。
また分かり次第、投稿したいと思います。