【サンプル有】@nuxt/i18nで多言語対応する
@nuxt/i18nとは？
NUXTのコンテンツ多言語対応用のモジュールです。
このモジュールを使うことで日本語、英語など複数の言語に対応したサイトをNUXTで作ることができます。
公式サイトに、
Integration with vue-i18n
とあるので、Vueの多言語対応モジュールであるvue-i18nをもとに作られているようです。
@nuxt/i18nのメリット
メリットは公式ページで紹介されていますが主に、
- 現在の言語の状態に応じたパスを自動的に生成
- SEO対応
- 翻訳メッセージの遅延読み込み
- ブラウザの言語設定に応じて各言語のページへリダイレクト
- 言語ごとに異なるドメイン名
- Vuexで現在のロケールとメッセージを保存できる
といったことができるようになります。
導入
@nuxt/i18nをプロジェクトに導入します。
インストール
@nuxt/contentをインストールします。
npm
npm install @nuxtjs/i18n
yarn
yarn add @nuxtjs/i18n
nuxt.config.js
nuxt.config.jsを編集します。
基本のテンプレートが公式サイトで紹介されていました。
{
modules: [
'@nuxtjs/i18n'
],
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
},
es: {
welcome: 'Bienvenido'
}
}
}
}
}
locales…許可する言語defaultLocale…デフォルトの言語vueI18n…内部で使用されるvueI18nの設定fallbackLocale…表示される言語の訳がなかったときに参照される言語messages…各言語ごとの訳
Options - i18n-module#Constructor options | API references | Vue I18n
使い方
基本的に、
- メッセージを管理
- コンポーネント内で表示
- 言語の切り替え
ができれば多言語に対応したサイトを作れます。
言語ごとのメッセージを管理する
nuxt.config.jsを編集します。
i18n: {
vueI18n: {
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
},
es: {
welcome: 'Bienvenido'
}
}
}
}
ただ、nuxt.config.jsを編集する方法だと、メッセージが多くなってきたときにファイルが肥大化してしまいます。
下の方法だと言語ファイルを分けることができます。
nuxt.config.js
i18n: {
langDir: 'i18n/'
}
i18n/en-US.js
module.exports = {
hello: 'hello!!'
}
例だとプロジェクト直下にi18nというディレクトリを作る必要があります。
メッセージを取得する
i18n/en-US.jsで設定したhelloを取得してみます。
<template>
<div>
{{ $t('hello') }}
</div>
</template>
現在の言語を取得する
現在の言語を取得するにはこのように書きます。
this.$i18n.locale
言語を変更する
言語を切り替えるボタンなどで使います。
this.$i18n.locale = 'en'
多言語対応したリンクを生成する
@nuxt/i18nでは同じページでも現在の言語によってURLが変わります。
なのでnuxt-linkタグを使って現在の言語に合わせたパスを生成します。
<nuxt-link :to="localePath('/')">{{ $t('home') }}</nuxt-link>
javascriptで画面遷移します。
this.$router.push(this.localeRoute({ name: 'example' }))
this.$router.push(this.localeRoute({ path: `/example/${this.exampleValue}` }))
さいごに
誰がの役に立てば幸いです。
