Vue-i18n: Use $t function outside template

Created on 21 Dec 2015  路  8Comments  路  Source: kazupon/vue-i18n

Hi,

I'm trying to do simple alert( $t('error') ) in my JavaScript file but $t is undefined.
I've also tried Vue.$t but it is also undefined.

Is there any way to use the $t function outside a template ?

Thank you,
clem.

Most helpful comment

arronjpitts question is still valid, how do i translate text in components? and why is this closed?

All 8 comments

It works with vm.$t.

How can I use $t outside of a Vue component, for example in a service class which retrieves data from an API and sets strings? Another example is how could I also use it in my main init file where I set global things such as custom validator messages as below:

let required = Vue.validator('required');
Vue.validator('required', {
  message: function (field) {
    return 'This is a required field.'
  },
  check: required,
})

How could I use $t to translate the message above?

Thanks

arronjpitts question is still valid, how do i translate text in components? and why is this closed?

Seconded

You can access translator globally like this:

import Vue from 'vue'

Vue.t('your.translation')

I cannot use the Vue.t function on a single file component. The method is undefined.. Is there something more that I have to include at the <script> section?

I figured it out like this comment at issue #149

This approach works for me like a charm - I use this statement inside a store action:

this.app.i18n.t("example.message.key")

Found in the Vue forum here: https://forum.vuejs.org/t/how-to-use-t-from-vue-i18n-inside-vuex-action/22146/3

Was this page helpful?
0 / 5 - 0 ratings