【Nuxt.js】nuxt-i18nで他言語対応

はじめに

Nuxt.jsで他言語対応をする際に使用したnuxt-i18nがとても良かったので布教したいと思い、導入から使い方までメモしておきます。

① インストール

まずは i18nのNuxt.js用Moduleをインストールします。

yarn add @nuxtjs/i18n
or 
npm install @nuxtjs/i18n

次に、nuxt.config.jsに設定を追加します。
以下の設定の他にも色々なOptionがありますので、公式ドキュメントを参考にしてみてください。

modules: [
	['nuxt-i18n', {
		locales: [
			{
				code: 'en', // localeの識別子
				file: 'en.json' // ファイル名。langDirに指定したディレクトリに置く
			},
			{
				code: 'ja',
				file: 'ja.json'
			}
		],
		lazy: true, // 翻訳を遅延読み込みさせるか
		langDir: 'lang/', // fileが存在するディレクトリを指定
		defaultLocale: 'ja', // デフォルトの言語
		strategy: 'no_prefix', // ルートにプレフィックスを追加できる。今回は無し
	}]
]

② 翻訳をjson形式で登録する

nuxt.config.jsで指定したファイルに翻訳をjson形式で記載していきます。

// en.json
{
	"title": "Hello World",
	"text": "I'm fine."
}

// ja.json
{
	"title": "こんにちは世界",
	"text": "私は元気です。"
}

③ 出力する

登録した翻訳を実際に出力します。
template内にて{{ $t('key') }}の形で呼び出すことができます。

<template>
	<div>
		<h1>{{ $t('title') }}</h1>
		<p>{{ $t('text') }}</p>
	</div>
</template>

切り替えボタン等、イベントで言語を切り替えたい場合はsetLocaleメソッドを使用します。

ex)
<template>
	<div>
		<button @click="isJapanese">日本語</button>
		<button @click="isEnglish">English</button>
		<h1>{{ $t('title') }}</h1>
		<p>{{ $t('text') }}</p>
	</div>
</template>
<script>
export default defineComponent({
  setup() {
    const isEnglish = () => {
			this.$i18n.setLocale('en')
		}
		const isJapanese = () => {
			this.$i18n.setLocale('ja')
		}

		return {
			isEnglish,
			isJapanese
		}
  },
})
</script>

とても簡単に他言語対応を実装することができました。
Callbackやカスタムルートパスなど、便利な機能がたくさんあるので、様々な要件に対応できそうです。