概要

Nuxt.jsベースのクライアントアプリをnuxt-i18nを使って多言語化対応しました。

ググれば良い記事がいろいろ見つかりますが、基本的には本家のDocumentをみて導入しました。

実装内容

install

% yarn add nuxt-i18n

config

nuxt.config.js

  plugins: [
    { src: '~/plugins/axios' }, // この行を追加
  ],
  modules: [
     // 以下の設定を追加
    [
      'nuxt-i18n',
      {
        locales: [
          {
            code: 'ja',
            iso: 'ja',
            file: 'ja.json',
            label: '日本語'
          },
          {
            code: 'en',
            iso: 'en',
            file: 'en.json',
            label: 'English'
          }
        ],
        defaultLocale: 'ja',
        vueI18n: {
          fallbackLocale: 'ja'
        },
        lazy: true,
        langDir: 'locales/',
        detectBrowserLanguage: {
          useCookie: true,
          cookieDomain: null,
          cookieKey: 'i18n_redirected',
          alwaysRedirect: false,
          fallbackLocale: 'ja'
        }
      }
    ]
  ]

リソースの定義

• locales ディレクトリを作って、その中に日本語と英語の定義ファイルを作成します。（ファイル・ディレクトリ名はnuxt.config.jsの記述に合わせます。）
  • locales/ja.json
  • locales/en.json

ja.json

{
  "title": "アプリタイトル"
}

en.json

{
  "title": "My App Title"
}

ComponentやPageでの利用

• titleの表示

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

• 各種リンクの変更
  • localePathというメソッドを使うと、現在の言語設定に合わせて/en/pathのように言語のprefixをつけてくれます。

<template>
  <a :href="localePath('/')">{{ $t('title') }}</a>
</template>

APIの対応

axiosのintercepterという機能を使って、全てのaxiosのリクエストに Accept-Language headerを付与します。

• /plugins/axios.js

export default ({ app, store, $axios }) => {
  $axios.onRequest((config) => {
    config.headers.common['Accept-Language'] = app.i18n.locale
  })
}

以上です。