nuxt-i18nで日本語と英語に対応する

2021/2/18 公開 vue

• 
• Tweet

nuxt-i18n (opens new window)でブラウザの言語を自動で検知し、日本語と英語に対応する。
locales、langDir、lazy、defaultLocale、fallbackLocale、detectBrowserLanguage、strategyオプションを設定して動作を確認していく。

環境準備

nuxt-appでNuxt環境を構築する。

$ npm init nuxt-app nuxt-i18n-example
create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in nuxt-i18n-example
? Project name: nuxt-i18n-example
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json

nuxt-i18nをインストールする。

$ npm install nuxt-i18n

nuxt.config.jsにi18nの設定をする

nuxt.config.js

modules: [
  'nuxt-i18n',
],
i18n: {
  locales: [
    { code: 'ja', iso: 'ja_JP', file: 'ja.js' },
    { code: 'en', iso: 'en-US', file: 'en.js' },
  ],
  lazy: true,
  langDir: 'locales/',
  defaultLocale: 'ja',
  vueI18n: {
    fallbackLocale: 'ja',
  },
  detectBrowserLanguage: { alwaysRedirect: true },
},

localesオプション、langDirオプション

code ... ロケールを一意にする名前を設定する
iso　... ブラウザの言語設定を検知し、合致したfileの言語を設定する
file ... 言語のファイル。JavaScriptで設定できるためJSONと違いコメントをつけることができ、末尾に,がついていてもよい。
langDirオプションでfileの格納ディレクトリを指定する。

locales/ja.js

export default {
  hello: 'こんにちは',
  login: 'ログイン画面です',
}

locales/en.js

export default {
  hello: 'Hello!',
  login: 'login page',
}

lazyオプション

lazyオプションを設定するとlang-ja.jsとlang-en.jsのように言語ごとにファイルが分かれてダウンロードされるようになり、必要な言語のみが読み込まれる。
そのため、翻訳するコンテンツが多い場合はlazyオプションを設定するとよい。

defaultLocaleオプション

localesオプションで設定したいずれかのcodeを設定する。
prefix_except_defaultオプションを明示的に指定していない場合、ここで設定した言語以外にはURLにcodeの値が追加される。
たとえばdefaultLocaleにjaを設定した場合、
ブラウザの言語設定が日本語だった場合トップページはhttp://localhost:3000/で表示されるが、 ブラウザの言語設定が英語だった場合トップページはhttp://localhost:3000/enで表示される。

vueI18n.fallbackLocaleオプション

ブラウザの言語設定がいずれにも一致しなければfallbackLocaleに設定された言語が表示される。

detectBrowserLanguageオプション

1回目のサイトへのアクセス時は言語検知を行って、その言語へ自動でリダイレクトしてくれるが、2回目以降のサイトへのアクセス時にはリダイレクトしてくれなくなる。
そこで、{ alwaysRedirect: true }を設定すると2回目以降でもCookieの値をもとにリダイレクトしてくれる。

確認用の画面を用意してブラウザからアクセスしてみる

トップページ(index.vue)とそこから遷移する先のログインページ(login.vue)を用意する。
画面遷移にはNuxtLinkのtoにlocalePathを呼び出して遷移する。

index.vue

<template>
  <div>
    {{ $t('hello') }}
    <NuxtLink :to="localePath('/login')">Go to login page</NuxtLink>
  </div>
</template>

login.vue

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

言語の優先度が「日本語」の場合にhttp://localhost:3000/へアクセスすると、 「こんにちは Go to login page」と表示される。 CookieにはName:i18n_redirected、Value:jaが保存される。

言語の優先度が「英語」の場合にhttp://localhost:3000/へアクセスすると、http://localhost:3000/enへリダイレクトされ 「Hello! Go to login page」と表示される。
CookieにはName:i18n_redirected、Value:enが保存される。

ロケールごとに別のURLとせず同じURLにする

デフォルトではロケールごとに別のURLが割り当てられるが、同じURLにするにはstrategyオプションにno_prefixを設定する。

nuxt.config.js

i18n: {
  strategy: 'no_prefix',
},