Vue.jsをi18nで多言語対応（言語別ファイル版）

準備

ライブラリをインストール

npm install vue-i18n

設定

main.js

// 多言語対応
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import { data } from '@/lib/lang/index.js'
const i18n = new VueI18n({
  locale: 'en', // デフォルト言語設定
  fallbackLocale: 'ja', // 選択中の言語に対応する文字列が存在しない場合はこの言語の文字列を使用する
  messages: data
})

new Vue({
  i18n: i18n,
})

多言語設定

src配下にlib/langフォルダがなければ作る

src/lib/lang/index.js

import en from './TranslationsEN'
import jp from './TranslationsJP'

// jsonを結合する
var data = Object.assign(en, jp)

export { data }

日本語設定ファイル

src/lib/lang/TranslationsJP.js

export default {
  ja: {
    Home: {
      title: '俺のページ'
    }
  }
}

英語用設定ファイル

src/lib/lang/TranslationsEN.js

export default {
  en: {
    Home: {
      title: 'MyPage'
    }
  }
}

グローバル登録しているので各Vueファイルではインポートなど無しでいきなり使える

hoge.vue

<template>
  <div>
   <div{{$t("Home.title")}}</div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

英語に言語変更する場合はJavascriptで以下のようにする

this.$i18n.locale = 'en';

終わりに

多言語設定あるとかっこいいですよね
今回は１言語で１ファイルにしてますが１画面で１ファイルというのもアリかもしれません
っていうか今思ったけどもはや自動でGoogle翻訳とかにかけてくれてリアルタイム翻訳してくれるライブラリとかあると便利なので誰か作ってくれ〜

最近はGoogle翻訳ばかり使って全然英語読んでない。。
Google翻訳便利すぎんよ〜

ではでは。

参考