vbv/client/src/i18nextWrapper.ts

66 lines
1.9 KiB
TypeScript

import type { AvailableLanguages } from "@/stores/user";
import i18next from "i18next";
import Backend from "i18next-locize-backend";
import { locizePlugin } from "locize";
import { nextTick } from "vue";
declare module "i18next" {
interface CustomTypeOptions {
returnNull: false;
}
}
export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr", "it"];
export function i18nextInit() {
return (
i18next
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
// .use(LanguageDetector)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.use(Backend)
.use(locizePlugin)
.init({
debug: true,
supportedLngs: SUPPORT_LOCALES,
fallbackLng: "de",
defaultNS: "translation",
returnNull: false,
saveMissing: import.meta.env.DEV,
backend: {
projectId:
import.meta.env.VITE_LOCIZE_PROJECTID ||
"7518c269-cbf7-4d25-bc5c-6ceba2a8b74b",
apiKey: import.meta.env.DEV ? import.meta.env.VITE_LOCIZE_API_KEY : undefined,
fallbackLng: "de",
allowedAddOrUpdateHosts: ["localhost", "127.0.0.1"],
},
})
);
}
export function setI18nLanguage(locale: string) {
/**
* NOTE:
* If you need to specify the language setting for headers, such as the `fetch` API, set it here.
* The following is an example for axios.
*
* axios.defaults.headers.common['Accept-Language'] = locale
*/
i18next.changeLanguage(locale);
document.querySelector("html")?.setAttribute("lang", locale);
}
export async function loadI18nextLocaleMessages(locale: any) {
// load locale messages with dynamic import
// unused with locize
const messages = await import(`./locales/${locale}.json`);
i18next.addResourceBundle(locale, "messages", messages, true, true);
return nextTick();
}