翻訳ファイルが１つのファイルで収まるくらいのボリュームなら
Vue.jsではじめる多言語対応 – Qiita
言語ファイルを分けたい場合は、
Vue.jsをi18nで多言語対応（言語別ファイル版） – Qiita
言語ファイルをJSONでまとめたい場合は、
Vue i18n – How to create multilingual Vue.js applications! » webdeasy.de
といくつかのページを参考にして、最終的に実装した内容が下記。
・firebaseのエラーメッセージの翻訳を作りたかった
・日本語の翻訳がない時は英語でそのまま表示したい
を満たせて満足。
忘れないうちにメモ。
コード内容
ファイル構成
/src/lib/lang/index.js
import en from './translations/en'
import jp from './translations/jp'
// jsonを結合する
var data = Object.assign(en, jp)
export { data }/src/lang/translations/ja.json
{ "ja": { "Home": { "title": "俺のページ" }, "You must enter all fields":"全てのフィールドに入力してください。" }
}main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import { data } from '@/lib/lang/index.js'
const i18n = new VueI18n({ locale: 'ja', // デフォルト言語設定 fallbackLocale: 'en', // 選択中の言語に対応する文字列が存在しない場合はこの言語の文字列を使用する messages: data
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ i18n: i18n, el: '#app', router, components: { App }, template: '<App/>'
})Sample.vue（サンプルファイル）
<template>内で{{$t(msg)}}というようにして、
this.feedback=”You must enter all fields”という英語メッセージに翻訳がある時に無事に表示されるようにできました！
{{$t(“Home.title”)}}でも言語ファイルを指定して表示できますが、en.json,jp.json両方で用意できてなくていちいち対応するのも面倒そうなので、今回のように後から日本語を付け足してく感じにできて良かった。
ちなみに、
vue@2.6.10
vue-i18n@8.15.1
Vue.jsはAngularやReactよりシンプルな感じでわかりやすくていいですね。
