How to use $t in a .js file?

[Guito]

I have a filter.js file in which I store my Vue filters. I now need to translate some of the content, so basically I want to do something like this:

File: filters.js

import Vue from 'vue'

Vue.filter('my-filter', value => {
   return  `${value} ${$t('my-key')}`
});

Is it possible?

_{This question is available on Nuxt.js community (#c79)}

[posva]

You should be able to do call Vue.prototype.$t

[Guito]

@posva Not working :(

[SuperTapir]

You can try this export const $t = sign => Vue.prototype.$nuxt.$options.i18n.t(sign);

[jagroop]

@HelloWorldLKL Thank You

[rchl]

That solution is quite ugly and potentially fragile. This should be slightly better:

import Vue from "vue";

export default ({ app }) => {
  Vue.filter("my-filter", value => `${value} ${app.i18n.t("welcome")}`);
};

But it still relies on somewhat undocumented t function so it's not ideal either.

[andresilva-cc]

That solution is quite ugly and potentially fragile. This should be slightly better:

import Vue from "vue";

export default ({ app }) => {
  Vue.filter("my-filter", value => `${value} ${app.i18n.t("welcome")}`);
};

But it still relies on somewhat undocumented t function so it's not ideal either.

Where does 'app' come from? I'm trying to use nuxt-i18n in a completely separated JS file, it's not inside plugins or anything like that.

[rchl]

The example is a Nuxt plugin so you have Nuxt context there.

vue-i18n (that nuxt-i18n uses) initializes and attaches itself to a Vue instance. It's not meant to be used detached from Vue. So you can experiment with trying to import and initialize vue-i18n but you are on your own there and it probably won't gonna work.

I'd suggest that you use translation keys rather than translated strings in your external JS files and resolve those lazily when you are in a Vue component. It's the only proper way anyway if you want the reactivity to work properly (to have strings update when the user changes site language, for example)

[yamenshahin]

Just use app.i18n.t instead of $t export default ({ app }) => { const someValue = app.i18n.t('translationKey') }

[rchl]

The question was about full external file where there is no access to the Nuxt context.

[Rackar]

An easy way to use in a completely separated JS file:

$nuxt.$t('hello')

[rchl]

An easy way to use in a completely separated JS file:

$nuxt.$t('hello')

That won't work on the server side

[Rackar]

An easy way to use in a completely separated JS file:

$nuxt.$t('hello')

That won't work on the server side

Thanks. So the only way is to write a plugin?

[rchl]

That approach is not compatible with Nuxt. The instance of nuxt-i18n/vue-i18n is created per request. If you are gonna be assigning that instance to some global then you are really working against the Nuxt approach and I wouldn't recommend that.

There almost always exists a solution that will avoid a global like that. Typically it means that you are gonna be passing string IDs around.

[skru]

I followed this tutorial to get nuxt-i18n setup: https://phrase.com/blog/posts/nuxt-js-tutorial-i18n/

Needed to access translations in E2E testing (testcafe) so did this:

import i18n from "../../config/i18n"

console.log("I18N", i18n.messages...)

Is this not an ideal approach?

[rchl]

For tests you can do whatever works. I would just not recommend using anything like that for actual site.

[sanjarbarakayev]

I've used vue-i18n for my Nuxt 3 project.

~/plugins/vue-18n.ts

export let t: (v: string) => string

export default defineNuxtPlugin(async (nuxtApp) => {

  const i18n = createI18n({
    ...
  })

  t = i18n.global.t

  nuxtApp.vueApp.use(i18n)
})

my-js-file.js

import { t } from '~/plugins/vue-18n'

console.log(t('Hello'))

Or you can just use function and pass $t as an argument)

[CodeFoxLk]

This works

useNuxtApp().$i18n.t("label");