Views: 4730
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:
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.