Add Translations
Since audiences of your project can derive from across the globe, it is important to tag all the content with a translation provision to reduce any future technical debt. The following guide will go over setting up the translation system in your project.
1. Language Config
First let's update your configuration file using the following language settings.
❐ Copy
The language config accept the following options.
| Option | Default | Notes |
|---|---|---|
| URL flag (ie. ?locale) used to change the user's locale this is also the name of the cookie used to store the locale while visiting the application. | ||
| The default language used by the application. | ||
| A map of possible languages and translations its correlating translations. | ||
The following is an example set of languages and translations.
❐ Copy
Each language has the following required properties.
| Option | Notes |
|---|---|
| The name of the language used by the frontend. | |
| A key value of translations. | |
NOTE: It's recommended to use english phrases as the key to make it easier to map the translations.
2. i18n Plugin
Next create an i18n plugin file with the following code.
❐ Copy
What this will do is pass the language config to all view templates on every . The last thing to do is add this new i18n plugin to your package.json file like the following example.
❐ Copy
The above examples assumes your i18n plugin is located in . Feel free to update the file to match your project structure.
3. Testing
In order to test the i18n plugin, we need to add a translation to the home page. The following example shows how to add a translation to the home page.
❐ Copy
The above example uses the hook to get the current language and the function to tag the string for translating. Another way to tag strings is by around a component. In both examples, the variable will be applied to the overall phrase after it is translated.