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

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

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

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

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

# yarn
yarn add vue-multilanguage
# npm
npm install vue-multilanguage --save

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

import Vue from 'vue'
import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage'

Vue.use(MLInstaller)

export default new MLCreate({
  initial: 'english',
  save: process.env.NODE_ENV === 'production',
  languages: [
    new MLanguage('english').create({
      title: 'Hello {0}!',
      msg: 'You have {f} friends and {l} likes'
    }),

    new MLanguage('portuguese').create({
      title: 'Oi {0}!',
      msg: 'Você tem {f} amigos e {l} curtidas'
    })
  ]
})

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

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

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

export default new MLCreate({
  ...
  middleware: (component, path) => {
    const newPath = `${component.$options.name}.${path}`
    // you should return newPath
    return newPath
  }
})

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

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './ml'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

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

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

<template>
  <div id="app">
    <p v-text="$ml.get('myMessage')" />
  </div>
</template>

<script>
import { MLBuilder } from 'vue-multilanguage'

export default {
  name: 'app',
  data () {
    return { friends: 5 }
  },
  computed: {
    mlmyMessage () {
      return new MLBuilder('msg').with('f', this.friends).with('l', 406)
    }
  }
}
</script>

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

<h1 v-text="$ml.with('VueJS').get('title')" />

Выведет Hello VueJS.

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

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

<button
	v-for="lang in $ml.list"
	:key="lang"
	@click="$ml.change(lang)"
	v-text="lang"
/>

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