MDC Prose components not rendering on deploy
Environment :
Operating System: Windows_NT
Node Version: v22.11.0
Nuxt Version: 3.14.159
CLI Version: 3.15.0
Nitro Version: 2.10.4
Package Manager: [email protected]
Builder: -
User Config: default
Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @vueuse/motion/[email protected], [email protected], @pinia/[email protected], pinia-plugin-persistedstate/nuxt, [email protected], [email protected]
Build Modules: -
Nuxt content version v3.0.0-alpha.6
Reproduction
Create custom prose components to override default. Like create a ProseA file in components/content folder with the code provide in mdc docs then npx nuxi generate to generate static deployment and preview.
Hello,
When I try to preview my app for deployment using npx nuxi generate, my custom Prose components from the components/content folder are no longer rendering. However, they render correctly in the local environment.
I have nothing special in my nuxt.config to refer to prose components.
Has anyone encountered a similar problem or have any suggestions for troubleshooting?
2 Replies
Hi @layz. 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, it seems you're encountering an issue with custom Prose components not rendering during static site generation with Nuxt Content. Let's address this problem:
1. First, it's important to note that you're using an alpha version of Nuxt Content (v3.0.0-alpha.6), which may have some instability or differences from the stable release.
2. The correct location for custom Prose components in Nuxt Content v2 (which is the latest stable version) is indeed the
components/content/ directory, as you've mentioned Nuxt Content Prose Components (https://content.nuxt.com/usage/markdown/#prose-components).
3. However, there have been changes in the way Prose components are handled between different versions of Nuxt Content. In particular, there was a shift from @nuxt/content to @nuxtjs/mdc for handling Prose components.
4. The issue you're experiencing might be related to the build process not correctly identifying or including these custom components during static site generation.
To troubleshoot this issue, I suggest the following steps:
1. Ensure that your nuxt.config.ts file includes the content module correctly. You might need to explicitly enable Prose components:
2. Try upgrading to the latest stable version of Nuxt Content (v2.x.x) if possible, as the alpha version you're using might have unresolved issues.
3. If you're using nuxi generate for static site generation, make sure that your custom components are being properly discovered during the build process. You might need to use components: true in your Nuxt config to ensure global component registration.
4. Check if there are any build errors or warnings when running nuxi generate. These might provide clues about why the components aren't being included.
5. Verify that your custom Prose components are named correctly and follow the naming convention (e.g., ProseA.vue for <a> tags).
If these steps don't resolve the issue, it might be worth creating a minimal reproduction of the problem and submitting an issue to the Nuxt Content GitHub repository (https://github.com/nuxt/content/issues). Given that you're using an alpha version, there's a possibility that this could be a bug specific to that version.
Remember, when working with alpha or beta versions of packages, it's always a good idea to check the project's GitHub issues and discussions for any known problems or upcoming changes that might affect your use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@254360029006790656> Kapa.ai is still learning and improving, please let me know how I did by reacting below.