src/plugins/i18n.plugin.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import type { App } from 'vue';
import { createI18n } from 'vue-i18n';
import type { Locale } from 'vue-i18n';

const i18n = createI18n({
  legacy: false,
  locale: '',
  messages: {},
});

const localesMap = Object.fromEntries(
  Object.entries(import.meta.glob('../../locales/*.yml'))
    .map(([path, loadLocale]) => [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]),
) as Record<Locale, () => Promise<{ default: Record<string, string> }>>;

export const availableLocales = Object.keys(localesMap);

const loadedLanguages: string[] = [];

function setI18nLanguage(lang: Locale) {
  i18n.global.locale.value = lang as any;
  if (typeof document !== 'undefined') {
    document.querySelector('html')?.setAttribute('lang', lang);
  }
  return lang;
}

export async function loadLanguageAsync(lang: string): Promise<Locale> {
  if (i18n.global.locale.value === lang) {
    return setI18nLanguage(lang);
  }

  if (loadedLanguages.includes(lang)) {
    return setI18nLanguage(lang);
  }

  const messages = await localesMap[lang]();

  i18n.global.setLocaleMessage(lang, messages.default);
  loadedLanguages.push(lang);

  return setI18nLanguage(lang);
}

export const i18nPlugin = {
  install: (app: App) => {
    app.use(i18n);
    loadLanguageAsync('en');
  },
};