Views: 396
Last Modified: 28.04.2022

  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:

Parameter Description
extension String ID for Bitrix Core.js extension.
componentExportName Name for export variable, containing Vue-component.
options Additional parameters object:
  • loadingComponent – Vue component for showing a stub during lazy loading of component;
  • delay – delay before showing the loaded component. Default value: 200 m/s;
  • errorComponent – Vue component for showing a stub in case of a loading error;
  • timeout – error component; will be displayed if standby timeout has been exceeded. Default value: unlimited;
  • delayLoadExtension – delay before starting component loading. This parameter is required for testing the stub loadingComponent. Default value: not set.

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.





Courses developed by Bitrix24