コンテンツにスキップするには Enter キーを押してください

Nuxt + Laravelのプロジェクトのi18n対応

こんばんは、Fusic吉野です。

この記事は、Fusic Advent Calendar 2018 13日目の記事です。

案件でNuxtjsとLaravelのプロジェクトを進めていく上で、日英対応をしました。

多言語対応は全てバックエンドのLaravel側に任せる、という方法もありますが、

DBの接続がない時には、なるべくサーバー側へのリクエストは避けたいです。

逆にフロントエンド側だけで多言語対応するのも、バリデーションメッセージなどの対応が難しくなります。

そのため、今回は両方からi18nを対応する方法を紹介します。

Nuxt側の設定

まずはNuxtのi18nの設定ですが、基本的にこちらの記事を参考に実装しました。

https://blog.nakamu.life/posts/nuxt-js-i18n/

Nuxt側では

https://samplepath/ja (日本語)

https://samplepath/en (英語)

となります。

また、現在どの言語であるかどうかは、storeに保存されており、

middlewareによって、URLの変更とともにstoreで選択されている言語に変更されます。

各言語の設定は

 ja.json


{
  auth: {
    logIn: ログイン,
    signUp: サインアップ,
    username: 氏名,
    password: パスワード,
    register: 登録,
  }
}

のような形で設定可能です。

Laravel側の設定

Laravel側ではroutesを用いて設定をしました。

routes/api.php


Route::prefix('ja')->group(function ($router) {
  $locale = explode('/', $router->groupStack[1]['prefix'])[1];
    if ($locale === explode('/', request()->path())[1]) {
        App::setLocale($locale);
    }
    Route::group([middleware => api], function () {
      // get, postなどを記述
    });
});
Route::prefix('en')->group(function ($router) {
    $locale = explode('/', $router->groupStack[1]['prefix'])[1];
    if ($locale === explode('/', request()->path())[1]) {
        App::setLocale($locale);
    }
    Route::group([middleware => api], function () {
      // get, postなどを記述
    });
});

これで、

http://samplepath/api/ja 日本語の返り値

http://samplepath/api/en 英語の返り値

を受け取ることが可能です。

各言語の設定は

resourses/ja/messages.php などに以下のように記述することができます。


<?php
return [
  'register_thanks' => '会員登録ありがとうございます。メールをご確認ください。',
  'register_fail' => 'アカウント作成に失敗しました',
  'fail' =>; ':modelの保存に失敗しました',
];

NuxtとLaravelを連携する

Nuxt側でjaの時にはLaravel側もja

Nuxt側でenの時はLaravel側もen

が返ってくるように連携します。

連携といっても簡単ですね。

apiリクエストを送る際のdefaults.baseURLを指定してあげるだけでよいです。

i18nの設定をしているmiddlewareに以下を追加します。

middleware/i18n.js


const locale = params.lang || defaultLocale
axios.defaults.baseURL = process.env.API_BASE_URL+'/api/'+locale // 追記

これでAPIリクエストを送る際は


axios.post('/login', data)
  .then(apiSuccess)
  .catch(apiError),

このように書くだけでURLを指定することができます。

以上、Nuxt+Laravelのプロジェクトでのi18n対応でした。

両方の言語の設定ファイルを記述する必要があるのは、若干手間ですが、

NuxtのUXの良さを考えると、別々で設定するメリットはあるかなと思います。

最後まで読んでいただき、ありがとうございました。

Fusicエンジニア。Webアプリケーションやブロックチェーンプログラミングをしています。PHP, Vue.js, Solidity etc..

コメントする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です