Related articles for a Prismic.io / NuxtJS blog • VIARAMI

In order to present your readers with more exciting articles from the blog, you can link articles each time or you can include an automatic recommendation.

In the fifth part of this series I will show you how to easily integrate a “Similar Articles” widget into NuxtJS using the Prismic.io API.

Fortunately, the Prismic Content API provides an easy way to develop a content discovery function.

The request in asyncdata will look something like this

   const relatedposts = await $prismic.api.query(
        [
          $prismic.predicates.similar(post.id, 10),
          $prismic.predicates.at('document.type', 'post')
        ],
        { pageSize: 3 }
      )

“$prismic.predicates.similar” can be combined with other statements In this example, for example, only articles of the article type “post” should be displayed. It is also conceivable, for example, to display only articles with a certain age or day.

The result can then be displayed under the article in the following way:

    <section
      class="grid w-10/12 grid-cols-12 row-gap-16 mx-auto md:col-gap-16"
      v-if="relatedposts.length > 0">
      <div class="col-span-12">
        <h2 class="text-2xl tracking-wider text-center uppercase text-bold">Related posts</h2>
        <div class="w-1/12 mx-auto mt-2 border-b-4 border-gray-400"></div>
      </div>
      <div v-for="post in relatedposts" :key="post.id" class="col-span-12 md:col-span-4">
        <GridPost :postdata="post" :imgsize="'(min-width: 768px) 25vw, 90vw'" />
      </div>
    </section>

The complete code is available directly on Github.

Related Posts