N
Nuxt•4w ago
magius

Use Custom prose component with nuxt/mdc

Hi, I need help with something: I'm trying to use Nuxt MDC without Nuxt Content (the goal is to reduce the build size, and I don’t need the other features of Nuxt Content since my content comes from a headless CMS, not markdown files). So far, it's working as expected. But now, when I try to override the default prose components with my custom ones, it doesn’t work — the default ones are still being loaded. I followed this part of the documentation: https://github.com/nuxt-modules/mdc/tree/main?tab=readme-ov-file#prose-components But when I do that, all my other components (not related to MDC/PROSE) stop working. I’m not using Nuxt UI in this project I started from the version shown in the docs and made some fixes to get my base components working again: 
mdc: {
  components: {
    prose: true
  }
},
components: [{
  path: '~/components',
}, {
  global: true,
  path: './components/prose',
  pathPrefix: false,
}]
mdc: {
  components: {
    prose: true
  }
},
components: [{
  path: '~/components',
}, {
  global: true,
  path: './components/prose',
  pathPrefix: false,
}]
I think the problem comes from the auto-import system. When I follow the Nuxt MDC documentation, it overrides the global auto-import of my base components to load only the prose ones. I could fix it by manually importing the non-prose components, but that’s not ideal.
GitHub
GitHub - nuxt-modules/mdc: MDC supercharges regular Markdown to wri...
MDC supercharges regular Markdown to write documents interacting deeply with any Vue component. - nuxt-modules/mdc
3 Replies
kapa.ai
kapa.ai•4w ago
Hi @magius. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that Nuxt's auto-import system can be tricky when customizing component directories, especially with MDC/Prose components. Key points from the documentation: - To override Prose components, you should place your custom components in components/content/ (or a custom directory) with the same name as the default Prose component, e.g., ProseP.vue for <p> tags. This works for both Nuxt Content and MDC, as Prose components originate from @nuxtjs/mdc and are auto-registered if placed in the right directory [Prose Components]. - If you customize the components array in your nuxt.config, you must ensure it still includes your main components directory, or you risk disabling auto-import for your base components [Auto-imported Components]. What’s likely happening: By specifying only your prose directory as global, you may be unintentionally overriding or excluding your main components directory from auto-import, which causes your other components to stop working unless you import them manually. How to fix: - Make sure your components config includes both your main components directory and your custom prose directory, and that the prose directory is set as global (if you want those components available everywhere). - Do not set pathPrefix: false unless you want all components in that directory to be registered globally without a prefix, which can cause naming conflicts. Example config: 
export default defineNuxtConfig({
  components: [
    // Main components directory (auto-imported, not global)
    { path: '~/components' },
    // Prose components directory (global, no prefix)
    { path: '~/components/prose', global: true, pathPrefix: false }
  ]
})
export default defineNuxtConfig({
  components: [
    // Main components directory (auto-imported, not global)
    { path: '~/components' },
    // Prose components directory (global, no prefix)
    { path: '~/components/prose', global: true, pathPrefix: false }
  ]
})
This setup should allow both your base components and your custom prose components to be auto-imported and available as expected. Additional notes: - If you want to further customize auto-import behavior, you can use the imports section in your config, but for components, the components array is the main control [Auto-imported Components]. - If you still have issues, double-check for naming conflicts or typos in your custom prose components. If you follow this approach and still encounter issues, the knowledge sources do not provide more detailed troubleshooting steps for this specific scenario. In that case, you may want to open an issue on the Nuxt MDC repository for more targeted support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@210060988429500416> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
magius
magiusOP•4w ago
c'est bon jtrouve la solution 
mdc: {
    components: {
      prose: true
    }
  },
  components: [{
    path: '~/components',
    exclude: ['prose/**'],
  }, {
    /*  global: true, */
    path: '~/components/prose',
    /*  pathPrefix: false, */
  }],
mdc: {
    components: {
      prose: true
    }
  },
  components: [{
    path: '~/components',
    exclude: ['prose/**'],
  }, {
    /*  global: true, */
    path: '~/components/prose',
    /*  pathPrefix: false, */
  }],

Did you find this page helpful?