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

Problem #

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 https://content.nuxtjs.org/fetching but got:

But when I visited the url at http://localhost:3000/_content/pages/home.md, I see the Markdown file

What happened? #

After trying everything from disabling buildModules/modules/loaders to referring to the example at https://github.com/nuxt-company/demo-blog-nuxt-content 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/home.md). So I ended up doing

// pages/index.vue
async asyncData({ $content, error }) {
  try {
    const page = await $content("pages/home.md").fetch();
    return {
      page,
    };
  } catch (err) {
    console.error(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.

Solution #

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

// pages/index.vue
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!