Loading sub-directory content as categories

Hi, I’m trying to write help articles based on a series of folders and content files within them, for example:

content/
├─ help/
│  ├─ account/
│  │  ├─ introduction.md
│  │  ├─ all-about-accounts.md
│  ├─ domains/
│  │  ├─ introduction.md
│  │  ├─ all-about-domains.md
│  ├─ monitors/
│  │  ├─ introduction.md
│  │  ├─ all-about-monitors.md

My sub-folders are my categories, and each introduction.md file is it’s meta details which can then be displayed on some blog page showing all the categories. All the other files in those folders are the individual posts.

I want my URLs for instance to be: /help/account/all-about-introduction but I’m having trouble displaying and obtaining the content for each of those using the fetch() method.

I’ve got a page and folder set up like this:

pages/
├─ help/
│  ├─ index.vue
│  ├─ _slug/
│  │  ├─ _slug.vue

And my async function to try and get data from my category folders within /_slug/_slug.vue is:

async asyncData ({ $content, params }) {
  const guide = await $content('help/account', params.slug)
                      .fetch()

  return {
    guide
  }
}

How can I achieve this?

[NozomuIkuta]

@sts-ryan-holton

If I understand what you mean correctly, you want to show like this, don’t you?

<!-- Each list item is a link to introduction page -->
- Category 1 (1)
- Category 2 (2)

If so, taking a look at how Theme Docs renders its left sidebar will be helpful.

First, Theme Docs fetches all the pages and group them by category property defined in the front matter (code). Second, Theme Docs iterates the object, where key is category and value is an array of documents, with nested v-for (code).

Here is a simplified demo (CodeSandbox).

Note that Theme Docs guarantees the order of categories and pages by defining position in each document and setting a sortBy() query when fetching.

By the way, you might want to refer to Fetching content page of the official site, so that you will come up with a variety of ways of fetching as you want.

[sts-ryan-holton]

@NozomuIkuta I’ve implemented a strategy into my website to achieve the above as per your suggestions and it seems to work! You can check out the Help section of my website if you’re interested 😃 https://domain-monitor.io/