Bitrix Framework

  Method BitrixVue.defineAsyncComponent

Vue 3 has introduced a new feature of component lazy loading. Such components will be loaded progressively as required to show them in the template. Special method BitrixVue.defineAsyncComponent is used within BitrixVue to support the lazy loading; it loads components formatted as individual Bitrix Core.js Extension.

Such behavior can be useful when employed in the component not immediately, but when executing an action:

BitrixVue.defineAsyncComponent(extension: string|string[], componentExportName: string, options?: VueAsyncComponentOptions): Promise<object>

Parameters:

Result:

Promise<object> – a Promise object, that returns Vue component when resolved, for subsequent automatic inserting into template.

Note:

Mechanics for components lazy loading are fairly simple:

1. You need to pass specially prepared object to components parameter of Vue component and indicate this component in the required location inside the template.
2. As soon as this component must be displayed, Vue will request the component lazy loading. Our BitrixVue uses Runtime.loadExtension as the loader.
3. Runtime.loadExtension loads the extension (one or several) after which the function uses a variable indicated in componentExportName to find the component and returns it in the Vue template.

  Example

import {BitrixVue} from 'ui.vue3';

BitrixVue.createApp({
	components: {
		AudioPlayer: BitrixVue.defineAsyncComponent('ui.vue3.components.audioplayer', 'AudioPlayer')
	},
	data() {
		return {
			show: false
		}
	},
	template: `
        <button @click="show=!show">Toggle player</button>
        <AudioPlayer v-if="show" src="https://files.johnsmith.com/bitrix/video-ringtone.mp3" style="width: 300px; margin: 10px 0"/>
    `
}).mount('#application');

Example with substituting placeholders

const LoadingComponent = {
	template: `<div>Loading...</div>`,
};

const ErrorComponent = {
	template: `<div>Error while loading...</div>`,
};

BitrixVue.createApp({
	components: {
		AudioPlayer: BitrixVue.defineAsyncComponent('ui.vue3.components.audioplayer', 'AudioPlayer', {
			loadingComponent: LoadingComponent,
			delay: 200,

			errorComponent: ErrorComponent,
			timeout: 3000,

		})
	},
	data() {
		return {
			show: false
		}
	},
	template: `
			<button @click="show=!show">Toggle player</button>
			<AudioPlayer v-if="show" src="https://files.johnsmith.com/bitrix/video-ringtone.mp3" style="width: 300px; margin: 10px 0"/>
		`
}).mount('#application');

If you want to check the operability of placeholders, add the key delayLoadExtension: 10000, in parameters for initializing lazy-loaded component. This will allow to view placeholder for both the lazy loading and for an error.