[Question] Translate from javascript context

[JapSeyz]

Hi,

I've tried to search around the documentation and the issues here, but to no avail.

Is it still possible to access the translation methods in plain js files?

Beforehand I'd import the i18n instance into my axios setup file and translate any error-messages that came back.

const i18n = createI18n({
    legacy: false,
    globalInjection: false,
    locale: 'da',
    fallbackLocale: 'da',
    messages: {
        da: messages
    }
})

However i18n.t('cars') now seem to throw an error.
I can see that i18n.global.t is a function, but attempting to use that, throws an SyntaxError: Invalid value exception

[kazupon]

Hi!

Is it still possible to access the translation methods in plain js files?

Sorry, I could not understand about plain js files?
Is it mean you want to use javascript, but not Vue Component (SFC)?

However i18n.t('cars') now seem to throw an error.
I can see that i18n.global.t is a function, but attempting to use that, throws an SyntaxError: Invalid value exception

Could you give us some specific information about stacktrace or capture, please?

[JapSeyz]

Sorry, I could not understand about plain js files?
Is it mean you want to use javascript, but not Vue Component (SFC)?

My apologies.

I am attempting to use it like this:

file: axios.js

import _axios from 'axios'
import _each from 'lodash/each'
import { i18n } from './i18n'


_each(data.errors[x], y => {
    const text = y.replace('#attribute', i18n.t(x))
})

In case the attribute that is returned from the API has a localised name, I'd like to translate that before displaying the error to the user.

Chrome stacktrace

Uncaught (in promise) SyntaxError: Invalid value
    at createCompileError (vendor.js?id=7836282c1c020cdcc439:2020)
    at createI18nError (vendor.js?id=7836282c1c020cdcc439:213821)
    at parseValue (vendor.js?id=7836282c1c020cdcc439:215085)
    at bind (vendor.js?id=7836282c1c020cdcc439:215066)
    at callWithErrorHandling (vendor.js?id=7836282c1c020cdcc439:10734)
    at callWithAsyncErrorHandling (vendor.js?id=7836282c1c020cdcc439:10743)
    at invokeDirectiveHook (vendor.js?id=7836282c1c020cdcc439:13521)
    at mountElement (vendor.js?id=7836282c1c020cdcc439:14494)
    at processElement (vendor.js?id=7836282c1c020cdcc439:14445)
    at patch (vendor.js?id=7836282c1c020cdcc439:14365)

[kazupon]

Thank you for your feedback!

You can use tm and rt.
the below example codes:

i18n resources:

{
  "errors": [
    "first error: {number}",
    "second error: {number}"
  ]
}

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

const { global } = createI18n({
  legacy: false, // Composition API
  locale: 'en-US',
  messages: {
    'en-US': enUS
  }
})

global.tm('errors').forEach((err, index) => {
  console.log(global.rt(err, { number: index }))
})
// outputs
//  first error: 1
//  second error: 2

see the about details:

• tm: https://vue-i18n.intlify.dev/api/composition.html#tm-key
• rt: https://vue-i18n.intlify.dev/api/composition.html#rt-message

Thanks!