Bitrix Framework

  Transition from Vue 3 to BitrixVue 3

Such transition will be maximally simple, because you don't have to update original Vue framework code to implement the complete BitrixVue 3 functionality. And it also means that 100% compatibility is preserved with any code, written previously for Vue 3.

The only difference – is the method to create an application. Now creating function has changed: now it's BitrixVue.createApp instead of createApp.

Before:

import {createApp} from 'vue';

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

Now:

import {BitrixVue} from 'ui.vue3';

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

More details can be found in the chapter Creating Vue application.

You can find extra details on how to get access to original methods in corresponding lesson.

  Transition from Vue 2 to BitrixVue 3

Creating new Vue application

Before:

import {Vue} from 'vue';

new Vue({
	components: {
		Component
	},
	template: '<Component/>'
}).$mount('#application');

import {Vue} from 'ui.vue';

Vue.create({
	el: '#application',
    components: {
		Component
    },
	template: '<Component/>'
})

Now:

import {BitrixVue} from 'ui.vue3';

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

List of changes:

1. Creating function changed: now it's BitrixVue.createApp instead of new Vue, Vue.create.
2. Element binding changed: now it's mount() instead of el or method $mount().

FInd more details in the chapter Creating Vue application.