BLOG

ブログ
CATEGORY

【Nuxt.js】多言語化対応におすすめのプラグインnuxt-i18nの使い方

Nuxtにどっぷりのタロウです。
今回はNuxtで多言語化をしよう！をテーマに書きたいと思います。

多言語化って？

ECサイトや一般企業サイトで、日本語/英語/etc…の言語を切り替えるような、グローバルな対応です。
サイトをグローバル化することは強みの1つになるので、国外にも展開していくようなサイトはぜひ行いたいですね！
(中には20ヵ国以上の言語に対応しているサイトもあります。)

多言語化の方法には下記方法があります。
・プラグインを使用してスマートに実装する(※今回はこちらを紹介)
・ブラウザの翻訳機能を使う
・ソースを言語ごとに書く

せっかく便利なプラグインがあるので活用しましょう！

完成形

手順

  • プラグインを入れよう
  • 必要な動作環境を整えよう(コピペでOK)
  • 言語ファイルを作成しよう

基本的にはコピペでOKです！
ポチポチ進めると出来てしまいます。

プラグインを入れよう

Nuxt.jsには多言語化を楽にする優秀なプラグイン「nuxt-i18n」があります。
npmインストールでいれましょう！

npm install nuxt-i18n --save

すぐ終わります。

必要な動作環境を整えよう

動作環境を整えるためにconfigファイルに少し手を加えます。
modulesにnuxt-i18nの設定を追加します。


  modules: [
    [
      'nuxt-i18n',
      {
        strategy: 'prefix_and_default',
        // 切り替える言語を定義
        locales: [
          { code: 'ja', iso: 'ja_JP', file: 'ja.json' },
          { code: 'en', iso: 'en-US', file: 'en.json' },
        ],
        // デフォルトの言語を↑で定義したcodeで記載
        defaultLocale: 'ja',
        vueI18n: {
          // ファイルが読めなかった場合の言語を定義
          fallbackLocale: 'en',
        },
        vueI18nLoader: true,
        lazy: true,
        // 言語ファイル(.json)のディレクトリを記載
        langDir: 'locales/',
      },
    ],
  ],

基本的な設定は以上になります！5分もかかりません！

言語ファイルを作成しよう

日本語ファイルを準備します。

{
  "message": "日本語だよ！"
}

英語ファイルを準備します。

{
  "message": "is English!"
}

言語を切り替えると、ここのファイルで定義した文字が出力されます。
また、json形式であれば入れ子構造でも参照できるので、数が増えてもきれいに整理できます。

実装例

<template>
  <section class="container">
    <div>
      <h1 class="title">
      Nuxt i18n
      </h1>
      <div>
        <h2>現在の言語：{{ $i18n.locale }}</h2>
      </div>
      <div>
        {{ $t('message') }}
        <div>
          <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
        </div>
        <div>
          <nuxt-link :to="switchLocalePath('ja')">japanese</nuxt-link>
        </div>
      </div>
    </div>
  </section>
</template>

11行目の$tでjsonで定義したキーを指定します。
この1行だけで言語が切り替わっても良しなにファイル内の文字を出力してくれます。

ここからは機能の実装例を紹介します！

言語を切り替える

英語と日本語を切り替えるリンクが出来上がります。
switchLocalePathに表示させたい言語のCode(nuxt.config.jsに設定したCode)を指定することで、
言語切替が可能になります。

// 英語に切替
<div><nuxt-link :to="switchLocalePath('en')">English</nuxt-link></div>
// 日本語に切替
<div><nuxt-link :to="switchLocalePath('ja')">japanese</nuxt-link></div>

現在設定されている言語を取得する

<div>{{ $i18n.locale }}</div>

他にもcookieに設定値を持たせることやルーティングの設定ができますが、
↑で記載した内容でだいたいの流れはつかめると思います！

言語設定をそのままで画面遷移する

<nuxt-link :to="localePath('page1')">{{ $t('message') }}</nuxt-link>

localtePathでページIDを指定することで適切なURLを取得することができます。
指定するページIDは以下のように設定します。

pages
– page1
— index.vue		指定するページID : page1
pages
– page1
— index.vue
— complete.vue		指定するページID : page1-complete

index.vueの場合はディレクトリ名、index.vue以外の場合はハイフンで区切ってファイル名を設定します。

まとめ

こんな便利に実装できる時代になったんだ・・と感じました。
気軽に多言語化ができるので、ハードルはかなり低いと思います！
(細かい設定はこれから勉強して随時更新していきます。)

以上、多言語化のご紹介でした！

RELATED ARTICLE

RANKING

BACK NUMBER
CATEGORY