Search code examples
javascriptvuejs3vue-i18n

Use $t function of i18n in pure js on vue

I´m trying use the $t() function of i18n in a pure JS file on Vue. I separate i18n related codes in main.js and make a .js file, then I import the i18n variable in a pure js file and when I try use a translation show this error TypeError: i18n.t is not a function.
this is my code in i18n.js file

import en from '../locales/en.json'
import es from '../locales/es.json'
import { createI18n } from 'vue-i18n'

const languajes = {
  en: en,
  es: es
}

var i18n = createI18n({
  locale: 'es',
  messages: languajes
});

export default i18n;

and in my pure js file I have this

import i18n from "./i18n";

export default {
...
badge(status){

    switch (status) {
        case 1:
            return  `<span class="badge text-bg-primary">${ i18n.t('modules.clients.status.approved') }</span>`;
            break;
    
        default:
            break;
    }

 }
...
}

how I can use the t() function in my js file?

Solution

  • You re invoking it wrong. The correct way to call the $t() function in the method you showed is i18n.global.t() rather than i18n.t()