Bitrix Framework

  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:

1. Download the demo (utf8);
2. Unpack the archive at the URL address /<installation location>/local/js/local/;
3. 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");?>
   

4. 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:

1. Open the terminal;
2. To to the folder for local extensions at cd /<installation path>/local/js/;
3. 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
   

4. Update the page: the implemented modifications will become visible;
5. In case of new updates, just repeat the item 4.