Internationalization

General

Internationalization of the UI in the project is handled with the vue-i18n package.

All components in the repo should be available in English, with translations into Spanish and French.

Adding internationalization to a component

Here is how to internationalize a component of yours.

The non-internationalized component

Starting with an example HelloWorld.vue component where the text should be translated.

/src/components/HelloWorld.vue

<template>
  <h1>
    Hello World.
  </h1>
  <div>
    This is an example :)
  </div>
</template>

Adding internationalization to the component

1. Create a directory inside the /src/i18n directory or any of its subdirectories. The potential subdirectory and the name of your directory should be descriptive of the component that the translations are for. In our case: /src/i18n/helloworld

2. Create a json-file for the English version first. Name the file like the folder you just created:

   src/i18n/helloworld/helloworld.en.json

   {
     "greeting": "Hello World.",
     "content": "This is an example :)"
   }

   In this document you specify a key for every text element you want to translate, in this case "greeting" and "content" together with the appropriate text.

3. Add the following index typescript file to the same folder (and update the name of the folder and the path of the imported json file).

   src/i18n/helloworld/index.ts

   import en from "./helloworld.en.json";
   
   export default ({ en });

4. Now add the this small boilerplate code to the script section of the component and replace the text parts that should be translated as follows (make sure to adjust the path in the first line (import message from "<path>") to your case):

   /src/components/HelloWorld.vue

   <script>
   import { useI18n } from 'vue-i18n';
   import messages from "../i18n/helloworld";
   
   const { t } = useI18n({
     messages,
     useScope: "local"
   });
   </script>
   
   <template>
     <h1>
       {{ t("greeting") }}
     </h1>
     <div>
       {{ t("content") }}
     </div>
   </template>

   The {{ t(<key>) }} snippet will load in the appropriate content, specified for that key in the currently active language. Currently there only is an English translation so no matter what language is active, i18n will fall back to this version.

Adding another language

Adding another language shall be shown by adding a Spanish translation. Simply add an additional json file to the previously created folder (this time with the .es.json suffix, use .fr.json for French) which contains the same keys as the English version but has the contents translated:

/src/i18n/helloworld/helloworld.es.json

{
  "greeting": "Hola mundo.",
  "content": "Este es un ejemplo:)"
}

And add import and export the file in the appropriate typescript file. In our example that is would be

src/i18n/helloworld/index.ts

import en from "./helloworld.en.json";
import de from "./helloworld.es.json";

export default ({
  en, es
});

Voilà, you're done.