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

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

終わりに

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

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

ではでは。

参考

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

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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