Views: 1237
Last Modified: 28.04.2022
What to remember
Before creating a component you need to decide, which component do you require: classic or mutable.
If a component is created for internal objectives and you are not ready to support backward compatibility – its a
classic Vue component
There are two local components supported by BitrixVue:
First type are classic Vue components based on simple objects without special processing.
Second type are BitrixVue mutable components. This type is created for affiliated third-party developers. They can customize components supplied within Bitrix Framework, without necessity to modify product's source code.
Learn more...
. When you develop a component that can be changed by a third party – its a
mutable BitrixVue component
There are two local components supported by BitrixVue:
First type are classic Vue components based on simple objects without special processing.
Second type are BitrixVue mutable components. This type is created for affiliated third-party developers. They can customize components supplied within Bitrix Framework, without necessity to modify product's source code.
Learn more...
.
You must create components as СoreJS extensions in new format.
Do not forget this
- Naming
There are several rules for naming and export. For more details, please read the article: Component naming and import.
- Component properties
Component properties are structured and overviewed in detail in the following article: Generating and sorting component properties.
- Localization
BitrixVue 3 components can handle with localizations and this aspect is overviewed in detail in the article: Handing localization.
- Event-driven model
There are several types of events. You can find how to select a suitable event in this article: Event-driven model.
- Handling $Bitrix global variable functions
In addition to localizations and event-drive model, there are several additional classes that help to better reveal interaction with Bitrix Framework. You can find more in this article: Interaction with Bitrix Framework.
- Local component file content
Note: Naming variable for export doesn't contain the module - only the component name in PascalCase
.
/**
* Some Vue3 сomponent
*
* @package bitrix
* @subpackage module
* @copyright 2001-2022 Bitrix
*/
import {BitrixVue} from 'ui.vue3';
export const Component = {
/**
* @bitrixEvents 'module:component:eventName' {} (global)
*/
emits: ['sendEvent'],
props:
{
...
},
data()
{
return {
...
}
},
computed:
{
...
},
created()
{
this.$Bitrix.eventEmitter.subscribe('module:component:eventName', this.onDoSomething);
...
},
beforeDestroy()
{
this.$Bitrix.eventEmitter.unsubscribe('module:component:eventName', this.onDoSomething);
...
},
methods:
{
onDoSomething(event)
{
...
}
},
// language=Vue
template: `
...
{{$Bitrix.Loc.getMessage('MODULE_PHRASE_CODE_1')}}
...
`
};
- File content for mutable BitrixVue component
Mutable component contents fully repeat the abovementioned classic Vue component. The only difference is the registration method.
/**
* Some BitrixVue3 component
*
* @package bitrix
* @subpackage ui
* @copyright 2001-2021 Bitrix
*/
import {BitrixVue} from 'ui.vue3';
export const Component = BitrixVue.component('module-component', {
...
});
Example
We have prepared several example of component handling:
- example of classic Vue component;
- example of BitrixVue component;
- example of lazy-loading.
Perform the following steps to launch an app demo:
- Download the demo (utf8);
- Unpack the archive at the URL address
/<installation location>/local/js/local/
;
- Create public page and connect the extension:
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
?>
<?
\Bitrix\Main\UI\Extension::load("local.demo.application");
?>
<div id="application"></div>
<script type="text/javascript">
const application = new BX.DemoApplication('#application');
application.run();
</script>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
- Open this page in browser to view the result:

If you want to edit the component and add your own custom logic, do not forget to launch the transpiler:
- Open the terminal;
- To to the folder for local extensions at
cd /<installation path>/local/js/
;
- Launch transpiler in changes track mode
bitrix build -w
to see the following text upon launch:
✔ 11:19:44 Build extension local.demo.application js: 2 KB, css: 170 B
✔ 11:19:44 Build extension local.demo.components.async js: 312 B
✔ 11:19:44 Build extension local.demo.components.bitrixvue js: 646 B
✔ 11:19:44 Build extension local.demo.components.vue js: 546 B
- Update the page: the implemented modifications will become visible;
- In case of new updates, just repeat the item 4.