Problem to use VueI18n outside a component

Question

I'm trying to use i18n outside a component I've found this solution https://github.com/dkfbasel/vuex-i18n/issues/16 telling to use Vue.i18n.translate('str'), but when I call this occurs an error Cannot read property 'translate' of undefined.

I'm using the following configuration

main.js

import i18n from './i18n/i18n';
new Vue({
    router,
    store,
    i18n: i18n,
    render: h => h(App)
}).$mount('#app')

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import i18nData from './i18nData'
Vue.use(VueI18n);
export default new VueI18n({
  locale: 'en',
  messages: i18nData,
});

i18nData.js

export default {
    en: {
        //my messages
    }
}

Then I trying to use this

import Vue from 'vue';
Vue.i18n.translate('someMessage');

Can anyone help me?

using like this Vue.$i18n.translate() same error. Cannot read property 'translate' of undefined — Alexandre Heinen, Jul 16 '19 at 03:09
The previous [answer](https://stackoverflow.com/a/61679916/18450927) from @Timm actually worked for me — Stefan Francis, Oct 31 '22 at 07:19

dtk · Accepted Answer · 2021-04-06T13:19:46.903

50

To use i18n with Vue 3's composition API, but outside a component's setup(), you can access its translation API (such as the t function) on its global property.

E. g. in a file with unit-testable composition functions:

// i18n/index.js

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

  ...

export default createI18n({
  datetimeFormats: {en: {...}},
  locale: 'en',
  messages: { en }
})

// features/utils.js

//import { useI18n } from 'vue-i18n'
//const { t } = useI18n() // Uncaught SyntaxError: Must be called at the top of a `setup` function

import i18n from '../i18n'

const { t } = i18n.global

edited Apr 06 '21 at 13:19

answered Mar 18 '21 at 16:19

dtk

2,197
2
26
19

3

This example do **not** use composition API mode of vue-i18n. For that you need createI18n({ legacy: false; }) – gagarine Jul 14 '21 at 21:17
1

@gagarine Is your comment about initialization only? can you provide better example? – lucaste Aug 01 '21 at 06:28

score 14 · Answer 2 · answered Jul 16 '19 at 03:13

14

You should import i18n instead of Vue

import i18n from './i18n'

i18n.tc('someMessage')

answered Jul 16 '19 at 03:13

ittus

21,730
5
57
57

This worked, but in case the language was changed I need to apply on the instance of VueI18n, right? – Alexandre Heinen Jul 16 '19 at 03:20
It is automatically applied if your component is reactive. – ittus Jul 16 '19 at 03:31
Thanks, I'm starting with Vue, what I need to do to make the component reactive in this case? – Alexandre Heinen Jul 16 '19 at 13:25
It depends on the case. Most of the time I change locale by using `i18n.locale = 'en'` (or `this.$i18n.locale = 'en'` in Vue component). It should work. – ittus Jul 16 '19 at 13:32
Thanks, I'll try this. – Alexandre Heinen Jul 16 '19 at 19:28
When i try this I get "TS2589: Type instantiation is excessively deep and possibly infinite." It works but how can i clear this warning? – Link19 Feb 24 '23 at 13:49

score 8 · Answer 3 · edited Feb 09 '23 at 05:30

8

You can use VueI18n outside components by importing i18n then, use "t" from i18n.global.

"t" doesn't need "$" and you can change Locale with i18n.global.locale.

import i18n from '../i18n';

const { t } = i18n.global;

i18n.global.locale = 'en-US'; // Change "Locale"

const data = { 
  name: t('name'), // "t" doesn't need "$"
  description: t('description'), // "t" doesn't need "$"
};

edited Feb 09 '23 at 05:30

sideshowbarker

81,827
26
193
197

answered Sep 26 '21 at 09:20

Super Kai - Kazuya Ito

22,221
10
124
129

1

Alas, `Property 'global' does not exist on type 'typeof import("x/node_modules/vue-i18n/dist/vue-i18n")'.ts(2339)` – Lee Goddard Aug 12 '22 at 11:09

score 2 · Answer 4 · answered May 08 '20 at 13:07

2

I managed to make it work this way:

import router from '../router';

Translate a text:

let translatedMessage = router.app.$t('someMessage');

Get the current language:

let language = router.app.$i18n.locale;

answered May 08 '20 at 13:07

Timm

31
4

Problem to use VueI18n outside a component

4 Answers4

Linked