I can't set i18n.locale in the javascript part of an inertiajs app-CodePudding

I want to use vue-i18n (version 9.1) in an interiajs app (laravel9 vue3). Since I need to do several things when switching languages, I need to outsource setting the i18n locale in the javascript part. Unfortunately, this does not work:

I have already tried using $i18n.locale or this.$i18n.locale, without success (Error-message: this.$i18n / $i18n is not defined).
I am missing a hint how to set $i18n.locale in the javascript.

Here is my code:
app.js setup of i18n

require('./bootstrap');

import { createApp, h } from 'vue';
import { createI18n } from 'vue-i18n'
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const i18n = createI18n({
            locale: "de",
            // locale: props.initialPage.props.locale, // user locale by props
            fallbackLocale: "en", // set fallback locale
            messages: loadLocaleMessages(),
        });

        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Authenticated.vue switch locale

<script setup>
import {ref, onMounted} from 'vue';
import BreezeDropdown from '@/Components/Dropdown.vue';
import BreezeNavLink from '@/Components/NavLink.vue';
import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
import ProjectVersion from '@/Components/ProjectVersion.vue';
import {Link} from '@inertiajs/inertia-vue3';
import { usePage } from '@inertiajs/inertia-vue3';
import { computed } from 'vue';

function switchLanguage(key){
    console.log('switchLanguage to '   key);
    this.$i18n.locale = key; // not working
}
</script>

<template>
<div v-if="$i18n.locale == 'en'">
  <a @click.prevent="switchLanguage('de')" href="#">
     Deutsch
  </a>
</div>
<div v-if="$i18n.locale == 'de'">
  <a @click.prevent="switchLanguage('en')" href="#">
     English
  </a>
</div>
</template>

I am happy about every hint.

CodePudding user response：

In fact, this would not work in the way you're using it, since it's not a reference to the component instance inside that function. The composition API docs for i18n even says that we need "to replace access to this"

I haven't tried it, but I believe this would look something like this:

<script setup>
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n({
   locale: 'en',
   messages: {
      en: {
         // ...
      },
      de: {
         // ...
      }
   }
})

const switchLanguage = (key) => {
   locale.value = key
}
</script>