Vue.jsベースのフレームワーク！ Nuxt.js入門《簡単WEBページの多言語化対応》

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt.jsからライブラリを読み込むだけで、簡単に英語などの多言語化対応を行うことができるnuxt-i18nについてご紹介します。

使用するライブラリ nuxt-i18n

今回は下記ライブラリを使用して説明をしていきます。

Vue.js: 2.6.11
Nuxt.js: 2.12.2
nuxt-i18n: 6.8.1

nuxt-i18nの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

　npm install –save nuxt-i18n

これで対象のプロジェクトに、ライブラリを追加することができました。次に実際のライブラリの使用方法について解説していきます。

nuxt.config.js設定

次に、nuxt.config.jsに設定を追加します。

export default {
  mode: 'universal',
  ・・・・・
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    [
      'nuxt-i18n',
      {
        locales: [
          { code: 'ja', iso: 'ja_JP', file: 'ja.json' },
          { code: 'en', iso: 'en-US', file: 'en.json' }
        ],
        defaultLocale: 'ja',
        vueI18n: {
          fallbackLocale: 'ja'
        },
        vueI18nLoader: true,
        lazy: true,
        langDir: 'language/'
      }
    ]
  ],
  ・・・・・
}

７行目～２３行目：
nuxt-i18nライブラリの使用に必要な記載となります。

１０行目～１３行目：
使用する言語の一覧。
また、使用するJSONファイルの指定を行います。

１４行目：
デフォルトで使用する言語の設定。

１５行目～１７行目：
ファイルが読めなかった場合の言語定義。

１８行目：
vue-i18n-loaderを有効にする

１９行目：
遅延読み込みを有効にする

２０行目：
言語ファイルのJSONファイルを格納したディレクトリを記載

各言語ファイルの準備

次に各言語に対応したファイルを、以下のフォルダに格納します。

jp.json

{
    "message": "日本語表示のテスト"
}

en.json

{
    "message": "Test Japanese display"
}

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
  <div class="samaple__conntents">
    <diV style="margin-top: 20px;">
      <h1>nuxt-i18nプラグインサンプル</h1>
    </diV>
    <diV style="margin-top: 20px;">
      {{ $t('message') }}
    </diV>
    <div>
      <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
    </div>
    <div>
      <nuxt-link :to="switchLocalePath('ja')">japanese</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style>
.samaple__conntents {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

７行目：
表示するメッセージ内容を設定します。
「$t」を使用することで、各言語設定に対応した表示に対応することができます。

１０行目、１３行目：
日本語と英語を切り替える、サンプル用のリンクとなります。