The components are not rendering properly | Nuxt Content
I'm building a kind of CMR and I want it to include a documentation section, so I decided to use https://content.nuxt.com/templates/docs
and based it on their GitHub repository https://github.com/nuxt-ui-templates/docs/tree/main
. I adapted the project so that all the documentation is located under the /docs route (that was the only major change from the original version.)
Everything works fine, but the only issue I'm experiencing is that in the .md files, a couple of components don’t render correctly, and I can’t figure out why.
For a specific example , on the /docs route there should be a code example visible, but it doesn’t appear as it does in the Nuxt preview.
Here’s my repository: https://github.com/MoraTellez/net
Although I suspect it could be an issue with a package, such as Nuxt UI or Nuxt Content, no errors appear. I’d really appreciate any help
GitHub
GitHub - nuxt-ui-templates/docs: Nuxt Docs Template made with Nuxt ...
Nuxt Docs Template made with Nuxt UI and Nuxt Content. - nuxt-ui-templates/docs
GitHub
GitHub - MoraTellez/net
Contribute to MoraTellez/net development by creating an account on GitHub.
3 Replies
Hi @mora. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand you're having issues with components not rendering properly in your Nuxt Content documentation. Based on the knowledge sources available, I can provide some insights into common component rendering issues with Nuxt Content.
Common Component Rendering Issues
Based on the knowledge sources, here are several potential causes for component rendering problems:
1. Component Registration Issues
According to Why vuetify tag isn't converted to html in browser?, when component elements appear in rendered HTML without being converted, it typically means "that the components with the respected names weren't registered in Vue; there also may be a message in the console that warns about this."
Check your browser console for any warnings about unregistered components.
2. Module Order Configuration
The knowledge sources indicate that module order can matter. According to Nuxt UI installation issues, there was a note that "Nuxt UI requires it to be placed before Nuxt Content" in the modules array of your
nuxt.config.ts. However, the same source also mentions that "We don't intend to support order-specific modules in Nuxt," so this may have been resolved in newer versions.
3. Duplicate Component Warnings
WARN [nuxt] Two component files resolving describes an issue where duplicate component files were causing warnings after updating Nuxt and Nuxt Content. The solution was to upgrade to:
- nuxt/content >= 2.8.2 and
- nuxt >= 3.7.2
And run: npx nuxi upgrade --force
4. Props Handling in Components
According to Nuxt 3/Vue 3 Reactivity issue, improper props handling can cause rendering issues. The advice is to "Do not destructure props. This will cause these values to lose their reactivity."
Recommended Steps
Unfortunately, the knowledge sources don't contain specific information about code examples not appearing in Nuxt Content markdown files. However, I recommend:
1. Check your browser console for component registration warnings
2. Verify your Nuxt and Nuxt Content versions are up to date
3. Ensure your module order in nuxt.config.ts has @nuxt/ui before @nuxt/content if you're using both
4. Run npx nuxi upgrade --force to ensure clean dependencies
I'm sorry, but the knowledge sources don't contain enough specific information about code blocks not rendering in Nuxt Content markdown files to provide a more targeted solution for your exact issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537552207935963156> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
you were right, the point number 2 about Module Order Configuration was the problem, I already change the order and now is working fine, thanks a lot!