Incompatibility with VueJS Async Component Loading State

[roberttolton]

I have tried integrating vue-custom-element with VueJS's ability to define an async component with a loading and error state, but I cannot get it to work.

https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

I was able to get close by wrapping the async component in a new Promise and resolve-ing with the object, which stopped vue-custom-component error-ing with expecting a Promise, but then the component wasn't actually rendered and had the "Failed to mount component: template or render function not defined." error.

The only way I've been able to get async components to work is with:

Vue.customElement('dashboard', () => import('./Dashboard.vue').then(m => m.default));

But with this approach you can't specify the loading or error components.

[karol-f]

Can You please prepare code example with that what is not working? Preferably clone https://codesandbox.io/s/vue-template-jk9jv or give GitHub link to repository.

[roberttolton]

@karol-f Sure here's a sandbox: https://codesandbox.io/s/vue-template-45pzw

[karol-f]

Hi, thanks for sandbox.

Can You explain what You want to achieve? Async loading components is done the same way as in Vue - https://codesandbox.io/s/vue-template-t601c?file=/src/main.js - and it works. If You want some logic, please do it in the component itself as vue-custom-element is just a thin wrapper around standard Vue components.

[roberttolton]

@karol-f The part I wish to achieve is the displaying of a loading indicator while the async component loads, which when trying to do the way Vue outlines in the docs, doesn't work with vue-custom-element.

Do you know of another way that I can achieve a loading indicator, and error indicator, for loading async components with vue-custom-element?

[karol-f]

Hi, just wrap it with normal component - https://codesandbox.io/s/vue-template-ewn95?file=/src/components/AsyncWrapper.vue

<template>
  <async-component/>
</template>

<script>
import LoadingComponent from "./LoadingComponent.vue";
import ErrorComponent from "./ErrorComponent.vue";

export default {
  components: {
    AsyncComponent: () => ({
  // The component to load (should be a Promise)
  component: import("./Test.vue"),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
}),
  },
  created() {
    console.log("Async Wrapper created");
  }
};
</script>