Loop through a list of VueJS components

Ever wondered how you can loop through a list of VueJS components?

Let's say you have an array of components and you want to render them dynamically:

data() {
    return {
        components: ['ComponentOne', 'ComponentTwo', 'ComponentThree']       

It's simple. We just need to use vue's dynamic component.

###Let's see how:

    <li v-for="component, index in components" :key="index">
        <component :is="component"></component>

Just make sure to register all the used components where you need them.

23 Oct 2020