Composition API: Access i18n local in vue-router

[gagarine]

I need to access the current local in my vue-router.

I'm creating vue-i18n like that

// i18n.plugin.js
import { createI18n } from 'vue-i18n'
import de from '../locales/de'
import en from '../locales/en'
import it from '../locales/it'
import fr from '../locales/fr'
import { defaultLocale } from '../../config/i18n';

export const i18n = createI18n({
  // you must set legacy `false`, to use Composition API
  legacy: false, 
  // Inject i18n property into component 
  // https://vue-i18n-next.intlify.dev/guide/advanced/composition.html#implicit-with-injected-properties-and-functions
  globalInjection: true, 
  locale: defaultLocale,
  fallbackLocale: defaultLocale,
  messages: { de, en, it, fr },
})

Before I had access to the current local using i18n.global.locale but this doesn't work anymore

//router/index.js

import { createWebHistory, createRouter } from "vue-router";
import { i18n } from '../plugins/i18n.plugin';

// use meta: { requiresAuth: true } to require a logged in user
const routes = [
  {
    path: '/',
    redirect: `/${i18n.global.locale}`
  },
  {
    path: '/:locale',
    component: LocaleRoute,
    children: [
      { path: '404', component: NotFound },
      {
        path: "",
        redirect: `/${i18n.global.locale}/registration`,
      },
      {
....

const router = createRouter({
  history: createWebHistory(),
  routes,
   // Scroll on top the page on route change
   scrollBehavior() {
    document.getElementById('app').scrollIntoView();
  },
});

[gagarine]

The i18n.global.locale and i18n.global.fallbackLocale seem to be reactive property similar that when you use ref() in your setup function. Therefor you need to add .value to access their value.

import { i18n } from '../plugins/i18n.plugin';

const currentLang = i18n.global.locale.value
const fallbackLocale = i18n.global.fallbackLocale.value

// use meta: { requiresAuth: true } to require a logged in user
const routes = [
  {
    path: '/',
    redirect: `/${currentLang}`
  },
  {
    path: '/:locale',
    component: LocaleRoute,