2020/06/25
Nuxt.jsベースのアプリを多言語化対応しました
概要
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
})
}
以上です。
関連する記事
Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。
Nuxt.jsからNext.jsへのリニューアルを経て思うこと
Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します
NuxtJSにEditor.jsを導入
リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。
AOSをNuxtJSのサイトに導入する
スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました