Vue.js3の多言語化
Vue3でエラーメッセージなどをファイルで管理するためにi18nで多言語対応をしてみました。
i18nのインストールと設定
ターミナルでnpmからi18nをインストールします。
npm install vue-i18n@next
言語ファイルの作成
srcディレクトリ直下にlanguageというディレクトリを作成し、そこに言語ファイルを作ります。
今回は英語用のファイルは作りませんが、日本語と英語で切り替えたい場合はen.jsも作ります。
language
├─index.js
└─ja.js
ja.jsに以下のように記載します。
export default {
label: {
hello: 'こんにちは'
}
}
次にlanguage/index.jsに次のように記載します。
import { createI18n } from 'vue-i18n'
import ja from './ja'
const i18n = createI18n({
locale: 'ja', // デフォルト値
messages: {
ja // 参照する言語ファイル
}
})
最後にmain.jsに以下のように記載します。
import i18n from './language'
createApp(App).use(i18n).mount('#app')
vueファイルからの参照
画面で使う場合は次のように記述します。
{{ $t("label.hello") }}
ブラウザで画面を開き、「こんにちは」と記載されていれば読み込み成功です。
スクリプト内で参照する場合は、thisをつけます。
this.label = this.$t("label.hello")