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:

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

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

vladcraciun
23 Oct 2020