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.json` file, which contains our default 27translation messages. 28- The keys are placed in the `src/locales/en.json` file and then the `$t()` 29function is used to output the translation messages. 30```json 31"pageDumps": { 32 "dumpsAvailableOnBmc": "Dumps available on BMC" 33} 34``` 35 36```Vue 37<page-section :section-title="$t('pageDumps.dumpsAvailableOnBmc')"> 38``` 39 40- Vue I18n’s `$tc()` function can help with displaying plurals. 41[Learn more about 42pluralization.](https://kazupon.github.io/vue-i18n/guide/pluralization.html) 43 44```json 45"modal": { 46 "deleteDump": "Delete dump | Delete dumps" 47} 48``` 49 50```JS 51this.$bvModal 52 .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), { 53 title: this.$tc('pageDumps.modal.deleteDump'), 54 okTitle: this.$tc('pageDumps.modal.deleteDump'), 55 cancelTitle: this.$t('global.action.cancel'), 56 }) 57```