N
Nuxt2w ago
Fabien

Problem with markdown it and my nuxt project

Hello, I would like some help with markdown-it in a Nuxt 3 application. When I apply a rule, my application can no longer load the pages affected by markdown-it. Just the following code causes this issue:
// https://github.com/markdown-it/markdown-it
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

const md = markdownit({
html: true,
linkify: true,
typographer: true
}).use(markdownitContainer, "notice", {
// Just using 'use' for plugins causes an error
});
// https://github.com/markdown-it/markdown-it
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

const md = markdownit({
html: true,
linkify: true,
typographer: true
}).use(markdownitContainer, "notice", {
// Just using 'use' for plugins causes an error
});
Without using any rules, the pages load:
const md = markdownit({
html: true,
linkify: true,
typographer: true
});
const md = markdownit({
html: true,
linkify: true,
typographer: true
});
A part of my template to use the md variable:
<div
v-if="block['__component'] === 'shared.rich-text' && block.body.length > 0"
class="rich-text"
v-html="md.render(block.body)"
id="article-content"
></div>
<div
v-if="block['__component'] === 'shared.rich-text' && block.body.length > 0"
class="rich-text"
v-html="md.render(block.body)"
id="article-content"
></div>
I think I have a problem with my libraries or in my code. For example, compatibility with Nuxt 3. I am new to Nuxt and I feel like many libraries have their own Nuxt version to work correctly... A part of the content of my package.json:
{
"dependencies": {
"@types/markdown-it": "^14.1.2",
"@types/markdown-it-container": "^2.0.10",
"markdown-it": "^14.1.0",
"markdown-it-container": "^4.0.0",
"nuxt": "^3.13.2",
"vue": "^3.5.13",
"vue-router": "latest"
}
}
{
"dependencies": {
"@types/markdown-it": "^14.1.2",
"@types/markdown-it-container": "^2.0.10",
"markdown-it": "^14.1.0",
"markdown-it-container": "^4.0.0",
"nuxt": "^3.13.2",
"vue": "^3.5.13",
"vue-router": "latest"
}
}
Thank you.
3 Replies
kapa.ai
kapa.ai2w ago
Hi @Fabien. 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 markdown-it in a Nuxt 3 application. Let's address this problem step by step. 1. First, it's important to note that Nuxt 3 has its own content module (@nuxt/content) which provides built-in markdown parsing capabilities. If you're not specifically required to use markdown-it, you might want to consider using @nuxt/content instead, as it's designed to work seamlessly with Nuxt 3 Nuxt Content Documentation (https://content.nuxt.com/usage/markdown/). 2. However, if you need to use markdown-it specifically, the issue you're experiencing might be related to server-side rendering (SSR) compatibility. Nuxt 3 uses Vue 3, which has different SSR handling compared to Vue 2. 3. To resolve this, you can try creating a plugin for markdown-it that runs only on the client-side. Here's how you can do it: Create a file named plugins/markdown-it.client.ts (or .js if you're not using TypeScript) with the following content:
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

export default defineNuxtPlugin(() => {
const md = markdownit({
html: true,
linkify: true,
typographer: true
}).use(markdownitContainer, "notice", {
// Your container options here
});

return {
provide: {
md
}
}
})

import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

export default defineNuxtPlugin(() => {
const md = markdownit({
html: true,
linkify: true,
typographer: true
}).use(markdownitContainer, "notice", {
// Your container options here
});

return {
provide: {
md
}
}
})

This plugin will only run on the client-side, which should avoid SSR-related issues. 4. In your component, you can then use the plugin like this:
<script setup>
const { $md } = useNuxtApp()
</script>
<template>
<div
v-if="block['__component'] === 'shared.rich-text' && block.body.length > 0"
class="rich-text"
v-html="$md.render(block.body)"
id="article-content"
></div>
</template>

<script setup>
const { $md } = useNuxtApp()
</script>
<template>
<div
v-if="block['__component'] === 'shared.rich-text' && block.body.length > 0"
class="rich-text"
v-html="$md.render(block.body)"
id="article-content"
></div>
</template>

5. Regarding your package.json, the versions seem to be up-to-date. However, make sure you're using the latest stable versions of Nuxt and Vue. As of my knowledge cutoff, the latest stable versions are: - Nuxt: 3.13.2 (which you're using) - Vue: 3.5.13 (which you're using) Github Issue Comment (https://github.com/nuxt/nuxt/issues/28837#issuecomment-1981487621) 6. If you're still encountering issues, it might be worth trying to delete your node_modules folder and package-lock.json file, then reinstalling your dependencies. This can sometimes resolve compatibility issues. Remember, when working with Nuxt 3, it's generally recommended to use Nuxt-specific modules when available, as they're designed to work well within the Nuxt ecosystem. If you continue to face issues, you might want to consider using @nuxt/content for markdown rendering, as it's specifically designed for Nuxt and provides a lot of built-in functionality. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2w ago
<@612636968890925081> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Fabien
FabienOP2w ago
The problem was the required part :
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

const md = markdownit({
html: true,
linkify: true,
typographer: true
}).use(markdownitContainer, "notice", {
...
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

const md = markdownit({
html: true,
linkify: true,
typographer: true
}).use(markdownitContainer, "notice", {
...
Want results from more Discord servers?
Add your server