How to dynamically load components?

Question

Vue.js

Hello.
How to dynamically load components?
I get an array in props. These components all lie in the same folder at the same level. Is it possible to import them in a loop?
components:['Button','Checkbox']

Answer 1

You can simply store the components in an array rather than in the top-level components object, i.e.:

import SomeComponent from 'path/to/SomeComponent'

data: () => ({
  items: [
    { component: SomeComponent }
  ]
})

And in the template
<component :is="item.component" />