Nuxt•3mo ago

Content not being rendered - 404

I hav nuxt content set up, and this nuxt.config.td import { defineContentConfig, defineCollection } from '@nuxt/content' export default defineContentConfig({ collections: { content: defineCollection({ type: 'page', source: '**' }) } }) I have a file called file.md in /app/content but when I go to my app /file I get a 404. nuxt content says it parses a file when starting up dev server, but the path isn't accessible. Docs say that it should be picked up and added as a route automatically

11 Replies

kapa.ai•3mo ago

Hi @JohnBoblem. 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 that Nuxt Content v3 no longer automatically creates routes for Markdown files. Instead, you must create Vue pages that fetch and render your content. The document-driven mode (where Markdown files automatically become routes) was dropped in v3. Now, you need to add a catch-all page (e.g., pages/[...slug].vue) that loads and displays your content using <ContentRenderer>. Here's how you can fix it: 1. Create a catch-all page:
Add a file at pages/[...slug].vue with the following content:

   <script lang="ts" setup>
   const route = useRoute()
   const { data: page } = await useAsyncData(route.path, () => {
     return queryCollection('content').path(route.path).first()
   })
   </script>

   <template>
     <div>
       <ContentRenderer v-if="page" :value="page" />
       <div v-else>Page not found</div>
     </div>
   </template>

   <script lang="ts" setup>
   const route = useRoute()
   const { data: page } = await useAsyncData(route.path, () => {
     return queryCollection('content').path(route.path).first()
   })
   </script>

   <template>
     <div>
       <ContentRenderer v-if="page" :value="page" />
       <div v-else>Page not found</div>
     </div>
   </template>

2. Make sure your content is in the correct directory:
Place your file.md inside the content/ directory at the root of your project (not inside app/content/). 3. Access your content:
Now, visiting /file in your app should render the contents of content/file.md. Summary:
Nuxt Content v3 requires you to manually create a Vue page to render Markdown content. The automatic route generation for Markdown files is no longer available. See the official migration and document-driven mode documentation for more details: Implement Document Driven mode in v3, Changes in v3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

JohnBoblemOP•3mo ago

@kapa.ai Now all other paths don't work as the slug grabs them all. Do I have to keep the docs in separate folder in the pages/ folder?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When you add a catch-all route like pages/[...slug].vue, it will match all paths that aren't matched by a more specific route. This means if you want other pages (e.g., /about, /contact, or any other Vue pages) to work, you should create those as explicit Vue files in your pages/ directory. Nuxt will always prioritize more specific routes over the catch-all route, so your other pages will still work as long as they have their own .vue files. You do not need to keep your docs or content files in a separate folder inside pages/. Your Markdown files should remain in the content/ directory, and your Vue pages (including the catch-all) should be in pages/. The catch-all route is only for rendering content that doesn't have a dedicated Vue page. Example:

pages/
  about.vue        // /about
  contact.vue      // /contact
  [...slug].vue    // all other paths, e.g. /file, /docs/intro, etc.

pages/
  about.vue        // /about
  contact.vue      // /contact
  [...slug].vue    // all other paths, e.g. /file, /docs/intro, etc.

So, you do not need to move your docs to a separate folder in pages/. Just ensure you have explicit Vue files for any routes you want to handle separately, and the catch-all will handle the rest. This is the recommended approach in the Nuxt documentation for catch-all routes and dynamic routing Dynamic Routes & Catch-all Route Implement Document Driven mode in v3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

JohnBoblemOP•3mo ago

@kapa.ai with the [...slug] file can I have subdirectories in my markdown folder and still catch them?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can have subdirectories in your content/ folder, and the pages/[...slug].vue catch-all route will still match and render those Markdown files. The catch-all route captures all paths, including nested ones, and you can use the route.path or route.params.slug to query the correct content file. For example, if you have:

content/
  docs/
    intro.md
    getting-started.md
  blog/
    first-post.md

content/
  docs/
    intro.md
    getting-started.md
  blog/
    first-post.md

Visiting /docs/intro or /blog/first-post will be caught by pages/[...slug].vue, and you can fetch the corresponding Markdown file using the path in your query:

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

This approach is documented in the Nuxt Content migration guide and directory structure docs Implement Document Driven mode in v3 and Directory Structure: content. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

JohnBoblemOP•3mo ago

@kapa.ai How do I force content to use the bun sqlite connector? It's trying to get better-sqlite even if I'm on bun

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To force Nuxt Content to use the Bun SQLite connector, you should explicitly set the database type to sqlite in your nuxt.config.ts. According to the documentation, depending on your runtime environment, different SQLite adapters will be used: for Bun, the bun:sqlite adapter is used automatically when you specify type: 'sqlite' (Database configuration). Example configuration:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      filename: 'SQLITE_DB_LOCATION' // e.g., '.data/content/contents.sqlite'
    }
  }
})

export default defineNuxtConfig({
  content: {
    database: {
      type: 'sqlite',
      filename: 'SQLITE_DB_LOCATION' // e.g., '.data/content/contents.sqlite'
    }
  }
})

If you are still seeing Nuxt Content trying to install or use better-sqlite3 on Bun, ensure you are running your project with Bun and not Node.js. The documentation does not mention a manual override for the connector beyond setting type: 'sqlite', but it does state that Bun uses its own adapter automatically (Database configuration). If you continue to experience issues, please check that you are using the latest version of Nuxt Content and Bun, and refer to the Nuxt Content installation guide for any updates regarding Bun support.

The knowledge sources do not mention a specific config option to force the Bun SQLite connector beyond setting type: 'sqlite' and running under Bun. If you are still having issues, it may be a bug or a limitation not covered in the documentation.

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

kapa.ai•3mo ago

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

Gaming

Programming

Content not being rendered - 404

Did you find this page helpful?