Интернационализация и локализация

Общие принципы

Интернационализация осуществлена при помощи подключения плагина vue3-i18n
Для настройки новой локали создаётся json файл с определённой структурой со следующими правилами:
- Вложенная структруа должна иметь четыре уровня
- Верхний уровень определяет название экранной формы
- Второй уровень - тип элемента управления (кнопки, поля таблицы, поля карточки и т.п.)
- Третий уровень - название элемента управления
- Нижний уроваень - вид константы для элемента управления (заголовок, всплывающая подсказка)

Подключение плагина интернационализации

vite.config.ts

vueI18n({
  include: resolve(__dirname, "./src/locales/**"),
}),

Подключение плагина

import { createI18n } from "vue-i18n";
import messages from "@intlify/vite-plugin-vue-i18n/messages";

const i18n = createI18n({
  legacy: false,
  locale: import.meta.env.VITE_APP_I18N_LOCALE,
  fallbackLocale: import.meta.env.VITE_APP_I18N_LOCALE,
  messages,
});

/* eslint @typescript-eslint/ban-ts-comment: "off" */
// @ts-ignore
const $tt = i18n.global.t;

export { i18n, $tt };

Примеры использования интернационализации

Интернационализация в шаблоне (например, заголовки, футеры)

<h1>{{ $t("UrlStatePage.title") }}</h1>

Интернационализация в компоненте

import { useI18n } from "vue-i18n";

text: useI18n().t("GridPage.columns.name"),

Интернационализация в произвольном месте кода (например, содержимое грида)

import { $tt } from "@/plugins/i18n";

for (const header of headers) {
  header.text = $tt("GridPage.columns." + header.value);
}