How to make slugs follow file structure?

I’m trying to make the paths (slugs? I get confused over terminology sometimes) of my content follow the file structure under the /content directory, but I can’t get it quite right. You can see my code at https://codesandbox.io/s/uy5lo?file=/nuxt.config.js. This is built on Nuxt 2.13 with target:static.

This is the behavior I hope to achieve:

directory/file  |  resulting path
----------------+----------------
/content        |  
  /hello.md     |  /hello
  /foo.md       |  /foo
  /foo          |
    /bar.md     |  /foo/bar

…or alternatively, this would be fine too:

directory/file  |  resulting path
----------------+----------------
/content        |  
  /hello.md     |  /hello
  /foo          |
    /index.md   |  /foo
    /bar.md     |  /foo/bar

To make this work, I created a _.vue route which fetches content with the {deep: true}. This seems to work fine. I also added the following hook:

  hooks: {
    'content:file:beforeInsert': (document) => {
      // Just strip the leading slash off document.path.
      document.slug = document.path.replace(/^\//, '')
    }
  }

While this works for /hello and /foo/bar, it does not work for /foo. The foo.md file seems to clash with the directory of the same name. I did read in the documentation that “If path […] is a directory it will return an Array”, which sounds like an explanation, but it doesn’t provide a solution.

What did I miss? Thanks for your assistance.

[benjamincanac]

Hi @marcvangend

Could you try with:

const [ doc ] = await $content('', { deep: true }).where({ path: route.path.replace(/\/$/, '') }).fetch()

With this you can also remove your hook.

[benjamincanac]

@marcvangend The first argument of $content can actually be nothing because it defaults to /: https://content.nuxtjs.org/fetching#contentpath-options, so you can do:

await $content({ deep: true }).where({ path: `/${path}` }).fetch()

I agree with you, you should be able to query a file with the same name as a directory, I’ve added this to our roadmap, thanks for your feedback!