Views: 4270
Last Modified: 27.04.2022

BitrixVue 3 is an extension of the original Vue 3 that allows for an easy integration with the Bitrix Framework system. The complete feature package was implemented without changing the original code, which means a fully preserved compatibility with any code, written using Vue 3.

BitrixVue 3 functionality consists of two parts:

  • methods for application management (creating an application, handling the components and mutation);
  • Integration methods (handling localizations, global data, events and etc.).

Note: comfortable development uses the annotation file ui.vue3.d.ts that helps your IDE to automatically generate hints (code completion). List of methods can be found in the file /bitrix/modules/ui/install/js/ui/vue3/ui.vue3.d.ts, where:
  • namespace BitrixVue are methods for managing the application;
  • namespace $Bitrix - integration methods.

Important! Before starting the work, please read about the framework capabilities and its main concepts. You can find a very detailed documentation at the developer's website. Strictly follow recommendations at the official website in addition to this article.

Possibilities, described in this section, are available from the module version ui 22.100.0. Read on how to connect and launch BitrixVue 3 in the corresponding article.

The table below lists the BitrixVue methods:

Methods for application management
BitrixVue.createApp(props) Creating Vue-based application / Initializing Vue
Classic objects and BitrixVue.mutableComponent(name, definition) Handling the components
BitrixVue.defineAsyncComponent(extension, componentExportName, options) Component lazy loading
BitrixVue.mutateComponent(name, mutations) Component mutation
BitrixVue.cloneComponent(source, mutations) Component cloning
Integration methods
this.$Bitrix.Application Class for context forwarding
this.$Bitrix.Loc Class for handling localizations
this.$Bitrix.eventEmitter Class for handling app-level events
this.$Bitrix.Data Class for handling global data
this.$Bitrix.RestClient Class for handling REST client
this.$Bitrix.PullClient Class for handling Pull client

Chapter contents:

Courses developed by Bitrix24