CODEWITHSUNDEEP
vue.jswebpackvue-component
Primoz Rome
Primoz Rome

Reputation: 11061

Loading component asynchronously in Vue.js does not work

I am trying to replace loading v-tooltip's VPopper component from standard loading to asynchronous loading.

Standard loading - component loaded and working normally

import { VPopover } from 'v-tooltip'

export default {
  components: {
    VPopover
  }
}

Asynchronous load - component not loaded correctly

export default {
  components: {
    VPopover: () => import('v-tooltip')
  },
}

For some reason above is not working and component is not loaded correctly. Maybe because it’s not a default export but named export in the v-tooltip Vue component?

I am using Webpack in-behind.

If I load my custom component asynchronously then it works as expected. For example this is working for me:

export default {
  components: {
    MyCustomComponent: () => import('@/components/MyCustomComponent.vue')
  }
}

Upvotes: 0

Views: 797

Answers (1)

Primoz Rome
Primoz Rome

Reputation: 11061

Like @gugadev has noted above

The lazy module import returns a Promise with the module export, in your case an object containing the named export. Vue don't know what of the named exports should import, so, simply does nothing.

I found this solution that works

export default {
  components: {
    VPopover: () => import('v-tooltip').then(m => m.VPopover)
  }
}

Upvotes: 1

Related Questions