Nuxt•2mo ago

Nuxt Content in a Nuxt Layers project basic setup help

I'm trying to use Nuxt Content 3.2.2 in a Nuxt 3.15 Layers project. I'm not seeing my markdown content render (or not being found really) and reproduced the basic issue here: https://stackblitz.com/edit/github-qygkyxfh. I'm trying to keep my markdown content in a layer called /blog with the project also having two other layers of /core and /site that holds other site components, pages, and layouts. I've tried following the Nuxt Content docs to set things up in my /blog layer with modules: ['@nuxt/content'] being added to my /blog 's nuxt.config.ts file and have the suggested content.config.ts file setup. Also have a /blog/pages/[...slug].vue file with code to hopefully match the route and serve up the proper markdown content. The markdown content does live in /blog/content and I think the markdown files have the proper setup. I'm expecting navigations to [site.com]/ to display components and stuff from my /site/pages/index.vue - which it does👍🏼. I expect hitting [site.com]/mypost would render content from a /blog/content/mypost.md file but looks like no content is found. Actually, when spinning up the dev server I do see that @nuxt/content says it processed 2 collections with 0 files. So my guess is I don't have the sourcing of the files set properly. I've tried defining the content collections with the help of AI in the nuxt.config.ts and content.config.ts files of the /blog layer but I keep getting outdated suggestions that don't seem compatible with the type checking that is happening. I also tried adding a /blog/pages/index.vue but that isn't what I want since it overrides my /site/pages/index.vue and I want to create url that matches the file name. I've also tried different variations of source like '**', '/blog/**, /blog/content/** in the defineCollection() of my content.config.ts file with no luck.

34 Replies

kapa.ai•2mo ago

Hi @Brian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, I can offer some guidance on setting up Nuxt Content in a Nuxt Layers project. However, it's important to note that the knowledge sources don't specifically address Nuxt Layers, so I'll focus on the Nuxt Content setup and potential issues. 1. Content Configuration: Make sure your content.config.ts file in the /blog layer is correctly set up. Here's an example of how it should look:

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

   export default defineContentConfig({
     collections: {
       blog: defineCollection({
         source: 'content/**/*.md',
         type: 'page'
       })
     }
   })

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

   export default defineContentConfig({
     collections: {
       blog: defineCollection({
         source: 'content/**/*.md',
         type: 'page'
       })
     }
   })

This configuration tells Nuxt Content to look for Markdown files in the content directory and its subdirectories within the /blog layer. 2. Module Registration: Ensure that the Nuxt Content module is correctly registered in your /blog/nuxt.config.ts file:

   export default defineNuxtConfig({
     modules: ['@nuxt/content']
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/content']
   })

3. Catch-all Route: Your /blog/pages/[...slug].vue file should be set up to render the content. Here's an example of how it could look:

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

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

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

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

This setup uses the queryCollection utility to fetch the content based on the current route path Nuxt Content - Query with Type-Safety. 4. Collection Source: If your content is not being found, double-check the source parameter in your defineCollection call. Make sure it correctly points to where your Markdown files are located within the /blog layer. 5. Content Processing: The fact that Nuxt Content reports processing 2 collections with 0 files suggests that it's finding the collections but not the actual content files. This could be due to incorrect file paths or permissions issues. 6. Markdown File Structure: Ensure your Markdown files in /blog/content are correctly structured. They should have a frontmatter section (if needed) and the main content. For example:

   ---
   title: My Post
   ---

   # My Post Content

   This is the content of my post.

   ---
   title: My Post
   ---

   # My Post Content

   This is the content of my post.

7. Nuxt Layers Compatibility: While the knowledge sources don't specifically address Nuxt Layers, it's worth noting that Nuxt Content should work within a layer. However, you might need to ensure that the layer containing Nuxt Content is correctly extended by your main Nuxt application. Given the complexity of your setup with multiple layers, it might be helpful to temporarily simplify your project structure to isolate the Nuxt Content issue. Try setting up Nuxt Content in a single layer or in the main project first, and then gradually reintroduce the layer structure once you've confirmed it's working correctly. If you continue to face issues, you might want to check the Nuxt Content GitHub repository for any known issues related to Nuxt Layers or consider reaching out to the Nuxt community forums for more specific guidance on using Nuxt Content with Layers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai Hmm, I've tried a few variations of the changes you suggested by testing different versions of the source value including the one you suggested. @nuxt/content still doesn't seem to be picking up the markdown files. Using blog: defineCollection() I've tried '**', 'content/**', 'content/**/*.md', and 'content/*.md'.
For more context, my root nuxt.config.ts extends the layers and also maps some directories in this way:

  extends: ['blog', 'core', 'site'],
  dir: {
    assets: '~/core/assets',
    layouts: '~/site/layouts',
    pages: '~/site/pages',

  extends: ['blog', 'core', 'site'],
  dir: {
    assets: '~/core/assets',
    layouts: '~/site/layouts',
    pages: '~/site/pages',

I wouldn't need to add my /blog layer to dir since it should be extending properly to the rest of the project with the extends array right? And I'm fine to not add modules: ['@nuxt/content'] to this root nuxt.config.ts file right?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Brian, I am experiencing especially high traffic right now, please try again. :technologist:

BrianOP•2mo ago

@kapa.ai Are you free now? Any thoughts on my last message?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I'm an AI assistant specifically tuned to answer questions about Nuxt. I don't have personal availability or thoughts outside of the information provided in the knowledge sources. If you have any specific questions about Nuxt, Nuxt Content, or related topics, I'd be happy to help you with those based on the available information. Is there a particular aspect of your Nuxt Content setup or Nuxt Layers project that you'd like more clarification on? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai I've tried a few variations of the changes you suggested by testing different versions of the source value including the one you mentioned. @nuxt/content still doesn't seem to be picking up the markdown files. Using blog: defineCollection() I've tried '**', 'content/**', 'content/**/*.md', and 'content/*.md'. For more context, my root nuxt.config.ts extends the layers and also maps some directories in this way:

  extends: ['blog', 'core', 'site'],
  dir: {
    assets: '~/core/assets',
    layouts: '~/site/layouts',
    pages: '~/site/pages',

  extends: ['blog', 'core', 'site'],
  dir: {
    assets: '~/core/assets',
    layouts: '~/site/layouts',
    pages: '~/site/pages',

I wouldn't need to add my /blog layer to dir since it should be extending properly to the rest of the project with the extends array right? And I'm fine to not add modules: ['@nuxt/content'] to this root nuxt.config.ts file right?

leamsigc•2mo ago

What is the content for the content.config.ts for the nuxt content configuration

leamsigc•2mo ago

Here is a example that pick up all md in the content folder https://github.com/leamsigc/nuxt-better-auth-drizzle/blob/main/content.config.ts

GitHub

nuxt-better-auth-drizzle/content.config.ts at main · leamsigc/nuxt-...

Nuxt 4 Integration with Better auth and Drizzle ORM - leamsigc/nuxt-better-auth-drizzle

leamsigc•2mo ago

This example is using nuxt SEO, if youre not using that module you can remove asSeoCollection and the "(" and end ")"

leamsigc•2mo ago

Remember that https://content.nuxt.com/docs/getting-started/installation https://content.nuxt.com/docs/getting-started/migration v3 is different from the stackblitz example

Nuxt Content

Installation - Nuxt Content

Get started with Nuxt Content v3 in your Nuxt application.

Nuxt Content

Migration - Nuxt Content

How to migrate from v2 to v3

BrianOP•2mo ago

Hey @leamsigc thanks for your reply and for your project reference. Yeah, my content.config.ts contains:

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
    }),
  },
});

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
    }),
  },
});

Which is the same as the suggested setup in the installation docs. It just lives in a Nuxt Layer in the /blog of the project root. I'm expecting it to work the same as your example and grab all the markdown in /blog/content as oppose to where you have the files in /content at the root. I also have the [...slug].vue file in /blog/pages which seems to follow the Document Driven section of the migration docs Given the dev server says 0 files from 2 collections are being processed, I think I need to fix what I am putting in source:. And I need to understand why it gets two collections when I thought I was only defining one collection. That could be the cause of the issue too maybe. @kapa.ai When defining Nuxt Content collections, I don't need to define the schema object in my content.config.ts file right? User leamsigc has the schema object defined in a Nuxt Content implementation. I do not have it defined, but that is ok right? Setting up Nuxt Content in a Nuxt Layers project, do I have to remap the directory of the default /content folder that lives at the root of a Nuxt project normally to the layer folder where I would like my markdown content to reside? For my example do I need to map the /content directory to /blog/content in the root nuxt.config.ts if I am setting up Nuxt Content within a /blog layer? And I am ok to add the @nuxt/content module in the nuxt.config.ts file of the /blog layer folder? And Nuxt Layer folders can reside at the root of a project as opposed to the /layers folder at the root right?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information you've provided and the knowledge sources available, I can offer some clarifications and suggestions for your Nuxt Content setup in a Nuxt Layers project: 1. Collection Configuration: Your content.config.ts setup looks correct. However, since you're using a layer structure, you might need to adjust the source to explicitly point to your content within the /blog layer:

   export default defineContentConfig({
     collections: {
       content: defineCollection({
         type: 'page',
         source: '/blog/content/**/*.md',
       }),
     },
   });

   export default defineContentConfig({
     collections: {
       content: defineCollection({
         type: 'page',
         source: '/blog/content/**/*.md',
       }),
     },
   });

This change might help Nuxt Content find your Markdown files correctly. 2. Multiple Collections: The fact that the dev server reports 2 collections with 0 files is interesting. By default, Nuxt Content creates a content collection if no configuration is provided Nuxt Content - Define Content Collections. It's possible that you have another collection defined elsewhere in your project, or there's a default collection being created alongside your custom one. 3. Schema Definition: You're correct that defining a schema in content.config.ts is optional. According to the documentation, "On top of the built-in fields, you can define a schema by adding the schema property to your collection" Nuxt Content - Collection Schema. So, not having a schema defined is perfectly fine if you don't need custom fields or validation. 4. Nuxt Layers and Content Directory: Regarding your question about remapping the /content directory, the knowledge sources don't provide specific information about this in the context of Nuxt Layers. However, based on general Nuxt principles, you should be able to keep your content within the /blog layer without remapping in the root nuxt.config.ts. 5. Module Registration in Layers: Adding the @nuxt/content module in the nuxt.config.ts file of the /blog layer should work. Nuxt Layers allow you to extend the configuration, including modules, from within a layer Nuxt Layers - YouTube. 6. Layer Location: Yes, Nuxt Layer folders can reside at the root of a project. They don't necessarily need to be in a /layers folder. The important thing is that they are correctly referenced and extended in your main Nuxt configuration. Given that your setup seems mostly correct based on the documentation, the main issue might be related to how Nuxt Content is finding (or not finding) your Markdown files within the layer structure. Try adjusting the source in your content.config.ts as suggested above, and ensure that your layer is correctly extended in your main Nuxt configuration. If you continue to face issues, it might be worth creating a minimal reproduction of your layer structure and Nuxt Content setup to share with the Nuxt community or on GitHub, as the interaction between Nuxt Layers and Nuxt Content might have some nuances not fully covered in the current documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai The Nuxt Content documentation somtimes uses collections: { docs: defineCollection() } } and sometimes collections: { content: defineCollection() } } in example content.config.ts files to define collections. Which one should I use if my markdown files reside in /blog/content ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in the knowledge sources, I can clarify the usage of collection names in the content.config.ts file for Nuxt Content. The choice between docs and content as collection names is arbitrary and depends on your specific use case. Both examples you mentioned are valid ways to define a collection. The key point is that the collection name you choose will be used when querying your content. Given that your markdown files reside in /blog/content, you might want to consider using a more descriptive name for your collection, such as blog. Here's how you could define it:

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

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'content/**/*.md'
    })
  }
})

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

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'content/**/*.md'
    })
  }
})

This setup tells Nuxt Content to look for Markdown files in the content directory and its subdirectories within your /blog layer. The important thing is to be consistent with the collection name you choose. When you query your content, you'll use this name. For example:

const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())

const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())

Remember, the collection name (blog in this case) is what you'll use in your queryCollection calls Nuxt Content - Query with Type-Safety. If you prefer to stick with either docs or content as your collection name, that's perfectly fine too. The key is to choose a name that makes sense for your project structure and content organization, and then use that name consistently in your configuration and queries. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai If I have a content.config.ts file defined in my /blog layer, do I need anything related to Nuxt Content defined in the nuxt.config.ts file of the /blog layer? And if I have /blog, /core , and /site layers at the root of my project, each with their own nuxt.config.ts files and I extend them in the root nuxt.config.ts file with a extends: ['blog', 'core', 'site'] would that be sufficient to correclty reference and extend those layers to the whole Nuxt project?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources and your question, I can provide the following information: 1. Regarding the nuxt.config.ts file in your /blog layer: Yes, you still need to define the Nuxt Content module in the nuxt.config.ts file of your /blog layer. This is necessary to ensure that the Nuxt Content module is loaded and initialized for that layer. Your /blog/nuxt.config.ts should include:

   export default defineNuxtConfig({
     modules: ['@nuxt/content']
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/content']
   })

This configuration is essential for activating the Nuxt Content module within your /blog layer Nuxt Content - Installation. 2. Regarding extending layers in the root nuxt.config.ts: Your approach of extending the layers in the root nuxt.config.ts file is correct. However, the syntax you've provided might need a slight adjustment. According to the Nuxt documentation on layers, the correct way to extend layers is as follows:

   export default defineNuxtConfig({
     extends: [
       './blog',
       './core',
       './site'
     ]
   })

   export default defineNuxtConfig({
     extends: [
       './blog',
       './core',
       './site'
     ]
   })

This configuration tells Nuxt to extend your project with the /blog, /core, and /site layers Nuxt Layers - Usage. It's worth noting that Nuxt will automatically register any layers within your project's layers directory. However, since your layers are at the root of your project, explicitly extending them in the root nuxt.config.ts as shown above is the correct approach. Remember that the order of the layers in the extends array matters. Earlier items in the array have higher priority and can override later ones. So in your case, /blog would have the highest priority, followed by /core, and then /site. This setup should correctly reference and extend those layers to your entire Nuxt project, allowing you to organize your code and configurations across these different layers while still maintaining a cohesive application structure. Nuxt Layers - Usage Nuxt Content - Installation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai Thanks, I do have modules: ['@nuxt/content'] in the nuxt.config.ts of /blog already.
Are there any issues with having front matter defined in the markdown files if I don't have a schema object defined in my content.config.ts file? I only have title and description defined but would these cause any issues with no schema defined? Should I remove the front matter portion from my markdown files. Front matter is any content between a set of --- at the top of the markdown file correct?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information from the knowledge sources and your question, I can provide the following answer: 1. Front matter in Markdown files: You're correct about the definition of front matter. It is indeed the content between two sets of --- at the top of a Markdown file. According to the Nuxt Content documentation, "Frontmatter is a convention of Markdown-based CMS to provide meta-data to pages, like description or title or any other data you would like to store as key: value pair." Nuxt Content - Frontmatter 2. Using front matter without a defined schema: There are no issues with having front matter in your Markdown files even if you don't have a schema object defined in your content.config.ts file. The schema is optional and is used for additional validation and typing. Not having a schema defined does not prevent you from using front matter. 3. Native parameters: Nuxt Content has some native parameters that it recognizes by default, including title and description. These are perfectly fine to use in your front matter without explicitly defining them in a schema. The documentation states: | Key | Type | Default | Description | |-----|------|---------|-------------| | title | string | First <h1> of the page | Title of the page, will also be injected in metas | | description | string | First <p> of the page | Description of the page, will be shown below the title and injected into the metas | Nuxt Content - Native parameters 4. Keeping or removing front matter: You should keep the front matter in your Markdown files. It's a useful way to provide metadata for your content, and Nuxt Content is designed to work with it. The title and description you're using are particularly useful as they're recognized by Nuxt Content and can be used for SEO purposes. In conclusion, you can safely keep your front matter with title and description in your Markdown files, even without a defined schema in content.config.ts. These fields are natively supported by Nuxt Content and will not cause any issues. The front matter provides valuable metadata for your content and can be utilized by Nuxt Content for various purposes, including SEO optimization. Nuxt Content - Frontmatter Nuxt Content - Native parameters ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai Could Nuxt Content not finding my markdown files have anything to do with dir: { pages: '~/site/pages' }} being defined on the root nuxt.config.ts file and me trying to match markdown files in blog/content/mypost.md to a url of [site.com]/mypost ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your question raises an interesting point about the interaction between Nuxt's directory configuration and Nuxt Content's file discovery process. Based on the available knowledge sources and the context of your setup, I can provide some insights: 1. Directory Configuration: The dir configuration in your root nuxt.config.ts file does indeed affect how Nuxt handles routing and file discovery. By setting dir: { pages: '~/site/pages' }, you're telling Nuxt to look for page components in the /site/pages directory instead of the default /pages directory at the root. 2. Nuxt Content File Discovery: Nuxt Content, by default, looks for content files in the /content directory at the root of your project. However, in your case, you've placed the content files in /blog/content. 3. Potential Conflict: The mismatch between where Nuxt is looking for pages (/site/pages) and where Nuxt Content is looking for content files (/blog/content) could indeed be contributing to the issue of Nuxt Content not finding your markdown files. To resolve this, you have a few options: 1. Update Content Source: In your /blog/content.config.ts file, explicitly specify the source of your content:

   export default defineContentConfig({
     collections: {
       blog: defineCollection({
         type: 'page',
         source: '/blog/content/**/*.md'
       })
     }
   })

   export default defineContentConfig({
     collections: {
       blog: defineCollection({
         type: 'page',
         source: '/blog/content/**/*.md'
       })
     }
   })

This tells Nuxt Content exactly where to look for your markdown files. 2. Adjust Routing: Ensure that your catch-all route in /blog/pages/[...slug].vue is correctly set up to handle the routing for your content pages. This file should use the queryCollection utility to fetch the correct content based on the current route. 3. Content Directory Configuration: If possible, consider adding a content directory configuration in your root nuxt.config.ts:

   export default defineNuxtConfig({
     // ... other configurations
     content: {
       sources: {
         blog: {
           driver: 'fs',
           base: resolve(__dirname, 'blog/content')
         }
       }
     }
   })

   export default defineNuxtConfig({
     // ... other configurations
     content: {
       sources: {
         blog: {
           driver: 'fs',
           base: resolve(__dirname, 'blog/content')
         }
       }
     }
   })

This explicitly tells Nuxt Content where to find your content files. 4. Layer Extension: Make sure your /blog layer is correctly extended in your root nuxt.config.ts:

   export default defineNuxtConfig({
     extends: ['./blog', './core', './site'],
     // ... other configurations
   })

   export default defineNuxtConfig({
     extends: ['./blog', './core', './site'],
     // ... other configurations
   })

This ensures that the configurations from your /blog layer (including Nuxt Content setup) are properly incorporated into your main Nuxt application. Given the complexity of your setup with multiple layers and custom directory configurations, it's possible that the issue stems from a combination of these factors. You might need to adjust both your Nuxt Content configuration and your overall Nuxt configuration to ensure they work together correctly. If these suggestions don't resolve the issue, you might want to consider creating a minimal reproduction of your setup to share with the Nuxt community or on GitHub, as the interaction between Nuxt Layers, custom directory configurations, and Nuxt Content might have some nuances not fully covered in the current documentation. Nuxt Content - Define Nuxt - Directory Structure ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BrianOP•2mo ago

@kapa.ai Are you sure I should define content directory configuration in my root nuxt.config.ts file if where I am using the @nuxt/content module is in /blog and that layer is properly extended to the rest of the project? Also, is the sources key valid on the content object in Nuxt Content 3.2.2? I am getting TypeScript errors and that looks like maybe an older version of defining source.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for your follow-up questions. I apologize for any confusion in my previous response. Let me clarify based on the most up-to-date information from the Nuxt Content documentation: 1. Regarding content directory configuration: You're right to question this. If you're using the @nuxt/content module specifically in your /blog layer and that layer is properly extended to the rest of the project, you don't need to define the content directory configuration in your root nuxt.config.ts file. The configuration should be handled within the /blog layer where the module is being used. 2. About the sources key: You're correct, and I apologize for the error in my previous response. The sources key is not valid for Nuxt Content 3.2.2. This was indeed an older way of configuring sources and is not applicable to the current version. For Nuxt Content 3.2.2, the correct way to configure your content is through the content.config.ts file in your /blog layer. Here's the correct approach:

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

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'content/**/*.md'
    })
  }
})

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

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'content/**/*.md'
    })
  }
})

This configuration should be in your /blog/content.config.ts file Nuxt Content - Define Content Collections. The source property here defines where Nuxt Content should look for your markdown files relative to the /blog directory. If your markdown files are directly in /blog/content, this configuration should work correctly. To ensure everything is set up correctly: 1. Make sure the @nuxt/content module is only added in the /blog/nuxt.config.ts file. 2. Confirm that your /blog layer is correctly extended in your root nuxt.config.ts. 3. Verify that your markdown files are in the correct location (/blog/content). If you're still experiencing issues with Nuxt Content not finding your markdown files, it might be worth double-checking your layer extension and file paths. The problem could be related to how the layers are being merged or how file paths are being resolved in your specific project structure. Nuxt Content - Define Content Collections ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

leamsigc•2mo ago

Question so the nuxt content is in a Nuxt Layer correct ?, if that is the case it seems like you have two content.config.ts one for the layer and one for the main app You should handle all thing related to nuxt content in the layer it self then and just extend that on the main app that way you can have blog post -> Layer content cotent folder here -> nuxt content need to be handle here as well pages -> Handle content rendering ->Main app -> extend layer

leamsigc•2mo ago

Here a example https://github.com/leamsigc/nuxt-monorepo-layers

GitHub

GitHub - leamsigc/nuxt-monorepo-layers

Contribute to leamsigc/nuxt-monorepo-layers development by creating an account on GitHub.

BrianOP•4w ago

Hey @leamsigc thanks for replying again and sorry for the delay in following up. I've been trying a few different things so I am not sure when you saw my stackblitz repo (https://stackblitz.com/edit/github-qygkyxfh) but I only had one content.config.ts most of the time. Unfortunately it is broken at the moment I think because of a Node version issue. But the image attached is what I've had for a while. I'm trying to following your nuxt-monorepo-layers example but I don't see how it is using Nuxt Content within a Nuxt Layers context. I don't see the extends array in your root nuxt.config.ts file and you also have the content.config.ts file in your root as well. And your markdown content is in the /content folder at the root which I thought is the default setup and that folder doesn't act as a layer in that case. Maybe I am missing something? I was looking around your project and I didn't see any markdown files defined anywhere else.

StackBlitz

v2 Nuxt Content with Layers Debugging - StackBlitz

I'm trying to troubleshoot problems with getting Nuxt Content with Layers to work

leamsigc•3w ago

My Bad so let me get the structure correctly. You have a app layer1 layer1 app.vue I will create a basic multi layer project as example and try to replicate the project.

Gaming

Programming

Nuxt Content in a Nuxt Layers project basic setup help

Did you find this page helpful?