作成日: 2022.10.25

laravel + vue3 の環境で多言語化(i18n)

基本的にはVue3での多言語化だが、Laravelと組み合わせているとディレクトリ構成がわけわかめになるので記す。

i18n のインストール

多言語化には i18n を使うのでインストールする。

npm install vue-i18n@next

Laravelの言語設定を確認する

デフォルトの言語とか、./config/app.php で設定しているので、日本語を主とするなら以下を変えておく。

    'locale' => 'ja',

    'fallback_locale' => 'ja',

メッセージファイルを作成する

多言語化したいメッセージを書き出す。名前はなんでもよいのでmessages.jsとする。
このファイルはどこにおいてもよいが、./resources/js/lang/配下に置いたものとする。

messages.js

export default {
    ja: {
        hello: 'こーんにーちわーーーー！うるせぇよ'
    },
    en: {
        hello: 'Hello!'
    }
}

このように記載しておくとコンポーネントの中で、{{ $t('hello') }} という感じで使える。
別にjaとenが常に同じ項目を持つ必要はないが当然だが言語設定を変えたときにおかしくなるで合わせておく。

あと階層化もできる。

export default {
    ja: {
        login: {
            hello: 'こーんにーちわーーーー！うるせぇよ'
        }
    },
    en: {
        login: {
            hello: 'Hello!'
        }
    }
}

という感じにしとくと、{{ $t('login.hello') }} という感じで使える。

app.jsでi18nを使う設定をする

./resources/js/app.js の createApp の所に i18n を使う処理を追加する。

import { createApp }        from "vue";
import { createI18n }       from "vue-i18n";
import App                  from "./App.vue";
import router               from "./router";

import messages from './lang/messages.js'
const i18n = createI18n({
    locale: 'ja',
    messages,
});

createApp({}).component("App", App).use(i18n).use(router).mount("#app");

各自の環境でいろいろ違うとは思うが(vue-router使ってない、とか、#appじゃないとか)大体わかるよね、的な感じ。

ここまですればあとはコンポーネントに{{ $t('hello') }}とか書けば表示できる。
当然helloはただの文字列なので変数にしてscript内で切り替えたりもできる。
例えばhogeという変数に this.hoge = 'hello'; と入れれば、{{ $t(this.hoge) }} と {{ $t('hello') }} は同義となる。

スクリプト内で直接 $t() 関数を使いたい場合は、 this.$t() と thisつけてあげないといけないので注意！

言語の切り替え

コンポーネント内のscriptで以下のようにすれば切り替えられる。

i18n.global.locale = 'en';

いきなり出てきたi18nはapp.jsでuseしたi18n。なので変数名違ったら動かないので注意。

以上！

---

---

---

---