t8.dev

🇺🇸

【サンプル有】@nuxt/i18nで多言語対応する

公開日:2021/08/20
更新日:

@nuxt/i18nとは?

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

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}` }))

さいごに

誰がの役に立てば幸いです。

関連記事

Nuxt3にBridgeを使って移行してみる【Nuxt2→3】
【サンプル有】@nuxt/contentを1ページでざっくり理解する
【Nuxt】create-nuxt-appをインストールして始める
NUXTの開発環境をVSCodeとDockerで作る
【サンプル有】Nuxtでhead内にmetaタグを出力する2つの方法
NUXTで作ったWebサイトの表示速度を高速化する

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】