Language configuration
Languages are configured based on the values of the default language
The active language is pulled from the browser 'navigation.language'
Pages will automatically update if browser language changes
If no key exists in the config then the key will be used
Some other text
<!-- example html from above -->
<div>${page.translate('Some other text')}</div>
import { i18nLanguage } from '@webformula/core';
i18nLanguage.messages = {
en: {
'About': 'About',
'Some other text': 'Some other text'
},
es: {
'About': 'Acerca de',
'Some other text': 'algún otro texto'
}
};
// get translation
console.log(i18nLanguage.translate('key'));
// en-US will show as es
console.log(i18nLanguage.language); // en, es
// get messages config
console.log(i18nLanguage.messages);
Auto translate
If auto translate is turned on pages will automatically have keys replaced without any additional code
Pages will automatically update if browser language changes
// Enable auto translation for pages
window._webformulaCoreAutoTranslate = true;
Translate method
You can use the built in translate method to handle translations on pages
You can also import the i18nLanguage module to interact with translate outside of pages
Pages will automatically update if browser language changes
// use the built in translate method on pages
<div>${page.translate('Some other text')}</div>
// directly interact with the module
import { i18nLanguage } from '@webformula/core';
console.log(i18nLanguage.translate('key'));
Template translations
You can specify templates to enable dynamic translations
This can provide a way to translate messages sent from your api
keep this section of text in place and this value
// templated value: "keep this section of text in place and this value"
import { i18nLanguage } from '@webformula/core';
i18nLanguage.messages = {
en: {
'keep this $var in place and this $var': 'keep this $var in place and this $var'
},
es: {
'keep this $var in place and this $var': 'mantenga este $var en su lugar y este $var'
}
};