Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

準備

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

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';

終わりに

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

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

ではでは。

参考

http://kazupon.github.io/vue-i18n/installation.html#compatibility-note

reon777
ITフリーランス。20代後半。 2児のパパ。 新卒から数年間東京の証券系SIerで働いてましたが、2018年5月から福岡(北九州市)にUターンしました。 仮想通貨の自動売買bot運用してます。 株の自動売買に興味あり。すぐ忘れるのでこまめに色々アウトプットしていきたい。 Twitterアカウント:@reo3313
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away