Content: [Feature Request] Get content of subdirectories also

[TheLearneer]

Feature Idea

When fetching a content from a directory it would be awesome to have the content from the sub directories listed as well.

Expected behaviour

-| content/
---| articles/
------| article.md
------| new/
---------| inside-new.md

Current with the directory tree as above if I fetch the content as

await this.$content('articles').fetch()

only article is in the response. It would be awesome to have the content from subdirectory of articles, in this case new would be fetched as well.
i.e. article and inside-new would all be in the resposne after fetch.

Possible solution

I agree not everyone would love to have this behavious by default. So I thought of two possible solutions to have this feature and also keep the current behavious

1. Pass a boolean parameter to .fetch() method, depending on which the subdirectory will be or won't be fetched... Default can be false for the compatibility with current bahaviour.

2. Add a new method which acts just like fetch but gets content from subdirectories as well.. something like .fetchDeep() or anything that makes sense.

Other stuffs

I am loving this module a lot. It makes lots of things really easier compared to how annoying they were earlier.
Regarding the feature request, that is just my idea. I would love to know if that would not be possible or won't be implemented.

:heart: Nuxt.js

[benjamincanac]

Hey @TheLearneer,

We've taken into account this feature already and will be working on it soon :).

Is should be more like:

await this.$content('articles', { deep: true }).fetch()

[mathieunicolas]

Hello there,

I just created a fresh new nuxt project in SPA with @nuxt/content with npx / npm tools.
My install couldn't be more simple, as there's :

• 3 markdown files in the content folder
• articles subfolder
• 1 markdown file in the articles subfolder

Well, when I add { deep: true } as a second argument, I get the "! Not Found - Back to the home page" error when I go to localhost:3000 while running npm run dev.

Here's the line where I add or remove the option :
const page = await $content('', { deep: true }).fetch();

And here's the whole <script> tag :

<script>
export default {
    async asyncData ({ $content }) {
        const page = await $content('', { deep: true }).fetch();

        return { page }
    }
}
</script>

[benjamincanac]

@mathieunicolas This PR is not yet published and will be available in the future v1.3.0.

In the meantime, you can try it by setting your @nuxt/content dependency to the GitHub repo:

{
  "dependencies": {
    "@nuxt/content": "nuxt/content"
  }
}

[mathieunicolas]

That’s great, thanks for your quick answer !

[benjamincanac]

@mathieunicolas This feature has been released in v1.3.0!

[tylerforesthauser]

Hey hey! This is a great feature and I'm grateful it's finally available. However, I have a question about paths/slugs. If we want our routes to match the directory structure of our content, how would one best go about handling this? Is it safe to simply use path (while stripping leading /)?

[tylerforesthauser]

To answer my own question (but still look for some guidance if I'm out to lunch), I've come up with the following solution:

hooks: {
    'content:file:beforeInsert': (document) => {
      if (document.extension === '.md') {
        const path = document.path
        const slug = path.replace(/^\/+/, '')
        document.slug = slug
      }
    }
  }

I feel like I'm missing some circumstance(s) where this might cause issues...

[mathieunicolas]

@tylerforesthauser I'd like to help because I'm in this module since a couple of days, but I don't understand your question : doesn't the routes naturally match the directory structure ?
If you create a global dynamic route (_.vue) in the root of your /pages folder, you can handle all the files, no matter how deep they are in subdirectories, can't you ?