Bitrix Framework

  Classic Vue components

This is a standard component format as a standard object with parameters (learn more Vue 3 documentation: Components basics и Advanced components):

const Component = {
	...
};

Example:

import {BitrixVue} from 'ui.vue3';

const Component = {
	template: 'Hello, world!'
};

BitrixVue.createApp({
	components: {
		Component
	},
	template: `
        <Component/>
    `
}).mount('#application');

Component must adhere to the general formatting rules.

  Mutable BitrixVue components

Using the method BitrixVue.mutableComponent you can get an object for component local registration. Such components can be mutated by affiliated developers:

BitrixVue.mutableComponent(name: string, definition: object): BitrixVueComponentProxy

Parameters:

• name - unique string component identifier, necessary for applying mutation by name (for example: ui-name-local);
• definition - object with component parameters, learn more in Vue documentation (Options Api section).

Result:

BitrixVueComponentProxy – specialized BitrixVue component object to be inserted to Vue application. Allows applying mutations via link to object or by identifier.

Note:

The result is the Proxy object for BitrixVue component. This object can be inserted into property components inside any Vue component (including the root component) and use it in the template. Upon inserting of such component, Vue get either the definition object, or definition object with applied mutations, if such were registered until the template rendering.

Such component can be mutated (customized) or cloned.

Component must adhere to general rules for naming and formatting.

Example:

import {BitrixVue} from 'ui.vue3';

const Component = BitrixVue.mutableComponent('module-component', {
	template: 'Hello, world!'
});

BitrixVue.createApp({
	components: {
		Component
	},
	template: `
        <Component/>
    `
}).mount('#application');

Handling of components is reviewed in detail in the lesson Example of component as JS extension.