Vue i18n

Итак, задача: локализация приложения на Vue.js. Для этого я использовал плагин локализации https://kazupon.github.io/vue-i18n/. Это довольно простой и функциональный плагин для локализации вашего приложения.

На самом деле все тонкости описаны в документации и пересказывать как с ним работать особого смысла нет. Поэтому в этой записи я хочу обратить ваше внимание на некоторые особенности, которые не всегда понятны или скрыты от глаз. А точнее на те нюансы, с которыми я столкнулся при решении этой задачи.

Первый нюанс это использование функций перевода в компонентах. В моём случае были проблемы в том, что я использовал их во входных параметрах. Конечно же это произошло по неопытности. Так вот, не делайте этого. Перевод может не сработать так, как вы этого ожидаете. А точнее при «горячей» смене языка такие переводы не изменяются. Для решения этой проблемы используйте вычисляемое свойство computed.

Второй нюанс это числительные в славянских языках (Pluralization). В базовом функционале такие вещи корректно работают только для английского языка, поэтому для решения этой проблемы нужно использовать свой алгоритм. Этот пример есть даже в официальной документации в разделе Custom pluralization. Однако особенность в том, что задать его нужно немного иначе, а именно через недокументированное свойство pluralizationRules. Решение такое:

// Custom slavic pluralization rules
function customRules(choice, choicesLength) {
  if (choice === 0) {
    return 0;
  }

  const teen = choice > 10 && choice < 20;
  const endsWithOne = choice % 10 === 1;

  if (!teen && endsWithOne) {
    return 1;
  }

  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2;
  }

  return (choicesLength < 4) ? 2 : 3;
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
  pluralizationRules: {
    ru: customRules
  }
})

И третий нюанс не совсем нюанс, а рекомендация. Используйте слоты (раздел Slots syntax usage) для больших текстов со ссылками или другими встроенными тестовыми элементами. Это значительно упростит создание, поддержку и стиль вашего кода.