feat: add @intlify/unplugin-vue-i18n (#2772)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2772
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/helpers/time/formatDate.ts

@@ -58,7 +58,7 @@ export function formatISO(date) {
  * by creating a shared composable.
  */
 export const useDateTimeFormatter = createSharedComposable((options?: MaybeRef<Intl.DateTimeFormatOptions>) => {
-	return computed(() => new Intl.DateTimeFormat(i18n.global.locale, unref(options)))
+	return computed(() => new Intl.DateTimeFormat(i18n.global.locale.value, unref(options)))
 })
 
 export function useWeekDayFromDate() {

src/i18n/index.ts

@@ -22,31 +22,22 @@ export const DEFAULT_LANGUAGE: SupportedLocale= 'en'
 
 export type ISOLanguage = string
 
+// we load all messsages async
 export const i18n = createI18n({
-	locale: DEFAULT_LANGUAGE, // set locale
 	fallbackLocale: DEFAULT_LANGUAGE,
-	legacy: true,
-	globalInjection: true,
-	allowComposition: true,
-	inheritLocale: true,
+	legacy: false,
 	messages: {
 		en: langEN,
 	} as Record<SupportedLocale, any>,
 })
 
-function setI18nLanguage(lang: SupportedLocale): SupportedLocale {
-	i18n.global.locale = lang
-	document.documentElement.lang = lang
-	return lang
-}
-
-export async function loadLanguageAsync(lang: SupportedLocale) {
+export async function setLanguage(lang: SupportedLocale = getCurrentLanguage()): Promise<SupportedLocale | undefined> {
 	if (!lang) {
 		throw new Error()
 	}
 
 	// do not change language to the current one
-	if (i18n.global.locale === lang) {
+	if (i18n.global.locale.value === lang) {
 		return
 	}
 
@@ -56,7 +47,9 @@ export async function loadLanguageAsync(lang: SupportedLocale) {
 		i18n.global.setLocaleMessage(lang, messages.default)
 	}
 
-	return setI18nLanguage(lang)
+	i18n.global.locale.value = lang
+	document.documentElement.lang = lang
+	return lang
 }
 
 export function getCurrentLanguage(): SupportedLocale {
@@ -74,11 +67,7 @@ export function getCurrentLanguage(): SupportedLocale {
 	return language || DEFAULT_LANGUAGE
 }
 
-export function saveLanguage(lang: SupportedLocale) {
+export async function saveLanguage(lang: SupportedLocale) {
 	localStorage.setItem('language', lang)
-	setLanguage()
-}
-
-export function setLanguage() {
-	return loadLanguageAsync(getCurrentLanguage())
+	await setLanguage()
 }

src/i18n/useDayjsLanguageSync.ts

@@ -1,6 +1,5 @@
 import {computed, ref, watch} from 'vue'
 import type dayjs from 'dayjs'
-import type ILocale from 'dayjs/locale/*'
 
 import {i18n, type SupportedLocale, type ISOLanguage} from '@/i18n'
 
@@ -36,7 +35,7 @@ export function useDayjsLanguageSync(dayjsGlobal: typeof dayjs) {
 
 	const dayjsLanguageLoaded = ref(false)
 	watch(
-		() => i18n.global.locale,
+		() => i18n.global.locale.value,
 		async (currentLanguage: string) => {
 			if (!dayjsGlobal) {
 				return

src/main.ts

@@ -15,7 +15,7 @@ import Notifications from '@kyvg/vue3-notification'
 import './registerServiceWorker'
 
 // i18n
-import {i18n} from './i18n'
+import {i18n, setLanguage} from './i18n'
 
 declare global {
 	interface Window {
@@ -106,4 +106,6 @@ app.use(pinia)
 app.use(router)
 app.use(i18n)
 
-app.mount('#app')
+setLanguage().then(() => {
+	app.mount('#app')
+})

src/stores/auth.ts

@@ -311,9 +311,11 @@ export const useAuthStore = defineStore('auth', () => {
 
 		const cancel = setModuleLoading(setIsLoadingGeneralSettings)
 		try {
-			saveLanguage(settings.language)
-			await userSettingsService.update(settings)
+			const updateSettingsPromise = userSettingsService.update(settings)
+			const saveLanguagePromise = saveLanguage(settings.language)
+			await updateSettingsPromise
 			setUserSettings({...settings})
+			await saveLanguagePromise
 			if (showMessage) {
 				success({message: i18n.global.t('user.settings.general.savedSuccess')})
 			}