Retrieve all nested content files and organize them by their respective directories in Nuxt content

Question

Retrieve all nested content files and organize them by their respective directories in Nuxt content

My blogposts are stored in a list called articles fetched from the content folder.

  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      //  .where({ cat: 'A' })
      .only(['title', 'description', 'img', 'slug', 'cat'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  }

This code retrieves all my articles and generates a list of them.

Now, I want to categorize my website using this structure :

<template>
  <div class="container">
    <div v-for="article in articles" :key="article">
      {{ article.title }}
    </div>
    <pre> {{ articles }}</pre>

    <div v-for="accordion in accordions" :key="accordion.title" class="l">
      <Item>
        <template #title>
          {{ accordion.title }}
        </template>

        <template #content>
          <div> {{ accordion.text }}</div>
        </template>
      </Item>
    </div>
    <!-- R goes here -->
    <div class="r" />
  </div>
</template>

<script>
import Item from '../components/List-item.vue'
export default {
  components: { Item },
  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      //  .where({ cat: 'A' })
      .only(['title', 'description', 'img', 'slug', 'cat'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  },
  data () {
    return {
      accordions: [
        {
          title: 'A',
          text: 'Projects from content/A'
        },
        {
          title: 'B',
          text: 'Projects from content/B'
        },
        {
          title: 'C',
          text: 'Projects from content/C'
        }
      ]
}
</script>

A component with slots is being used :

<template>
  <div class="wrapper">
    <div
      :class="{ active: isActive }"
      @click="toggle"
    >
      <a class="title">
        <slot name="title" />
      </a>

      <div v-show="show" :class="{ active: isActive }" class="content">
        <slot name="content" />
      </div>
    </div>
  </div>
</template>

The array is nested in a v-for loop, but I'm unsure how to dynamically group it by URL or category.

javascript vue.js nuxt.js nuxt-content

Answer 1

Answer №1

To create a dynamic accordion view that organizes queried articles by category, update the data structure to include the relevant articles...

async asyncData ({ $content }) {
  const articles = await $content('', { deep: true })
    .only(['title', 'description', 'img', 'slug', 'cat'])
    .sortBy('createdAt', 'asc')
    .fetch()

  // group articles by category for accordion display
  const groups = articles.reduce((acc, article) => {
    if (!acc[article.cat]) acc[article.cat] = { 
      title: article.cat,
      text: `Articles about ${article.cat}`,
      articles: []  // <-- gather the articles for this cat here
    };
    acc[article.cat].articles.push(article);
    return acc;
  }, {});
  this.accordions = Object.values(groups);
}

The HTML should loop through the accordion object in data (representing categories), and then iterate over the articles within each category...

<div v-for="accordion in accordions" :key="accordion.title" class="l">
  <Item>
    <template #title>
      {{ accordion.title }}
    </template>

    <template #content>
      <div> {{ accordion.text }}</div>
      <ul>
        <li v-for="(article, i) in accordion.articles" :key="i">
          {{article.title}}
        </li>
      </ul>
    </template>
  </Item>
</div>

Answer 2

To create a dynamic accordion view that organizes queried articles by category, update the data structure to include the relevant articles...

async asyncData ({ $content }) {
  const articles = await $content('', { deep: true })
    .only(['title', 'description', 'img', 'slug', 'cat'])
    .sortBy('createdAt', 'asc')
    .fetch()

  // group articles by category for accordion display
  const groups = articles.reduce((acc, article) => {
    if (!acc[article.cat]) acc[article.cat] = { 
      title: article.cat,
      text: `Articles about ${article.cat}`,
      articles: []  // <-- gather the articles for this cat here
    };
    acc[article.cat].articles.push(article);
    return acc;
  }, {});
  this.accordions = Object.values(groups);
}

The HTML should loop through the accordion object in data (representing categories), and then iterate over the articles within each category...

<div v-for="accordion in accordions" :key="accordion.title" class="l">
  <Item>
    <template #title>
      {{ accordion.title }}
    </template>

    <template #content>
      <div> {{ accordion.text }}</div>
      <ul>
        <li v-for="(article, i) in accordion.articles" :key="i">
          {{article.title}}
        </li>
      </ul>
    </template>
  </Item>
</div>

Answer 3

Answer №2

Here is my approach to achieving this goal, focusing on maintaining dynamic functionality and reducing the chances of errors.

<template>
  <div class="container">
    <div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey">
      <h2>{{ categoryKey }}</h2>
      <list-item v-for="article in filteredArticles" :key="article.slug">
        <template #title>
          {{ article.title }}
        </template>
        <template #content>
          <div> {{ article.description }}</div>
        </template>
        <br>
      </list-item>
      <hr>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      .only(['title', 'description', 'img', 'slug', 'cat', 'dir'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  },
  computed: {
    groupedCategories () {
      return this.articles.reduce((finalObject, obj) => {
        const directory = obj.dir
        finalObject[directory] ?? (finalObject[directory] = [])
        finalObject[directory].push(obj)
        return finalObject
      }, {})
    }
  }
}
</script>

The .only(['dir']) method retrieves all directories such as /A, /B, etc., ensuring full dynamism without relying on manually adding a cat parameter in the .md file.
This system works for any content type, eliminating the need for complicated regex subgroups, as illustrated here.

We then utilize a reduce operation to categorize articles based on their respective directories, using the dir attribute described earlier.

The documentation's Logical Nullish Assignment operator didn't function properly, so I replaced it with an equivalent code

finalObject[directory] ?? (finalObject[directory] = [])

to handle non-existent keys by creating a new array.

The main objective here is to create an object with keys representing directories, each containing an array of associated articles.

Below are screenshots of how it appears locally and in Vue devtools.

https://i.sstatic.net/aUGv2.jpg

You can access the GitHub repository at: https://github.com/kissu/AppPortfolio. This resource proves useful for simulating various types of .md files effortlessly.
For a live demonstration, visit:

Answer 4

Here is my approach to achieving this goal, focusing on maintaining dynamic functionality and reducing the chances of errors.

<template>
  <div class="container">
    <div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey">
      <h2>{{ categoryKey }}</h2>
      <list-item v-for="article in filteredArticles" :key="article.slug">
        <template #title>
          {{ article.title }}
        </template>
        <template #content>
          <div> {{ article.description }}</div>
        </template>
        <br>
      </list-item>
      <hr>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const articles = await $content('', { deep: true })
      .only(['title', 'description', 'img', 'slug', 'cat', 'dir'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  },
  computed: {
    groupedCategories () {
      return this.articles.reduce((finalObject, obj) => {
        const directory = obj.dir
        finalObject[directory] ?? (finalObject[directory] = [])
        finalObject[directory].push(obj)
        return finalObject
      }, {})
    }
  }
}
</script>

The .only(['dir']) method retrieves all directories such as /A, /B, etc., ensuring full dynamism without relying on manually adding a cat parameter in the .md file.
This system works for any content type, eliminating the need for complicated regex subgroups, as illustrated here.

We then utilize a reduce operation to categorize articles based on their respective directories, using the dir attribute described earlier.

The documentation's Logical Nullish Assignment operator didn't function properly, so I replaced it with an equivalent code

finalObject[directory] ?? (finalObject[directory] = [])

to handle non-existent keys by creating a new array.

The main objective here is to create an object with keys representing directories, each containing an array of associated articles.

Below are screenshots of how it appears locally and in Vue devtools.

https://i.sstatic.net/aUGv2.jpg

You can access the GitHub repository at: https://github.com/kissu/AppPortfolio. This resource proves useful for simulating various types of .md files effortlessly.
For a live demonstration, visit:

Answer 5

Answer №3

To implement conditional queries using the @nuxt-content module, you can utilize the following code:

{
  async asyncData ({ $content }) {
    const articlesC = await $content('', { deep: true })
      .where({ cat: { $contains: 'C' } })
      // Or .where({ cat: { $eq: 'C' } })
      .only(['title', 'description', 'img', 'slug', 'cat'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  }
}

Additionally, you can create an array for each category and use the Array.filter (or Array.reduce) method to group your articles into a single query.

Answer 6

To implement conditional queries using the @nuxt-content module, you can utilize the following code:

{
  async asyncData ({ $content }) {
    const articlesC = await $content('', { deep: true })
      .where({ cat: { $contains: 'C' } })
      // Or .where({ cat: { $eq: 'C' } })
      .only(['title', 'description', 'img', 'slug', 'cat'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return { articles }
  }
}

Additionally, you can create an array for each category and use the Array.filter (or Array.reduce) method to group your articles into a single query.

Retrieve all nested content files and organize them by their respective directories in Nuxt content

Answer №1

Answer №2

Answer №3

Similar questions

Combine elements from two separate arrays

Tips for establishing communication between a React Native webView and a React web application

Update a separate React component in response to the interaction with a different React component

Utilizing jQuery for displaying or hiding list elements

Methods for automatically refreshing a vue.js application when there are changes in the SQL table data

Accessing a file url with Firefox using protractor

Utilizing axios and Vue to access the Twitch API

How to jest at node_modules that provide a function?

What is the best way to manage numerous query parameters in JavaScript?

Using JavaScript to obtain the coordinates of a click event from a programmatically triggered click on an HTML element

Display the dialog box whenever a user hovers over an element in a Vuet

Tips for circumventing CORS in an ajax request using various browser extensions or add-ons

The issue with window.addEventListener failing to update state when the scrollY is not at zero persists during route changes

What methods can be used to prevent the appearance of the ActiveX warning in IE7 and IE8 when dealing with drop

The Bootstrap 5 navigation bar does not extend to the full width of its parent

Having trouble with loading JSON due to a Cross-Domain AJAX problem

Is there an issue preventing Three.js from rendering properly?

Unspecified variable in AngularJS data binding with Onsen UI

The directional rotation plugins of GSAP are incompatible with the plugins of PIXI

What is the best way to convert this jQuery code into an AngularJS implementation?