Loading component asynchronously in Vue.js does not work

Question

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')
  }
}

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. Just export the component as default. — gugadev
– gugadev, Commented Jan 14, 2019 at 14:15
@gugadev Hmm okay I understand. It's not my component but a v-tooltip package component installed via npm and included into package.json. Anything else I can do or will I have to fork the package and fix this? — Primoz Rome
– Primoz Rome, Commented Jan 14, 2019 at 14:39
Just create a wrapper where import the library and export it as default: import { SomeName } from 'v-tooltip'; export default SomeName;. — gugadev
– gugadev, Commented Jan 14, 2019 at 14:56

Primoz Rome · Accepted Answer · 2019-01-14 15:46:39Z

1

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)
  }
}

answered Jan 14, 2019 at 15:46

Primoz Rome

11.1k19 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading component asynchronously in Vue.js does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related