Masashi Ishikawa's portfolio

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

2019/02/20
Vue.js

なにこれ

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>

以上です🍅

  • なにこれ
  • 使い方
  • このエントリーをはてなブックマークに追加

←前の記事

thumbnail

関連記事

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail

最近の記事

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
記事一覧