Simple component example

[iluwatar]

Hey, I'd like to write a simple component that provides links to all the child pages. I've tried to look at the Vuepress 2 documentation, but I'm not sure which API should I use. I'm also unsure whether I need to write a complete plugin or does a simple component suffice? Any pointers or examples would be useful.

[iluwatar]

I have seen these APIs, but the documentation doesn't offer any advice how they should be used.

• https://v2.vuepress.vuejs.org/reference/plugin-api.html
• https://v2.vuepress.vuejs.org/reference/theme-api.html
• https://v2.vuepress.vuejs.org/reference/client-api.html
• https://v2.vuepress.vuejs.org/reference/node-api.html

[iluwatar]

This is what I have, but currently it outputs only some static links:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'ChildTableOfContents',
    data() {
        return {
            items: [
                {
                    title: 'Child 1',
                    path: '/child-1',
                },
                {
                    title: 'Child 2',
                    path: '/child-2',
                },
            ],
        }
    },
})
</script>

<template>
    <ul>
        <li v-for="item in items" :key="item.title">
            <router-link :to="item.path">{{ item.title }}</router-link>
        </li>
    </ul>
</template>