Internationalization (i18n)

Locales

Karrot is available in different languages. So, instead of adding English text directly to a component's source file, we add a key instead. This key points to a text in each of the locale files.

All locale files can be found under src/locales/. For example the Spanish locale file is located at src/locales/locale-es.json.

Instead of

<ChangePhoto
  ...
  :label="Group logo"
  :hint="Click to upload your group logo!"
  ...
/>

we write

<ChangePhoto
  ...
  :label="$t('GROUP.LOGO')"
  :hint="$t('GROUP.SET_LOGO')"
  ...
/>

$t(...) is a function provided by vue-i18n which does all the lookup magic.

Adding new text to locales

  • Add a new key-value pair to src/locales/locale-en.json
  • As a convention keys are CAPITALIZED.
  • Keys can be nested for better structure.
  • Do not add the key to the other locale-*.json files. They will be added automatically by the CI tool after merge to master and translated by transifex.

Adding new locales

TODO hey stranger, do you know how to add new locales? Improve this documentation by answering this question.