Vue 3 - Access value of locale in components in order to send to backend API

[jordan-kaxig]

In my components, I need to access the current value of the locale variable, in order to send it to the backend so that response messages from the backend are returned in the correct language.

I've tried to access i18.locale and i18n.global.locale but of course VS Code says 'i18n' is not defined
All examples i've found is in Vue 2, where they use like this.$root.i18.n... and stuff, and that won't work in Vue 3.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  legacy: false,
  locale: 'en',
})

createApp(App)
  .use(i18n)
  .mount('#app');

[kazupon]

In the component with composition API, you can access the global with useI18n.
About details, please see the docs:
https://vue-i18n.intlify.dev/guide/advanced/composition.html#explicit-with-usei18n

If you need to a global instance like $i18n, you need to run the createI18n with globalInjection: true.

[jordan-kaxig]

Thanks for your answer.

This is how I did it:

// extract from the component file
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t, locale  } = useI18n({});
    console.log('locale', locale.value);
  }
}