diff --git a/frontend/plugins/i18n.ts b/frontend/plugins/i18n.ts index d7650cb5..296db6f9 100644 --- a/frontend/plugins/i18n.ts +++ b/frontend/plugins/i18n.ts @@ -1,19 +1,15 @@ -import type { CompileError, MessageCompiler, MessageContext } from "vue-i18n"; +import type { CompileError, MessageContext } from "vue-i18n"; import { createI18n } from "vue-i18n"; import { IntlMessageFormat } from "intl-messageformat"; -import { messages } from "./messages"; export default defineNuxtPlugin(({ vueApp }) => { function checkDefaultLanguage() { let matched = null; const languages = Object.getOwnPropertyNames(messages()); - languages.forEach(lang => { - navigator.languages.forEach(language => { - if (lang === language) { - matched = lang; - } - }); - }); + const matching = navigator.languages.filter(lang => languages.includes(lang)); + if (matching.length > 0) { + matched = matching[0]; + } if (!matched) { languages.forEach(lang => { const languagePartials = navigator.language.split("-")[0]; @@ -25,17 +21,38 @@ export default defineNuxtPlugin(({ vueApp }) => { return matched; } const i18n = createI18n({ - legacy: false, - globalInjection: true, - locale: checkDefaultLanguage() || "en", fallbackLocale: "en", + globalInjection: true, + legacy: false, + locale: checkDefaultLanguage() || "en", messageCompiler, messages: messages(), }); vueApp.use(i18n); }); -export const messageCompiler: MessageCompiler = (message, { locale, key, onError }) => { +export const messages: Object = () => { + const messages: Record = {}; + const modules = import.meta.glob("~//locales/**.json", { eager: true }); + for (const path in modules) { + const key = path.slice(9, -5); + messages[key] = modules[path]; + } + return messages; +}; + +export const messageCompiler: ( + message: String | any, + { + locale, + key, + onError, + }: { + locale: any; + key: any; + onError: any; + } +) => (ctx: MessageContext) => unknown = (message, { locale, key, onError }) => { if (typeof message === "string") { /** * You can tune your message compiler performance more with your cache strategy or also memoization at here diff --git a/frontend/plugins/messages.ts b/frontend/plugins/messages.ts deleted file mode 100644 index 767aca66..00000000 --- a/frontend/plugins/messages.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const messages: Object = () => { - const messages = {}; - const modules = import.meta.glob("~//locales/**.json", { eager: true }); - for (const path in modules) { - const key = path.slice(9, -5); - messages[key] = modules[path]; - } - return messages; -};