#Nuxt Content - Not picking up *.md and not rendering anything

12 messages · Page 1 of 1 (latest)

mild silo
#

Ive been trying to fix this issue for at least a day now. From what i can tell, my content.config.ts is right and everythings in the right folders too, but even if i try to query the entire collection, absolutely nothing gets returned and all i get is null.

content.config.ts

import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blogs: defineCollection({
      type: 'data',
      source: 'blogs/**/*.md',
      schema: z.object({
        date: z.string(),
        title: z.string(),
        description: z.string(),
      })
    }),
    projects: defineCollection({
      type: 'data',
      source: 'projects/**/*.md',
      schema: z.object({
        date: z.string(),
        title: z.string(),
        description: z.string(),
      })
    })
  }
})

Example blog at /content/blogs/test.md

---
title: "Building a Nuxt Blog"
description: "A simple guide on how to build a blog with Nuxt Content."
date: 2025-04-27
---

# Building a Nuxt Blog

This is the full article content for "Building a Nuxt Blog".

test page to show absolutely everything

<template>
  <div class="p-8">
    <h1>All Content</h1>
    <pre>{{ all }}</pre>
  </div>
</template>

<script setup>
const { data: all } = await useAsyncData('all', () => queryContent().find())
</script>

afaik, it should show all the content, but in return, i get an empty <pre> element

obsidian topazBOT
#

Hi @mild silo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your issue is likely due to two main factors:

1. Collection Type: type: 'data' vs type: 'page'

In your content.config.ts, you have defined your collections with type: 'data'. According to the Nuxt Content documentation, if you want to map Markdown files to pages and have them queryable and renderable as documents, you should use type: 'page' instead of type: 'data'. The data type is intended for structured data (like JSON/YAML), not Markdown documents meant to be rendered as pages or articles.

Corrected config:

import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blogs: defineCollection({
      type: 'page', // <-- change to 'page'
      source: 'blogs/**/*.md',
      schema: z.object({
        date: z.string(),
        title: z.string(),
        description: z.string(),
      })
    }),
    projects: defineCollection({
      type: 'page', // <-- change to 'page'
      source: 'projects/**/*.md',
      schema: z.object({
        date: z.string(),
        title: z.string(),
        description: z.string(),
      })
    })
  }
})

See: Defining Collections

2. Query API: queryContent() is deprecated

In Nuxt Content v3, the queryContent() API has been replaced by queryCollection(). Your test page is using the old API, which will not return any results in v3.

Update your query:

<script setup>
const { data: all } = await useAsyncData('all', () => queryCollection('blogs').all())
</script>

Or, if you want to fetch from both collections, you need to query each separately.

See: Migration Changes

#

Summary of what to fix:

  • Change your collection type to page for Markdown files.
  • Use queryCollection('blogs') instead of queryContent().

After these changes, your Markdown files should be picked up and rendered as expected.

If you want to render the content, use the <ContentRenderer> component with the result of your query. Example:

<template>
  <div v-for="item in all" :key="item._id">
    <ContentRenderer :value="item" />
  </div>
</template>

See: ContentRenderer usage

If you still get no results after these changes, double-check:

  • Your Markdown files are in the correct directory (/content/blogs/).
  • The file names and paths match your source glob pattern.
  • You have restarted your dev server after making config changes.

Let me know if you need more help!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mild silo Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mild silo
#

@obsidian topaz Damn okay, that works now. How would i properly display the content of a blog in a slug ?

obsidian topazBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

To display the content of a blog post by its slug in Nuxt Content, you should:

  1. Create a dynamic page in your pages/ directory, for example: pages/blogs/[slug].vue.

  2. Fetch the blog post using the slug from the route params and queryCollection.

  3. Render the content using the <ContentRenderer> component.

Here’s an example based on the official documentation:

<script setup>
const slug = useRoute().params.slug
const { data: post } = await useAsyncData(`blogs-${slug}`, () => {
  return queryCollection('blogs').path(`/blogs/${slug}`).first()
})
</script>

<template>
  <div>
    <ContentRenderer v-if="post" :value="post" />
    <div v-else>
      <h1>Post Not Found</h1>
      <NuxtLink to="/blogs">Back to all blogs</NuxtLink>
    </div>
  </div>
</template>
  • This will render the blog post if it exists, or show a fallback if not.
  • Make sure your Markdown files are in /content/blogs/ and the slug matches the filename (e.g., test.md → /blogs/test).

You can find more details in the Nuxt Content Markdown documentation and ContentRenderer component docs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mild silo Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mild silo
#

@obsidian topaz Can images that will be used in blog posts also be stored in the content directory

obsidian topazBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Images that you want to use in blog posts should not be stored in the content/ directory. According to the Nuxt Content documentation, images should be placed in the public/ directory. You can then reference them in your Markdown files using a path like /image.png if the image is at public/image.png Images in Markdown.

For example, your project structure should look like this:

content/
  blogs/
    my-post.md
public/
  image.png

And in your Markdown:

![my image](/image.png)

Storing images in the content/ directory is not supported for direct usage in Markdown content Images in Markdown.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: