Files
mobilizon-frontend/src/views/About/TermsView.vue
Massedil 2fa54e8282 fix: components not updating correctly when changing language
The issue was caused by incorrect handling of the `i18n.global.locale` value in the Composition API.

When using `createI18n` with `legacy: false`, `i18n.global.locale` is a reactive ref.
Assigning directly with `i18n.global.locale = lang;` breaks reactivity.

The correct usage is : `i18n.global.locale.value = lang;`.

However, this assignment was unnecessary because the value is already updated automatically when the language changes.

All scripts using `const { locale } = useI18n({ useScope: "global" });` are updated to use `locale.value` instead of just `locale`, to ensure correct reactive behavior.

Fixes: #1597, #1772, and possibly other related issues.
2025-06-10 22:45:53 +02:00

54 lines
1.2 KiB
Vue

<template>
<div class="container mx-auto px-2">
<h1>{{ t("Terms") }}</h1>
<o-loading v-model="termsLoading" />
<div
class="prose dark:prose-invert"
v-if="config"
v-html="config.terms.bodyHtml"
/>
</div>
</template>
<script lang="ts" setup>
import { TERMS } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
import { InstanceTermsType } from "@/types/enums";
import { useQuery } from "@vue/apollo-composable";
import { useHead } from "@/utils/head";
import { computed, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n({ useScope: "global" });
const { result: termsResult, loading: termsLoading } = useQuery<{
config: IConfig;
}>(
TERMS,
() => ({
locale: locale.value,
}),
() => ({
enabled: locale.value !== undefined,
})
);
const config = computed(() => termsResult.value?.config);
watch(config, () => {
if (config.value?.terms?.type) {
redirectToUrl();
}
});
const redirectToUrl = (): void => {
if (config.value?.terms?.type === InstanceTermsType.URL) {
window.location.replace(config.value?.terms?.url);
}
};
useHead({
title: computed(() => t("Terms")),
});
</script>