ComponentMeta.vue

<template>
    <div class="component-meta">
        <n-box v-if="meta.description">{{ meta.description }}</n-box>

        <n-module type="demo" class="component-meta">
            <div slot="header"></div>
            <n-tabs :items="tabs">
                <component-props slot="props" :data="meta.props"></component-props>
                <component-slots slot="slots" :data="meta.slots"></component-slots>
                <component-events slot="events" :data="meta.events"></component-events>
                <component-methods slot="methods" :data="meta.methods"></component-methods>
            </n-tabs>
        </n-module>
    </div>
</template>

<script>
import docs from '../../components/docs.json';

export default {
    name: 'ComponentMeta',
    props: {
        name: {
            type: String,
            required: true,
        },
    },

    data () {
        return {
            docs,
        };
    },

    computed: {
        meta () {
            return this.docs.find(e => e.name === this.name);
        },

        tabs () {
            return [
                {
                    title: 'Props',
                    target: 'props',
                    icon: 'fas fa-theater-masks',
                },
                {
                    title: 'Slots',
                    target: 'slots',
                    icon: 'fas fa-stream',
                },
                {
                    title: 'Events',
                    target: 'events',
                    icon: 'fas fa-random',
                },
                {
                    title: 'Methods',
                    target: 'methods',
                    icon: 'fas fa-filter',
                },
            ];
        },
    },
};
</script>