Views: 3077
Last Modified: 28.04.2022
All JS components within Bitrix Framework (as well as php-enabled components) have an integrated localization support. BitrixVue 3 components are not an exception.
To show localization in the template, use the method $Bitrix.Loc.getMessage.
template: `
{{ $Bitrix.Loc.getMessage('EXAMPLE_PHRASE') }}
`
More examples for handling localizations can be found in the article Localization class.
Performance
Such format to access localizations is sufficiently quick. However, it has specific overeheads: you need an additional 1ms during template rendering for a 1000 phrases during re-drawing (in actuality, time can be less, because not all blocks in Vue component require re-drawing).
When its significant for your app (for example, number of phrases is multi-fold larger) – use the approach with employed method BitrixVue.getFilteredPhrases. This method creates a calculated property which allows querying phrases as a static property (in contrast to $Bitrix.Loc.getMessage, where each call is processed by function).