【Vue.js】Vue I18nで多言語対応しよう

はじめに

Vueの表示を多言語化対応する作業を行ったので自分用にメモです！

導入とかはすっ飛ばします！🙇
ここ見ればいけるはず↓
https://kazupon.github.io/vue-i18n/started.html

Vue I18nとは？

Vue.js用の多言語化プラグインです！

書き方

各言語ファイル

翻訳先の言語ファイルをこんな感じで用意するよ。

ja.json

"member_panel": {
    "title": "お茶の間メンバー一覧"
}

英語ならen.jsonとかね！

各種コンポーネント

hogehoge.vue

<template>
  <div class="hp">
    <h1>{{$t("member_panel.title")}}</h1>
  </div>
</template>

プレースホルダー等の場合

hogehoge.vue

<page-title
    :title="$t('member_panel.title')"
/>

<script>内でのtextの場合

hogehoge.vue

const labels = [
    { text: instance.proxy.$t('member_panel.title'), value: 'hoge' },
]

$tだったりinstance.proxyがよく分からなかったのでミソですかね...

言語切り替え

nuxtとかだとconfigで設定してたりするので、そっからdefaultを変更しちゃえばテストできます👍

nuxt.config.js

i18n: {
    locales: [
      { code: 'ja', file: 'ja.json' },
      { code: 'en', file: 'en.json' },
    ],
    defaultLocale: 'ja',
}

最後に

いまいち$tメソッドとか理解しきれてないので、また追記したりコメントしていきます。