Example of component as JS extension

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);
	    ...
	},

	beforeUnmount()
	{
		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.