In a specific scenario, I am using an API to output all the content for my Page, including its structure. To provide context, imagine a CMS with a page builder feature where authors can place components via drag and drop to create pages, which are then delivered to the front-end through the API.
The format of the API output might resemble something like this:
{content: [
{component: hero, content: {...} },
{component: form, content: {...} },
...
]}
To generate related content, my initial thought is to utilize dynamic components like:
<template v-for="item in content">
<component :is="item.component" />
</template>
However, I realize that I will need to somehow add properties data to these components, which does not seem to be explicitly described in the Vue documentation. This raises the question of how to pass props to dynamic components that have completely different sets of props (for example, a hero component might require an image while a form component may need input placeholders) - any suggestions?