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

Nuxt側の設定

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

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

blog.nakamu.life

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の良さを考えると、別々で設定するメリットはあるかなと思います。

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