Skip to content

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

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

we write

html
<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

Hey stranger

Do you know how to add new locales? Improve this documentation by answering this question.