diff --git a/frontend/src/App.vue b/frontend/src/App.vue index e999ee6..2da2609 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -65,7 +65,13 @@ export default { MultiChatDialog, }, created() { - this.$i18n.locale = this.$store.getters.language; + const code = this.$store.getters.language; + const loc = this.$i18n.locale; + if (loc && typeof loc === 'object' && 'value' in loc) { + loc.value = code; + } else { + this.$i18n.locale = code; + } }, }; diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue index 835bfb1..c10d11c 100644 --- a/frontend/src/components/AppHeader.vue +++ b/frontend/src/components/AppHeader.vue @@ -20,7 +20,7 @@ @change="onUiLanguageChange($event.target.value)" > @@ -48,11 +48,12 @@ export default { name: 'AppHeader', data() { return { + /** Endonyme: jede Sprache bezeichnet sich in ihrer eigenen Sprache. */ uiLocaleOptions: [ - { value: 'de', labelTr: 'settings.personal.language.de' }, - { value: 'en', labelTr: 'settings.personal.language.en' }, - { value: 'ceb', labelTr: 'settings.personal.language.ceb' }, - { value: 'es', labelTr: 'settings.personal.language.es' }, + { value: 'de', nativeLabel: 'Deutsch' }, + { value: 'en', nativeLabel: 'English' }, + { value: 'ceb', nativeLabel: 'Sinugboanon' }, + { value: 'es', nativeLabel: 'Español' }, ], }; }, @@ -82,6 +83,7 @@ export default { return; } await this.$store.dispatch('setLanguage', code); + this.applyI18nLocale(code); if (!this.isLoggedIn || !this.user?.id) { return; } @@ -107,6 +109,19 @@ export default { console.warn('AppHeader: profile language could not be synced', err); } }, + /** UI sofort auf neue Sprache umstellen, ohne Seiten-Reload (nur reaktives i18n). */ + applyI18nLocale(code) { + const g = this.$i18n; + if (!g) { + return; + } + const loc = g.locale; + if (loc && typeof loc === 'object' && 'value' in loc) { + loc.value = code; + } else { + g.locale = code; + } + }, }, }; diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js index 23ea99e..de46af3 100644 --- a/frontend/src/i18n/index.js +++ b/frontend/src/i18n/index.js @@ -195,11 +195,20 @@ const i18n = createI18n({ messages }); -// Überwache Änderungen der Sprache im Store und aktualisiere i18n entsprechend +function setGlobalLocale(next) { + const loc = i18n.global.locale; + if (loc && typeof loc === 'object' && 'value' in loc) { + loc.value = next; + } else { + i18n.global.locale = next; + } +} + +// Überwache Änderungen der Sprache im Store und aktualisiere i18n (ohne Seiten-Reload) store.watch( (state) => state.language, (newLanguage) => { - i18n.global.locale.value = newLanguage; + setGlobalLocale(newLanguage); } );