Bitrix Framework

  BitrixVue.createApp method

BitrixVue.createApp method initializes Vue-based application (root component):

BitrixVue.createApp(rootComponent: Component, rootProps?: {[key: string]: any}|null): application;

Parameters:

Result:

Method returns initialized Vue instance (application). List of available methods is listed in the documentation (app.*).

Description:

const app = BitrixVue.createApp({
    /* root component options */
});
app.mount('#application');

  Example

For you to have a full-scale Vue-based application, you need to create a DOM element at the page with Vue instance to be bound.

Place an element with identifier application at your html-page:

<div id="application"></div>

You need to execute the following code within your JS application:

import {BitrixVue} from 'ui.vue3';

BitrixVue.createApp({
    name: 'Hello App',
    template: 'Hello, world'
}).mount('#application');

In addition to the template, the name property will also going to be useful for aesthetically pleasing display of your application in Vue DevTools.

import {BitrixVue} from 'ui.vue3';

const hello = 'Hello, world!';

const application = BitrixVue.createApp({
    name: 'Hello App',
    props: ['message'],
    template: '{{message}}'
}, {
	message: 'Hello, world!'
});
application.mount('#application');

The above example is the easiest variant of interaction. If you want to use all Bitrix Framework capabilities, you need to create a separate JS extension with your own structure, as well as controller that will initialize and launch Vue as required. Read more in the following article: Example of completed Vue-based application.

If you need original Vue 3 methods (for example, createApp), read the article Access to original Vue 3 methods.