Nuxt•3d ago

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•3d 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•3d ago

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

FabienOP•3d 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", {
...

Gaming

Programming

Problem with markdown it and my nuxt project