はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は、LaraveとInertia、Vue.jsを使って、日本語、英語、中国語の3言語がボタンでクリックで切り替えができる機能を作成しようと思います。

vue-i18n をインストールする

多言語化対応に必要なvue-i18nをインストールします。
公式サイトは以下URLです。

下記のコマンドでインストールします。

npm install vue-i18n@9

言語ファイルの作成

resources/js/langフォルダを作成し、その配下にmessage.jsファイルを作成します。
ファイルの中身は以下のようにします。

message.js

export default {
    ja: {
        hello: 'こんにちは'
    },
    en: {
        hello: 'Hello!'
    }
    zh: {
        hello: "欢迎",
    },
}

こうすると、Vue側で{{ $t('hello') }}という感じで表示できるようになります。
Vueで表示できるように各ファイルを修正します。

app.js

import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { createApp, h } from "vue";
import { createI18n } from "vue-i18n";　　　//←　追加
import "../css/app.css";
import "./bootstrap";
import messages from "./lang/messages.js";   //←　追加
const i18n = createI18n({    //←　追加
    locale: __locale,        //←　追加
    messages,                //←　追加
});

createInertiaApp({
    resolve: (name) =>
        resolvePageComponent(
            `./pages/${name}.vue`,
            import.meta.glob("./pages/**/*.vue")
        ),
    setup({ el, App, props }) {
        return createApp({ render: () => h(App, props) })
            .use(i18n)     //←　追加
            .mixin({ methods: { route } })
            .mount(el);
    },
});

現在の言語が何かを__localeに保存しています。

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    @vite('resources/js/app.js') @inertiaHead  @routes
    <script>    　　　　　　　　　　　　　　　　　　　　//←　追加
        var __locale = '{{ app()->getLocale() }}'    //←　追加
    </script>    　　　　　　　　　　　　　　　　　　　　//←　追加
  </head>

  <body class="font-sans antialiased">
    @inertia
  </body>
</html>

これで、{{ $t('hello') }}をVue側で書くと表示されるようになりました。
ボタンを押して言語を切り替えられるようにします。
まずは、Vue側に切り替えのボタンを用意する。今回は、3言語なので3つボタンを作成しました。

<div>
    <a v-bind:href="route('lang.change', 'en')">
        <div class="">英語</div>
    </a>
</div>
<div>
    <a v-bind:href="route('lang.change', 'ja')">
        <div class="">日本語</div>
    </a>
</div>
<div>
    <a v-bind:href="route('lang.change', 'zh')">
        <div class="">中国語</div>
    </a>
</div>

次にroute('lang.change')を作成していきます。

routes/web.phpに言語変更をするための処理を作成するために、以下を追記します。

Route::get('/greeting/{locale}', function($locale) {
  　session()->put('locale', $locale);
  　return redirect()->back();
})->name('lang.change');

session()->put('locale', $locale);で言語を切り替え、return redirect()->back();でもとのURLにリダイレクトするようにします。

これでボタンを押したときに言語を切り替えることができるようになりました。

おわりに

やり方が違ったり、もっといいやり方、認識が間違っているよというようなことをお気づきの方は、はコメントしていただけると幸いです。

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

参考文献

https://jitaku.work/it/category/web-development/vue3-laravel/multilanguage/
https://zenn.dev/blancpanda/articles/jetstream-vue-i18n

LaravelとInertia(Vue3)で多言語化対応

はじめに

vue-i18n をインストールする

言語ファイルの作成

おわりに

参考文献