i18n

i18next

The NPM library for internationalization and localization i18n is very popular, but it has grown very large in recent years. It has a lot of features for localizing dates, numbers, setting the right declensions, RTL language support, downloading locales from the server and a bunch of other things. The i18next site even calls it an "internationalization framework".

At the same time, localization of a site often requires very simple things that take up only a couple of percent of the entire functionality of the i18n heavyweight.

In particular, usually needed:

• Finding translation by the compound key - t("finance.transactions.deposit")
• Translation with a parameter - t("hello-message", "John")
• Arrays for lists or paragraphs of text

This functionality with preserving reactivity (changing the site language on the fly) can be obtained by a simple composable function.

useI18nLight

Here is a clean implementation of the above functionality without any dependencies in 70 lines against of one and a half megabytes of i18next.

Usage

Connection and initialization in main.ts:

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

const { initI18n } = useI18n();

initI18n();

JSON locales files are located by default in src/utils/locales

Example of use in a component:

<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 extensions

i18next has an extension for Vue DevTools (pretty useless), and there is an extension I18next Ally for VS Code (pretty useful). So i18next Ally works with the new implementation if vue-i18n package is specified in package.json in dependencies (you don't need to use it in the code). Recommended. Both extensions, however, consume RAM and CPU resources quite well, so it is better to use them only as needed.

As a result

JavaScript bundle after the build is 50 Kb smaller than with i18next. The necessary functionality is there.