1# Internationalization
2The OpenBMC Web UI implements internationalization and separates the language-
3specific parts of the interface from the rest of the code, so they can be
4easily replaced. The OpenBMC Web UI uses the following library for
5internationalization:
6- [Vue I18n](https://kazupon.github.io/vue-i18n/introduction.html)
7
8## Key naming convention
9The OpenBMC Web UI follows the following key naming conventions:
10
11- Page specific labels should be nested in an object with a key prefixed `page`
12followed by the page title. Formatting in this manner provides a systematic
13structure and improves readability of the language file.
14   - e.g. `pageLocalUserManagement.editUser`
15- Any 'major' child components should be nested inside page specific objects
16(ex. table, modal)
17   - e.g. `pageEventLogs.table.eventType`
18- Avoid any complex linked locale messages.
19- Alphabetize object keys. This helps in locating the keys.
20- We use the `$t()` function in markup and `this.$t` in scripts (which Vue I18n
21provides to our components) for outputting translation messages.
22
23## Using the Vue I18n plugin
24- A new `src/i18n.js` file is added and it registers Vue I18n as a plugin to
25our Vue instance via the `Vue.use()` function.
26- The CLI creates a `src/locales/en-US.json` file, which contains our default
27translation messages.
28- The keys are placed in the `src/locales/en-US.json` file and then the `$t()`
29function is used to output the translation messages.
30- After adding or removing calls to `$t` please run this to ensure consistent
31English translation (note: using variable expansion in key names is not
32handled automatically, you need to manually check them):
33```bash
34node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue)' -l 'src/locales/en-US.json'
35```
36- If you're working on updating a translation for another language (e.g.
37Russian), run this to see the omissions (as well as cruft) and add the
38necessary keys automatically:
39```bash
40node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue)' -l 'src/locales/ru-RU.json' -a
41```
42
43```json
44"pageDumps": {
45  "dumpsAvailableOnBmc": "Dumps available on BMC"
46}
47```
48
49```Vue
50<page-section :section-title="$t('pageDumps.dumpsAvailableOnBmc')">
51```
52
53- Vue I18n’s `$tc()` function can help with displaying plurals.
54[Learn more about
55pluralization.](https://kazupon.github.io/vue-i18n/guide/pluralization.html)
56
57```json
58"modal": {
59  "deleteDump": "Delete dump | Delete dumps"
60}
61```
62
63```JS
64this.$bvModal
65  .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
66   title: this.$tc('pageDumps.modal.deleteDump'),
67   okTitle: this.$tc('pageDumps.modal.deleteDump'),
68   cancelTitle: this.$t('global.action.cancel'),
69  })
70```
71