Nuxt•4w ago

Nuxt 4 + MDC

nuxt mdc expects this

components: {
    global: true,
    path: './components/prose'
  }

components: {
    global: true,
    path: './components/prose'
  }

but I have

  components: [
    {
      global: true,
      path: "~/components",
      pathPrefix: false
    }
  ],

  components: [
    {
      global: true,
      path: "~/components",
      pathPrefix: false
    }
  ],

If I switch around then either my components dont work or mdc prose components

14 Replies

kapa.ai•4w ago

Hi @ʏᴜᴢᴢᴜᴡᴏ. 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 related to how Nuxt auto-imports components and how MDC/Prose components are expected to be registered. Key points from the knowledge sources: - Nuxt allows you to configure multiple component directories, and the order matters. Nested or more specific directories should come first, followed by more general ones. This ensures overrides and customizations work as expected Custom Directories. - If you want to override MDC Prose components, you should place your custom components in components/content/ with the same name as the Prose component (e.g., ProseP.vue) Prose Components. - The global: true option registers all components in that directory globally, but you can also mix and match global and non-global directories. - Setting pathPrefix: false means components are registered by their filename only, not by their directory structure Component Names. How to resolve your issue: You can combine both configurations by specifying multiple component directories in your nuxt.config.ts. For example:

export default defineNuxtConfig({
  components: [
    // Register prose components globally (for MDC)
    {
      path: '~/components/prose',
      global: true
    },
    // Register your main components, without path prefix
    {
      path: '~/components',
      pathPrefix: false,
      global: true
    }
  ]
})

export default defineNuxtConfig({
  components: [
    // Register prose components globally (for MDC)
    {
      path: '~/components/prose',
      global: true
    },
    // Register your main components, without path prefix
    {
      path: '~/components',
      pathPrefix: false,
      global: true
    }
  ]
})

- Place your custom Prose components (e.g., ProseP.vue, ProseCode.vue) in components/prose/. - Place your app components in components/. This way, both your components and the MDC prose components will be auto-imported and available globally, and you avoid conflicts between the two systems. The order ensures that if you have a ProseP.vue in both places, the one in components/prose/ takes precedence. If you want to override Nuxt Content's Prose components:
Place your overrides in components/content/ProseX.vue as described in the docs Prose Components. Summary:
- Use multiple component directories. - Order matters: more specific (prose/content) first, then general. - Use global: true and pathPrefix: false as needed. If you still have issues, double-check the directory structure and naming, and ensure there are no conflicting component names in different directories. References:
- Custom Directories - Prose Components ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

ʏᴜᴢᴢᴜᴡᴏOP•4w ago

@kapa.ai didnt work

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry to hear that the suggested configuration did not work for your setup. Based on the knowledge sources, here are the key points and limitations: - Nuxt allows you to specify multiple component directories, and the order of these directories matters for overrides and registration Custom Directories. - The global: true and pathPrefix: false options can be set per directory, but there is no explicit documentation about combining these with MDC/Prose components in a way that guarantees both your components and MDC's Prose components work seamlessly together. - For MDC/Prose, the documentation only mentions that to overwrite a prose component, you should create a component with the same name in your components/content/ directory (e.g., components/content/ProseA.vue) Prose Components. - There is no explicit information in the knowledge sources about a required or recommended components configuration for MDC/Prose beyond the above, nor about conflicts with global registration or pathPrefix: false. Given this, the knowledge sources do not contain enough information to provide a definitive solution for making both your components and MDC Prose components work together when using the specific configuration you described. If the documented approaches do not work, it may be due to a limitation or an undocumented behavior in the current version of Nuxt or the MDC module. If you need further help, I recommend checking for open issues or discussions in the Nuxt Content or MDC repositories, as this may be a nuanced or version-specific problem not covered in the official documentation. If you have more details about the specific error or behavior, please share them, and I can help you interpret them based on the available documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

ʏᴜᴢᴢᴜᴡᴏOP•4w ago

@kapa.ai also I get [Vue Router warn]: No match found for location with path "/components"

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The warning [Vue Router warn]: No match found for location with path "/components" indicates that Vue Router is trying to navigate to a route (/components) that does not exist in your application's pages directory. Based on the knowledge sources, here are the relevant points: - In Nuxt, routes are generated from the files in your pages/ directory. If there is no pages/components.vue or pages/components/index.vue, then /components will not be a valid route, and navigating to it will result in this warning Custom Routing. - The components/ directory is for Vue components, not for pages or routes. Components placed here are auto-imported for use in your templates, but do not create routes themselves components directory. Why you see this warning: - You (or some code/module) are trying to navigate to /components, but there is no corresponding page for that route. How to resolve: - Make sure you are not linking to /components anywhere in your app (e.g., in a <NuxtLink to="/components"> or programmatic navigation). - If you intended to have a page at /components, create a file at pages/components.vue or pages/components/index.vue. If you did not intend to have a /components route, check your navigation logic and update any links or redirects that point to /components. If you need further help, please provide more context about when this warning appears (e.g., after a specific action or navigation). The knowledge sources do not mention any scenario where the components/ directory itself should be routable or accessible as /components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

ʏᴜᴢᴢᴜᴡᴏOP•4w ago

@kapa.ai fixed the warning but MDC components still wont get registered

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry you're still having trouble with MDC components not being registered. Based on the knowledge sources, here are the key points: - To override or register Prose (MDC) components, you should place your custom components in the components/content/ directory, using the same name as the Prose component you want to override (e.g., components/content/ProseP.vue) Prose Components. - There is no explicit documentation in the knowledge sources about needing to set a special components configuration for MDC/Prose components beyond using the components/content/ directory. - The MDC/Prose system expects overrides in components/content/, not in a custom directory like components/prose/ or by using a global registration in the config Prose Components. If you have your MDC/Prose components in a different directory or are using a custom components configuration that does not include components/content/, they will not be picked up. Recommended approach (per documentation): 1. Place your custom Prose components in components/content/, e.g.:

   components/
     content/
       ProseP.vue
       ProseH1.vue

   components/
     content/
       ProseP.vue
       ProseH1.vue

2. Do not use a custom components config for these overrides unless you are specifically including the components/content/ directory. If you have already done this and MDC components still do not get registered, the knowledge sources do not provide further troubleshooting steps or configuration options for this scenario. There may be an issue outside the documented configuration, or a version-specific problem not covered in the sources. Summary:
The knowledge sources do not contain enough information to explain why MDC components are not being registered if you are following the documented approach of placing them in components/content/. If this does not resolve your issue, you may need to consult the Nuxt Content or MDC issue trackers for more specific help. Reference: Prose Components ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

ʏᴜᴢᴢᴜᴡᴏOP•4w ago

@kapa.ai use the @nuxtjs/mdc docs instead of content

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not contain documentation or detailed configuration instructions specifically for the @nuxtjs/mdc module itself—only for its integration and usage via Nuxt Content and the Prose components system. The available sources focus on how Prose components are registered and overridden when using Nuxt Content, and do not include direct guidance or examples from the @nuxtjs/mdc documentation. If you need information specifically from the @nuxtjs/mdc docs (and not Nuxt Content), the knowledge sources do not contain enough information to answer your question with confidence. If you have access to the official @nuxtjs/mdc documentation, consulting it directly would be necessary for precise configuration or troubleshooting steps. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

Nuxt 4 + MDC

Did you find this page helpful?