vue-i18n-in-script-tag

なにこれ

VueI18nはVue.jsの多言語対応ライブラリです。vueファイルのtemplateタグでは、<p>{{$t('message.hello')}}</p>のように使います。ただvueファイルのscriptタグや、他のJavaScriptファイルでの使い方ガイドに明記されていません。今回はそのやり方についてご紹介します。

使い方

GitHubのIssueに答えが載っています。


まずVueI18nを以下のように定義します。

i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: 'ja',
  messages,
});

vueファイルのscriptタグでは以下のようにします。 VueI18nオブジェクトのtcメソッドを使います。 こうすることでvueファイルのscriptやJavaScriptファイルなど、どこでも使えるようになります。

vueファイルのscriptタグ
<script>
// i18nをインポートします
import { i18n } from 'i18n.jsの相対パス'

export default {
    /* (中略) */
    methods: {
        getHello() {
            return i18n.tc('message.hello');
        }    
    }
    /* (中略) */
}
</script>

以上です🍅