The use of async components in Vue.js with named imports

Question

I understand how to dynamically load components asynchronously in Vue. For example, instead of importing MyComponent directly:

import MyComponent from '@/components/MyComponent'

export default {
  components: {
    MyComponent
  }
}

We can use dynamic import like so:

export default {
  components: {
    MyComponent: () => import('@/components/MyComponent')
  }
}

But what about named component imports, like SweetModal?

import { SweetModal } from 'sweet-modal-vue'

export default {
  components: {
    SweetModal
  }
}

Is it possible to import them asynchronously as well?

Answer 1

Answer №1

To obtain your specific component, you can utilize the following method:

export default {
  components: {
    SweetModal: () => import('sweet-modal-vue').then(m => m.SweetModal)
  }
}

I suggest checking out this resource for more information: Async Vue.js Component

Answer 2

To obtain your specific component, you can utilize the following method:

export default {
  components: {
    SweetModal: () => import('sweet-modal-vue').then(m => m.SweetModal)
  }
}

I suggest checking out this resource for more information: Async Vue.js Component