about uscontact

How to filtering content using relation in @nuxt/content

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
  - Test
  - Nuxt
This is test post. Hello World.

Create tags/_slug/index.vue file

Add where clause to filtering articles by selected tag.

    <!-- Your html code -->
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')
    return {
Share this:

Leave a Reply

Your email address will not be published.


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 ❤️