Imagine preparing a bunch of Vue components that are heavy in size and you don't want to force users to download them all at once - e.g. when creating ui libraries like "Element UI" (that is used across our demos).
You can load individual components only when you need them - when user attach it to the document.
Instead of component object we will use function with returned Promise. You can use Webpack's require.ensure() or any other async method to load component.
One note - Custom Elements v1 spec require defining observed props during registration. That's why if you omit them, attributes won't be reactive, and changing them from outside (HTML attributes or JavaScript) won't work. This also concerns props added by mixins and extends
{{HTML}}
<template>
{{vueTemplate}}
</template>
<script>
{{vueScript}}
</script>
Vue.customElement('demo-lazy-loading', () => new Promise((resolve) => {
require(['path/to/lazy-loaded-component'], (lazyComponent) => resolve(lazyComponent.default)));
}), { props: ['prop'] });