A inspiração para este artigo vem de uma implementação recente que fiz para construir layouts dinâmicos no front-end baseado em Vue.

Vamos supor que o endpoint da sua API retorne um layout YAML como abaixo.

---
row:
  - col: 12
    row:
      - col: 12
        component_id: 1
  - col: 12
    row:
      - col: 6
        component_id: 2
      - col: 6
        row:
          - col: 12
            component_id: 3
          - col: 12
            component_id: 4

Esperamos um layout como o abaixo desta expressão YAML.

Então, para facilitar o trabalho, analisaremos essa estrutura YAML e geraremos o objeto JSON. Eu usei o pacote yaml.

npm install yaml

Então, poderíamos importá-lo e executar o analisador.

import YAML from 'yaml'
const jsonObject = YAML.parse(yaml_struct)

Para fazer isso funcionar, precisamos criar um modelo Vue recursivo e um componente que possa chamar a si mesmo recursivamente ao encontrar linhas aninhadas. Dessa forma, a estrutura lidará dinamicamente com layouts profundamente aninhados como o que forneci.

Agora, podemos usar este componente RecursiveRow dentro do seu componente pai para lidar com o layout de nível superior.

É isso. Se você tiver alguma dúvida, deixe um comentário abaixo.