about uscontact

How to filtering content using relation in @nuxt/content

Category:
Author: zemna
Date: April 17, 2021
Share this:

Maybe your site article has relation with categories and tags.

This tutorial shows how to filtering articles by tag.

Add tag content files to content folder

---
name: Test
description: This is test tag
---

Add tags front matter to content

---
title: This is test post
tags:
  - Test
  - Nuxt
---
This is test post. Hello World.

Create tags/_slug/index.vue file

Add where clause to filtering articles by selected tag.

<template>
  <div>
    <!-- Your html code -->
  </div>
</template>
<script>
export default {
  async asyncData({ $content, params }) {
    const tag = await $content('tags', params.slug).fetch()
    const articles = await $content('articles')
      .only(['title', 'description', 'img', 'slug', 'tags'])
      .where({ 'tags': { $contains: tag.name } })
      .sortBy('createdAt', 'asc')
      .fetch()
    return {
      tag,
      articles
    }
  }
}
</script>
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu