PageRelated.vue

<template>
  <aside v-if="items.length">
    <h1 class="text-xl uppercase text-gray-400 font-bold mb-2">
      {{ $t('page.related') }}
    </h1>

    <ul>
      <li
        v-for="(item, index) in items"
        :key="index"
        class="block leading-5 mb-2 text-gray-500"
      >
        <nuxt-link :to="item.path" class="hover:underline">
          {{ item.title }}
        </nuxt-link>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'PageRelated',
  props: {
    document: {
      type: Object,
      required: true,
    },
    path: {
      type: String,
      default: '/',
    },
  },
  data() {
    return {
      items: [],
    }
  },
  async fetch() {
    // Build an array of words from document.title and search on title for this words
    const words = this.document.title
      .replace(/.$/, '') // remove .
      .split(' ')
      .filter((word) => word.length > 3)

    this.items = await this.$content(this.path)
      .where({ title: { $containsAny: words } })
      .limit(6)
      .only(['title', 'path'])
      .fetch()

    // remove current document
    this.items = this.items
      .filter((item) => item.title !== this.document.title)
      .slice(0, 5) // to be sure we return only 5 elements
  },
}
</script>

<style lang="scss" scoped></style>