38

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.

1
  • 2
    Vuex is a state management pattern for vue.js.$t is the injected method from vue.js or Vue.i18n.
    – yoonghm
    Sep 24, 2018 at 11:28

2 Answers 2

44

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

16

$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'
    }
  }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.