VueI18nをscriptタグやJSファイル内で使う方法

なにこれ

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

使い方

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

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

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ファイルなど、どこでも使えるようになります。

<script>
// i18nをインポートしますimport { i18n } from 'i18n.jsの相対パス'
export default {
    /* (中略) */
    methods: {
        getHello() {
            return i18n.tc('message.hello');        }    
    }
    /* (中略) */
}
</script>

以上です🍅