# Internationalization
This chapter is about internationalization (translation of elements) in AsTeRICS Grid which can be done in three ways:
# dom-i18n
The library dom-i18n (opens new window) provides an very easy to use possibility for adding translations to an HTML site. Wherever possible it’s used within AsTeRICS Grid. The file aboutView.vue (opens new window) shows it’s usage within a Vue component:
Usage within HTML:
<h2 data-i18n="">About AsTeRICS Grid // Über das AsTeRICS Grid</h2>
- property
data-i18n
on an HTML element indicates that the content of thish2
tag is internationalized - content in different languages is placed directly within the HTML element, separated by " // "
- first language is English, second German
- property
For displaying only the content of the correct language, in the Javascript part of the component this code has to be executed (see aboutView.vue:88 (opens new window)):
mounted() { i18nService.initDomI18n(); }
- the
mounted()
function is called by Vue.js after initialization of the component i18nService.initDomI18n()
initializes the dom-i18n library for this component, showing only the translations of correct language- if it’s a dynamic Vue.js component it’s maybe necessary to call
i18nService.initDomI18n()
also in the Vue.jsupdated()
method which is called after each view update
- the
The dom-i18n library is initialized in i18nService.js (opens new window). There it would be possible to add additional languages by adding it to the language
property within the i18nService.initDomI18n()
method.
# i18nService.js
If a translation is needed in a piece of Javascript code, the method i18nService.translate(key)
can be used. The key
property to pass and it’s translations are also defined in i18nService
. It’s also possible to pass parameters to the translate
method which are inserted in {?}
placeholders in the translated strings.
# Usage example
In order to ask the user a translated question with parameter this code can be used:
if (confirm(i18nService.translate('CONFIRM_DELETE_GRID', 'My grid'))) {
// delete grid
}
These could be the defined translations within i18nService.js
:
i18nService.translations['en']['CONFIRM_DELETE_GRID'] = 'Do you really want to delete the grid "{?}"?'
i18nService.translations['de']['CONFIRM_DELETE_GRID'] = 'Möchten Sie das Grid "{?}" wirklich löschen?'
The result will be a confirmation dialog containing:
- non-german browser setting: Do you really want to delete the grid “My grid”?
- german browser setting: Möchten Sie das Grid “My grid” wirklich löschen?
# Vue.js filter
There is also an implemented Vue.js filter for translation which uses the i18nService.translate()
method. It’s implemented in vuePluginManager.js#initFilters(){{ variableToTranslate | translate }}
. A real use-case could look like this:
<li v-for="action in gridElement.actions">
<span>{{action.modelName | translate}}</span>
</li>
This piece of Vue.js code iterates over the array actions
of the object gridElement
and generates a span
with a translated version of the modelName
of each action as content.