【Nuxt.js】ウェブサイトを多言語化対応する方法

2020-11-08

Nuxt では nuxt-i18n というパッケージを利用することで，簡単に多言語化（国際化）に対応したウェブサイトを作成することができます．

インストール

terminal

$ yarn add -D nuxt-i18n

# or
$ npm i -D nuxt-i18n

設定

nuxt-i18n.config.js

export default {
  locales: [
    { code: 'en', iso: 'en', file: 'en.json', name: 'English' },
    { code: 'ja', iso: 'ja', file: 'ja.json', name: '日本語' },
  ],
  defaultLocale: 'ja',
  lazy: true,
  langDir: 'locales/',
}

すべてを nuxt.config.js に書くことはできますが，長くなってしまうので設定ファイルを分割しています．

また，ここでは各言語ごとに翻訳した言葉は JSON ファイルとして用意することで設定ファイルの冗長化を避けています．

JSON ファイルは ~/locales に置いており，langDir で指定することでディレクトリ名を変更可能です．

説明しませんが，多言語対応のための HTML タグを生成する機能もついています．

nuxt.config.js

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

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

使用方法

翻訳ファイル

翻訳ファイルはもちろんネスト構造にすることが可能です．

en.json

{
  "hello": "Hello, world!"
}

ja.json

{
  "hello": "こんにちは，世界！"
}

テンプレート内

<template>
  <p>{{ $t("hello") }}</p>
</template>

テンプレート内に直接記述する場合は上記の方法で自動的にブラウザの言語に合わせた翻訳ファイルが適用されます．

テンプレート内であっても変数として渡したい場合は下記のスクリプト内での利用と同様に this で呼びます．

スクリプト内

<script>
  export default {
    data() {
      return {
        messages: this.$t('hello'),
      }
    },
  }
</script>

mktia's note