Views: 3589
Last Modified: 27.04.2022

  BitrixVue.createApp method

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

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

Parameters:

Parameter Description
props Option object for initializing a root Vue component: learn more in the applicable documentation (Options API section).
rootProps Object with input parameters for the Vue root component. Learn more details in corresponding documentation (Component Props section). Parameter is available from version ui 22.300.0.

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.



Chapter contents:


Courses developed by Bitrix24