I'm right now doing a frontend interface in vueJS, and i'm currently working with vuejs 3 and i18n. The implementation of i18n works quite fine the normal way but when I want to use it with the position API starts the problems.

So what I did. My main.js looks like this:

const i18n = createI18n({
    messages: {
        en: en,
        fr: fr
    },
    fallbackLocale: 'en',
    locale: localStorage.Language || navigator.language.split('-')[0] || 'en',
})
const app = createApp(App)


app.use(router)
app.use(i18n)

app.mount('#app')

I saw in the documentation to use position API I have to add legacy:false so I did it. Then my $t doesn't work anymore. I go firther in the documentation and arrive at the point I'm lost with. The documentation saiys to use this:

const app = Vue.createApp({
  setup() {
    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
    return { t } // return render context that included `t`
  }
})

My problem is that my createApp is already used like this:

const app = createApp(App)

which is the default implementation by Vuejs. I tried to modify it adding the setup after App, before, removing App nothing works and I think I do more and more stupid things.

Does anyone has an idea how to make i18n works with the position API? The final objective is basically in a ponent switchLanguage made with position API to have access to $i18n (to get some informations and manage my language switch)

Thanks in advance for the help you can provide.

I'm right now doing a frontend interface in vueJS, and i'm currently working with vuejs 3 and i18n. The implementation of i18n works quite fine the normal way but when I want to use it with the position API starts the problems.

So what I did. My main.js looks like this:

const i18n = createI18n({
    messages: {
        en: en,
        fr: fr
    },
    fallbackLocale: 'en',
    locale: localStorage.Language || navigator.language.split('-')[0] || 'en',
})
const app = createApp(App)


app.use(router)
app.use(i18n)

app.mount('#app')

I saw in the documentation to use position API I have to add legacy:false so I did it. Then my $t doesn't work anymore. I go firther in the documentation and arrive at the point I'm lost with. The documentation saiys to use this:

const app = Vue.createApp({
  setup() {
    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
    return { t } // return render context that included `t`
  }
})

My problem is that my createApp is already used like this:

const app = createApp(App)

which is the default implementation by Vuejs. I tried to modify it adding the setup after App, before, removing App nothing works and I think I do more and more stupid things.

Does anyone has an idea how to make i18n works with the position API? The final objective is basically in a ponent switchLanguage made with position API to have access to $i18n (to get some informations and manage my language switch)

Thanks in advance for the help you can provide.

• javascript
• vue.js
• internationalization
• vuejs3
• i18next

• Maybe this helps: github./i18next/i18next-http-backend/blob/master/example/vue/… – adrai Commented Mar 15, 2022 at 13:23
• Not really, not sure to fully understand – Tartempion34 Commented Mar 15, 2022 at 13:26
• ahh you’re using VueI18n, your i18next tag confused me – adrai Commented Mar 15, 2022 at 13:29
• is it not the good approach? – Tartempion34 Commented Mar 15, 2022 at 13:29
• Sorry, I don’t know VueI18n – adrai Commented Mar 15, 2022 at 13:30

1 Answer 1

You already instantiated i18n on your app, in main.js. That's the important bit.

The example presented in docs doesn't necessarily have to be done on the instance defined inside createApp. It works in any ponent, as long as you have instantiated i18n on main.(js|ts)

This will work in any ponent (wherever you need t):

import { useI18n } from "vue-i18n";

export default defineComponent({
  setup() {
    const { t } = useI18n();
    // you can now use t('some.text.to.be.translated')
    // t('some.text.to.be.pluralized', { n: 1 }, 1);

    return {
      // expose `t` to <template>:
      t, 
    }
  },
  // if you want it inside any method, puted or hook
  // in case you still use Options API
  puted() {
    someTranslatedText() {
      return useI18n().t('translate.me');
    }
  },
  methods: {
    methodNeedingTranslation() {
      const { t } = useI18n();
      // do stuff with `t`
    }
  }
})

Side note: All $tc (pluralization) functionality has been moved to t.

If you're upgrading an existing app and you don't want to go through templates and replace all instances of $t and $tc with t:

setup: () => ({ 
  $t: useI18n().t
  $tc: useI18n().t 
})

To make $t and $tc available in any ponent's <template>, without having to import + expose them in <script> (or <script setup>):

import App from './App.vue'
import { useI18n } from 'vue-i18n'

const app = createApp(App);
app.config.globalProperties.$t = useI18n().t

• If you still need them in <script>, import from 'vue-i18n', as shown above.
• $tc is no longer used in Vue3. If your templates are ing from Vue2, it would be best to replace all $tc's with $t. Or you could assign useI18n().t to both, if you don't want to touch the templates:

Object.assign(app.config.globalProperties, {
  $t: useI18n().t,
  $tc: useI18n().t
})