Nuxt + i18nで国際化(yamlを使うよ！)

TL;DR

• Nuxtでの多言語対応の仕方を解説するよ
• i18nを使って対応するよ
• 翻訳ファイルはyamlを使うよ (jsonじゃないことに注意！)

はじめに

Nuxtで開発している際に表示を日本語と英語で切り替えれるようにしたいと思うことがあります。今回はnuxt/i18nを使って簡単に多言語対応する方法をまとめていきます。
さらに、翻訳ファイルに関してjsonではなくyamlを使った方法を紹介します。

環境

• nuxt ^2.15.8
  Nuxtプロジェクトの作成に関しては公式ページの以下の部分を参考にしてください。

https://nuxtjs.org/docs/get-started/installation/#using-create-nuxt-app

以下に今回の作業を行ったリポジトリを置いておきます。

https://github.com/futahei/nuxt-i18n-yaml

nuxt/i18nのセットアップ

公式ページを参考にインストールおよび設定していきます。

https://i18n.nuxtjs.org/setup

今回はパッケージマネージャーとしてyarnを利用していきます。npmでも問題ありませんので適宜読み替えてください。

まず以下のコマンドで必要なパッケージをインストールします。

yarn add @nuxtjs/i18n

次にnuxt.config.jsファイルのmodulesの欄に追記してi18nを有効にします。

nuxt.config.js

export default {
  modules: [
    // 以下を追加
    [
      "@nuxtjs/i18n",
      {
        // 使用する言語
        locales: [
          { code: 'ja', file: 'ja.json', iso: 'ja-JP' },
	  { code: 'en', file: 'en.json', iso: 'en-US' }
	],
	// デフォルトの言語
	defaultLocale: 'ja',
	// 翻訳ファイルの置き場所
	langDir: 'locales/',
	vueI18n: {
	  // 該当の翻訳が見つからなかったときの言語指定
          fallbackLocale: 'ja',
	}
      }
    ]
  ]
}

ここで一度試してみましょう。

localesにja.jsonとen.jsonを追加して以下のように記述してください。
(yamlを使うのはこの後です)

ja.json

{
  "greeting": "Nuxtアプリケーションへようこそ"
}

en.json

{
  "greeting": "Welcome to your Nuxt Application"
}

components/Tutorial.vueの11行目にあるWelcome to your Nuxt Applicationの文字を以下のように差し替えてみてください。

{{ $t('greeting') }}

yarn devでNuxtを起動するとTOPページの文言が日本語になっているはずです！
また、/enをURLに追加すると英語ページも見ることができます。

jsonをyamlに変更する

翻訳ファイルをjsonからyamlに変更します。

まずnuxt.config.jsを書き換えます。

nuxt.config.js

export default {
  modules: [
    [
      "@nuxtjs/i18n",
      {
        // 以下を変更
        locales: [
          { code: 'ja', file: 'ja.yaml', iso: 'ja-JP' },
	  { code: 'en', file: 'en.yaml', iso: 'en-US' }
	],
	defaultLocale: 'ja',
	langDir: 'locales/',
	vueI18n: {
	  // 該当の翻訳が見つからなかったときの言語指定
          fallbackLocale: 'ja',
	}
      }
    ]
  ]
}

次にjsonファイルをyamlファイルに置き換えます。

ja.yaml

greeting: Nuxtアプリケーションへようこそ

en.yaml

greeting: Welcome to your Nuxt Application

このままではNuxtがyamlを読み込んでくれないので、yamlを読み込むloaderを追加します。

yarn add js-yaml-loader

さらに、追加したloaderでyamlを読み込むようにnuxt.config.jsに追記します。

nuxt.config.js

build: {
    extend($config) {
      $config.module.rules.push({
        // これで locales 以下にあるyamlファイルを指定します
	// (\\|\/) の部分はwindows対応のためです
        test: /locales(\\|\/).*\.ya?ml$/,
        use: "yaml-loader",
      });
    },
  },

これで再度Nuxtを起動してみてください。問題なく表示されていれば完了です。

参考

https://i18n.nuxtjs.org/