primevue-mirror/components/doc/DocSections.vue

<template>
    <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
        <section class="py-6">
            <template v-if="doc.children">
                <div :id="doc.id">
                    <DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge">
                        <p v-if="doc.description" v-html="doc.description"></p>
                    </DocSectionText>
                </div>
                <template v-for="comp of doc.children" :key="comp.label">
                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :badge="comp.badge" :description="comp.description" :level="2" />
                </template>
            </template>

            <template v-else-if="!doc.children && doc.component">
                <component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" :data="doc.data" :badge="doc.badge" :description="doc.description" />
            </template>
        </section>
    </template>
</template>

<script>
export default {
    props: ['docs']
};
</script>