i18n

i18next

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно располнела. В ней много возможностей для локализации дат, чисел, установки нужных склонений, поддержки RTL языков, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".

В то же время часто для локализации сайта в большинстве случаев требуются очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n.

В частности, обычно нужны:

• Нахождение перевода по составному ключу - t("finance.transactions.deposit")
• Перевод с параметром - t("hello-message", "John")
• Массивы для списков или параграфов текста

Данный функционал с сохранением реактивности (смена языка сайта налету) можно получить простой composable функцией.

useI18nLight

Вот чистая реализация вышеуказанного функционала в 70 строчек супротив полутора мегабайт без каких-либо зависимостей.

Использование

Подключение и инициализация в main.ts:

import { useI18n } from "@/composables/useI18nLight";

const { initI18n } = useI18n();

initI18n();

Json файлы локалей находятся по умолчанию в src/utils/locales

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

<script setup lang="ts">
import { useI18n } from "@/composables/useI18nLight";
      
const { t, locales, locale, setLocale } = useI18n();

function changeLocale() {
  setLocale(locales.find(l => l.code != locale.value.code).code);
}
</script>
<template>
<div>
    i18n test -
    <button
      type="button"
      @click="changeLocale()"
    >
      {{ t('msg') }} ({{ locale.code }})
    </button>
  </div>
</template>

i18next расширения

У i18next есть расширение для Vue DevTools (довольно бесполезное), и есть расширение I18next Ally для VS Code (весьма полезное). Так вот i18next Ally работает с новой реализацией если в package.json будет прописан пакет vue-i18n в dependencies (в коде подключать его не надо). Рекомендую. Оба расширения, впрочем, неплохо едят ресурсы, так что пользоваться ими лучше по надобности.

В итоге

JavaScript бандл после билда меньше на 50 Кб по сравнению с i18next. Нужный функционал есть.