Related Pages

The VRelatedPages component is a Vue 3 component that displays a table of related pages, grouped by a specified category.

Props

Prop Name	Type	Required	Description
`data`	`IRelatedPages[]`	Yes	An array of related pages, each containing a group and its items.

interface IRelatedPages {
    groupBy: IFrontmatter;
    items: IFrontmatter[];
}

Example

vue

<script setup lang="ts">
  import VRelatedPages from 'UiKit/components/VRelatedPages/VRelatedPages.vue';
  const relatedPages = [
    {
      groupBy: { title: 'Group 1', url: '/group-1' },
      items: [
        { title: 'Related Page 1', url: '/related-page-1' },
        { title: 'Related Page 2', url: '/related-page-2' },
      ],
    },
    {
      groupBy: { title: 'Group 2', url: '/group-2' },
      items: [
        { title: 'Related Page 3', url: '/related-page-3' },
        { title: 'Related Page 4', url: '/related-page-4' },
      ],
    },
  ];
</script>
<VRelatedPages :data="relatedPages" />

VSectionRelatedPages

The VSectionRelatedPages component wraps the VRelatedPages component within a VSection, allowing for a title slot and providing a structured layout for displaying related pages.

Props

Prop Name	Type	Required	Description
`data`	`IRelatedPages[]`	Yes	An array of related pages, each containing a group and its items.

Slots

default: Slot for additional content displayed above the related pages.

Example

vue

<script setup lang="ts">
  import VSectionRelatedPages from 'UiKit/components/VRelatedPages/VSectionRelatedPages.vue';
  const relatedPages = [
    {
      groupBy: { title: 'Group 1', url: '/group-1' },
      items: [
        { title: 'Related Page 1', url: '/related-page-1' },
        { title: 'Related Page 2', url: '/related-page-2' },
      ],
    },
  ];
</script>
<VSectionRelatedPages :data="relatedPages">
    <h2>Related Pages</h2>
</VSectionRelatedPages>