Bitrix Framework

  Using localization in template ({{localize.CODE}})

BitrixVue 3 new version have the option to use localization inside components and template without preliminary prepared calculated property localize.

Before:

template: `
    <div>{{localize.CODE}}</div>
`

Now:

template: `
    <div>{{$Bitrix.Loc.getMessage('CODE')}}</div>
`

You can find more details about localizations and the method $Bitrix.Loc.getMessage in the article: Class for handling localizations.

  Using BitrixVue.getFilteredPhrases

Now this method is very rarely required. The case when it's required, is described in the article: Handling localizations.

If you still need it, some modifications are needed.

Before:

Vue.getFilteredPhrases('PREFIX_', this.$root.$bitrixMessages);
BitrixVue.getFilteredPhrases('PREFIX_1', this.$root.$bitrixMessages);
BitrixVue.getFilteredPhrases(['PREFIX_1_', 'PREFIX_2_'], this);

Now:

BitrixVue.getFilteredPhrases(this, 'PREFIX_1');
BitrixVue.getFilteredPhrases(this, ['PREFIX_1_', 'PREFIX_2_']);

List of changes:

1. Set of parameters changed.
2. Now you need to indicate just this when calling a method instead of global variable this.$root.$bitrixMessages. Current component context within computed of property localize is understood under this. Such format was used for external integrations (for example, widgets).

  Setting external localizations (in $root component)

Previously, specifying external localizations (for external integrations) used the approach with indicating localizations in the global variable this.$root.$bitrixMessages:

import {Vue} from 'ui.vue';

class TaskManager
{
	...
	attachTemplate()
	{
		const context = this;
		this.vm = new Vue({
		    el: this.rootNode,
			beforeCreate() 
			{
				this.$bitrixApplication = context;
				
				this.$bitrixMessages.PREFIX_CODE_1 = 'Message 1'; 

                this.$bitrixMessages = {
                   'PREFIX_CODE_1': 'Message 1',
                   'PREFIX_CODE_2': 'Message 2',
                };
			},
			template: '<module-component/>'
		})
	}
	...
}

But now you have to use the class $Bitrix.Loc:

import {BitrixVue} from 'ui.vue3';

class TaskManager
{
	...
	attachTemplate()
	{
		const context = this;
		        
		this.#application = BitrixVue.createApp({
			beforeCreate() 
			{
				this.$bitrix.Application.set(context);
				
				this.$bitrix.Loc.setMessage('PREFIX_CODE_1', 'Message 1');

                this.$bitrix.Loc.setMessage({
                   'PREFIX_CODE_1': 'Message 1',
                   'PREFIX_CODE_2': 'Message 2',
                });
			},
            components: {
				Component,
			},
			template: '<Component/>'
		});
		this.#application.mount(this.#rootNode);
	}
	...
}

Find more details on the new approach in the article: Class for handling localizations.