Remove file extensions from path when querying with @nuxt/content


I was migrating this blog from hmsk/frontmatter-markdown-loader to @nuxt/content to make use of @nuxt/content's powerful Markdown query features and faced a weird bug when I was setting things up. I adapted the code from but got:

Nuxt content request failed

But when I visited the url at http://localhost:3000/_content/pages/ , I see the Markdown file Nuxt content request successful

What happened?

After trying everything from disabling buildModules/modules/loaders to referring to the example at to setting up a new Nuxt project with the content module enabled with yarn create nuxt-app. I finally realized what I did wrong.

@nuxt/content's API is $content(path, options?), and the properties of path listed on their documentation is

Type: String
Default: /

Which I took to be the full path of the file (in this case pages/ So I ended up doing

async asyncData({ $content, error }) {
  try {
    const page = await $content("pages/").fetch();
    return {
  } catch (err) {
    error({ statusCode: 404, message: 'Post not found' });
  return {};

Which led to the weird situation where the markdown file wasn't fetched in asyncData, but somehow worked when I visited the request URL directly (this is likely a bug/not expected behaviour since the documentation also specifies that the API endpoint should be queried without the file extensions.


The fix was simple. All I had to do was to remove the file extension from the page and everything worked beautifully!

const page = await $content("pages/home").fetch();

Final Thoughts

Despite wasting more than half a day trying to figure out this lame if-only-I-understood-the-docs better/if-only-the-docs-had-better-examples bug, I was quite happy with how easily I can query, filter, sort through the markdown files with the @nuxt/content API. It's way better compared to the queries I wrote last time to power this blog. @nuxt/content plays very well with Netlify CMS as well, quite excited to add in features (like search) with the capabilities of @nuxt/content!