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

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

  • Интернационализация осуществлена при помощи подключения плагина vue3-i18n

  • Для настройки новой локали создаётся json файл с определённой структурой со следующими правилами:

    • Вложенная структруа должна иметь четыре уровня

    • Верхний уровень определяет название экранной формы

    • Второй уровень - тип элемента управления (кнопки, поля таблицы, поля карточки и т.п.)

    • Третий уровень - название элемента управления

    • Нижний уроваень - вид константы для элемента управления (заголовок, всплывающая подсказка)

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

package.json
"vue-i18n": "^9.2.2",
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
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,
});

const $tt = i18n.global.t;

export { i18n, $tt };

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

Интернационализация в шаблоне (например, заголовки, футеры)
<h1 class="text-center">{{ $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);
}