Vue Multilanguage — плагин VueJS 2.0 для контроля мультиязычностью

Иногда требуется быстрый вариант реализации нескольких языков в Вашем приложении. Еще ни в одном проекте это не было так просто и беспроблемно. Это Vue Multilanguage!

Начать — легко

Как правило, сделать мультиязычность на сайте — это всегда головная боль: подбор инструмента, интеграция его в проект, заполнение и вывод языковых пакетов. Подобного рода задачи заставляют хвататься за голову. Но, к счастью, все эти проблемы не ощущаются остро в проектах на VueJS. При использовании плагина Vue Multilanguage, разумеется.

Итак, устанавливаем пакеты:

Создайте файл ml.js для определения многоязычных настроек и языков:

Некоторые подробности

  • MLInstaller: класс плагинов для установки в Vue с Vue.use
  • MLCreate: класс для определения параметров
    • initial: первый язык для запуска приложения
    • save: сохранение текущего языка в локальном хранилище
    • languages: массив с поддерживаемыми языками
  • MLanguage: класс с генератором языка, создайте свой язык с ним
    • create: метод создания языка на основе объектного параметра

Вы можете определить промежуточное программное обеспечение для выполнения перед вызовом get. Например:

PS: в Примере все $ml.get вызовы будут сконкатенированы с именем компонента.

И теперь вызываем в нашем main.js наш файл ml:

Использование в компонентах

Вы можете определять сообщения внутри компонента, использовать вычисляемые свойства с префиксом ml:

Также, можно использовать в шаблоне напрямую:

Выведет Hello VueJS.

Переключение языков

Для создания тумблера с переключателями, используйте следующий код:

На этом все. Проще придумать сложно. При работе с плагином косяков обнаружено не было. Единственное, что может огорчить — это множественное заполнение языковыми константами. Но без этого никуда. Удачи.