Webサイトを多言語化するにあたり、ネット検索すると、Vue2での情報が多い。
今回は、Vue3で使える多言語化プラグインを探してみました。
Vue I18n
Vue3に対応していて、GitHubのスター数が多い多言語化プラグインとして「Vue I18n」が見つかりました。
使い方が丁寧に書かれていて、使いやすそうな多言語化プラグインです。
インストール
インストール環境
今回は、以下の環境に「Vue I18n」をインストールしました。
| ソフトウェア | バージョン |
|---|---|
| PHP | 8.2.6 |
| Laravel | 10.13.5 |
| Vue.js | 3.2.37 |
インストール手順
「Vue I18n」のインストール手順です。
npm install vue-i18n@9Laravelのプロジェクトで「Vue I18n」を使えるようにします。
/resources/js/app.js を編集します。
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import { createI18n } from 'vue-i18n';
import ja from '/lang/ja/i18n_ja.json';
import en from '/lang/en/i18n_en.json';
const i18n = createI18n({
locale: 'ja', // ★言語を指定
fallbackLocale: 'en',
messages: {
ja : ja,
en : en
}
});
app.use(i18n);
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
app.mount('#app');
多言語化
多言語化するには、以下のようなコードを書けばOKです。
/resources/js/components/ExampleComponent.vue を編集しています。
<template>
<div class="m-5">
<h1>{{$t("Hello")}}</h1>
<h1>{{text}}</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
this.text = this.$t('World');
},
data() {
return {
text: ''
}
},
}
</script>ExampleComponent.vue を View から呼び出します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue I18n</title>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>ビルドします。
npm run buildサイトにアクセスした結果、日本語で表示されました！
app.jsの「locale」に指定した言語で表示されるようになりました。
用語を定義した各言語のJSONファイルを切り替えることで、Webサイトの多言語化ができました。Vue3で多言語化したい場合、「Vue I18n」を採用してみてはどうでしょうか。
コメント