How to use vue-i18n@9 in the global scope (outside of the setup and outside of the vue component)?

[Kasheftin]

It works just fine in i18n@8: you can create a file like @/i18n:

export default new VueI18n({
   locale: localStorage.getItem(..) || 'en',
   messages: require('@/lang/messages.json'),
   ...
})
Vue.use(VueI18n)

and then just use it no matter where. For example, in main.ts:

import i18n from '@/i18n'
import Config from '..'

async function bootstrap() {
  try {
    const config = await Config.load()
    new Vue(...).mount('#app')
  } catch (error) {
    console.log(i18n.t('generalError'))
  }
}
bootstrap()

It works even without Vue instance defined!
We need to have the same behavior in Vue3. There're a lot of Navigator/Logger/Config/SubscriptionManager/VersionManager etc things defined globally. If I try to

import { useI18n } from 'vue-i18n'
const i18n = useI18n()
console.log(i18n.t('generalError'))

it does not work, Must be called at the top of a setup function.

[Kasheftin]

One more use case is from pinia/vuex store. Imagine there's an action, it fails, some error should appear, it has to be translated. What is the correct way to import vue-18n-next and where to take t function from?

[Kasheftin]

Is it possible to downgrade and use i18n@8 with vue3?

[HittiGubbi]

The following pattern seems to work at least with Vue 3.2.13 and Vue I18n 9.2.0-beta.35. The main.js file imports an I18n instance and provides the same instance both to Vue and as an export. Other code can then import the same i18n from main.js.

In main.js:

import { createApp } from 'vue';
import MyApp from './MyApp.vue';
import i18n from './i18n';

const myApp = createApp(MyApp).use(i18n);
myApp.mount('#app');

export { i18n };

In someOther.js:

import { i18n } from './main';

let msg = i18n.global.t("my.message.key");

[Haythamasalama]

it's work with me THX ❤️

[Haythamasalama]

it's work with me THX ❤️