AMG Solution

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

feels

こんにちは、樋口です。
 
今回は、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に設定を追加します。

7行目~23行目:
nuxt-i18nライブラリの使用に必要な記載となります。
 
10行目~13行目:
使用する言語の一覧。
また、使用するJSONファイルの指定を行います。
 
14行目:
デフォルトで使用する言語の設定。
 
15行目~17行目:
ファイルが読めなかった場合の言語定義。
 
18行目:
vue-i18n-loaderを有効にする
 
19行目:
遅延読み込みを有効にする
 
20行目:
言語ファイルのJSONファイルを格納したディレクトリを記載

各言語ファイルの準備

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

 sample-project
   |- .nuxt
   |- assets
   |- components
   |- layouts
   |- middleware
   |- node_modules
   |- pages
     |- test
       |- index.vue ← 今回作成Vueファイル
   |- plugins
   |- static
   |- language ← 今回追加フォルダ
     |- en.json
     |- jp.json
   |- store
   |- .editorconfig
   |- .eslintrc.js
   |- .gitignore
   |- .prettierrc
   |- nuxt.config.js
   |- package.json
   |- package-lock.json
   |- README.md
   |- stylelint.config.js

 
jp.json

en.json

Vueファイル

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

7行目:
表示するメッセージ内容を設定します。
「$t」を使用することで、各言語設定に対応した表示に対応することができます。
 
10行目、13行目:
日本語と英語を切り替える、サンプル用のリンクとなります。

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単に多言語対応を行うことが可能となります。今後多言語対応のページ作る際は、ぜひ試してみてください。
 
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

feels

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

日報で業務改善
はじめました。
LOADING