What is $t in Vue.js

Question

First time ever working with Vue.js and have no clue what is $t. For instance I have someone's code like this:

 <li class="category-filter__back">    <button      class="category-filter__button"      @click="back(categoryPath)">      {{ $t(backButtonText) }} <<<<<<<< what is this $t?    </button>  </li> 

Can't seem to find any concrete answer for this.

Answer 1

It looks like a function for translations. Maybe that: http://kazupon.github.io/vue-i18n?

Answer 2

$t here should be an extended Vue instance method of Vue I18n.

Here is an example on jsfiddle:

Template

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>  <div id="app">   <!-- string literal -->   <p v-t="'hello'"></p>    <!-- keypath biniding via data -->   <p v-t="path"></p>    <!-- extended Vue instance method -->   <p>{{ $t("wait") }}</p>    <button @click="changeLocale()">     {{ $t("buttonText") }}   </button> </div> 

Script

new Vue({   el: '#app',   i18n: new VueI18n({     locale: 'en',     messages: {       en: { hello: 'hi there', bye: 'see you later', wait: 'just a minute', buttonText: 'Change to Chinese Locale' },       cn: { hello: '你好', bye: '再见', wait: '稍等一下', buttonText: '更改为英文场景' }     }   }),   data: { path: 'bye' },   methods: {     changeLocale() {         this.$i18n.locale = this.$i18n.locale === 'en' ? 'cn' : 'en'     }   } })