# Translation

We want to internationalize our application for the following
languages:

* EN
* DE
* SK
* HU
* HR
* RS
* BiH
* BG
* RO
* UA

## Our preferred translation cycle is as follows:

Application -> .po files -> Weblate -> .po files -> Application

There are several possibilities to achieve this goal.

## We chose [vue-gettext](https://github.com/Polyconseil/vue-gettext)

    Rationale:
    * No other framework supports our preferred translation cycle fully
    * Relies in parts on well known utilities (xgettext)
    * Allows phrases as parameters instead of Variables
      $gettext("Dear Sir") opposed to $("greeting")

Downsides:
* At present (July 2018) there are some annoying issues, which demand quirky solutions:

  * [xgettext fails with some .vue files](https://github.com/Polyconseil/vue-gettext/issues/28) which forces us to use `(`, `)` around templates
  *  [translations in attributes](https://github.com/Polyconseil/vue-gettext/issues/9) which leaves us with either interpolating in templates with `<translate></translate>` or use computed properties in Vue components (cf. Login component).
* Is dependend on external (=non JS) tools (`xgettext`) which are not able to consume `.vue`-files directly, which in turn leads to unexpected behaviour.
*


## Commands

In order to extract the messages from the templates call `make makemessages`.
After that you have the `.po`-file which could be translated.
After translation, you have to call `make translations` to generate the `translations.json`
which is consumed by `vue-gettext`.

The workflow is as follows:

`component.vue ---> /tmp/template.pot ---> app/locale/fr_FR/LC_MESSAGES/app.po ---> app/translations.json`

(taken from the documentation of `vue-gettext`)