Vfrdtyky

So I want to have many components nested to each other and included dynamically.

Lets assume simple case:

-container
-row
-container
-row
-widget

etc.

So how can I include container that will load row which will load previous component container in an elegant way (recursive I guess)

I want this functionality for more components than just container and row

So to achieve my goal I have to build ComponentLoader and child components loaded from it.

ComponentLoader.vue

<template

    v-for="(block, index) in data.children">

    <component

      v-if="component"

      :is="component"

      :key="`container-${block.id}-${index}`"

      :data="block"/>

  </template>

</template>

Which for instance will load Article component from its children:

ArticleComponent.vue

<template>

  <SimpleArticle

    :data="data"/>

  <ComponentLoader

    v-if="data.children"

    :data="data"/>

</template>

So ArticleComponent will call ComponentLoader again if it has more children to load. This way works for me and is recursively going through the data tree.