Vue 3: Make other components available inside lazy loaded component (defineAsyncComponent)

122 Views Asked by At

I have registered a global component via: app.component('ion-checkbox', IonCheckbox);

But still the component isn't available in any async component like this one:

// SOURCE: https://v3.vuejs.org/guide/component-dynamic-async.html
const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<ion-checkbox mode="ios" value="1" @ionChange="newsletterSubscriptionChanged($event)" labelPlacement="end">Subscribe to newsletter</ion-checkbox>',
      })
    })
)

How can inject / provide components in async components?

I'm desperate, I've been trying for 14 hours... :(

Creating a .vue file and importing it like this:

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComp.vue')
)

is no option because I want to be able to provide / inject components via the "Promise"-Syntax.

0

There are 0 best solutions below