Views: 2800
Last Modified: 28.04.2022

  Method BitrixVue.cloneComponent

Sometimes the component fits into the project, except for a single action (for example, you need to insert a selected smiley as [smile], but not as :smile:). Or, a default component template is not suitable for your project, but you are okay with the rest of component parts (for example, database data retrieval, actions, events).

In this case, you can clone an existing component and update any required elements inside it, without touching the rest of features.

In contrast to Component mutation, you can clone any component, whether BitrixVue component or classic Vue component. Find more details about mutations (and their types) in the article Component mutation rules.

The method BitrixVue.cloneComponent allows cloning a local component and to mutate (customize) without changing the original component:

BitrixVue.cloneComponent(source: string|object|BitrixVueComponent, mutations: object): BitrixVueComponentProxy


Parameter Description
source BitrixVue component string ID, BitrixVue component object or classic Vue component object.
mutations Object of parameters to be replaced in original component. Corresponds to Vue component parameters. Read more in the article: Component mutation rules.


BitrixVueComponentProxy is a specialized BitrixVue component object to be inserted into Vue application. Allows to apply mutations using object links.


Result of this function will be Proxy object for BitrixVue component. This object can be inserted into the property components in any Vue component (including the root component) and used in the template. Upon inserting such component, Vue gets a definition object, or a definition object with applied mutations, if such were registered before template rendering.

If you are cloning component by name, original component must be loaded before the a clone is inserted into component template.

In contrast to BitrixVue 2, in BitrixVue 3 components are cloned using not the final component version (original + mutations), but always using original.

Important! We strive to preserve backward compatibility of mutable components. However, you need to verify the availability of your mutations after product updates (to ensure that component continues to successfully operate as expected). Take extra caution with operability check if you clone classic objects of Vue components: backward compatibility for them is not guaranteed!


import {BitrixVue} from 'ui.vue3';
import {Local} from 'ui.components.local';

const LocalByObject = BitrixVue.cloneComponent(Local, {
	template: `
		Clone BitrixVue component by Object. Previous template: #PARENT_TEMPLATE#

import {BitrixVue} from 'ui.vue3';

const LocalByName = BitrixVue.cloneComponent('ui-local', {
	template: `
		Clone BitrixVue component by Name. Previous template: #PARENT_TEMPLATE#

import {BitrixVue} from 'ui.vue3';
const LocalVue = {
	template: `Base local component.`

const LocalVueByObject = BitrixVue.cloneComponent(LocalVue, {
	template: `
		Clone Vue component by Object. Previous template: #PARENT_TEMPLATE#

Courses developed by Bitrix24