[Feature Request] Get content of subdirectories also

[nuxt]

[Feature Request] Get content of subdirectories also

[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()

[benjamincanac]

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

[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]

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>

[mathieunicolas]

That’s great, thanks for your quick answer !

[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 ?