Nuxt•2mo ago

<MDC> Component Not Rendering Anything Despite Passing a String

I'm using the <MDC> component from Nuxt UI Pro like this:

<MDC
  :value="page.hero.title"
  class="font-bold text-3xl dark:text-muted leading-[1.5]"
/>

<MDC
  :value="page.hero.title"
  class="font-bold text-3xl dark:text-muted leading-[1.5]"
/>

page.hero.title is a plain string (e.g., "Hello World"), but nothing renders on the page. No error in the console either. nuxt config:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content'
  ],
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  ssr: false,
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  mdc: {
    highlight: {
      noApiRoute: false
    }
  },
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content'
  ],
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  ssr: false,
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  mdc: {
    highlight: {
      noApiRoute: false
    }
  },
})

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/content": "3.6.3",
    "@nuxt/ui": "3.2.0",
    "@tailwindcss/vite": "4.0.9",
    "better-sqlite3": "12.2.0",
    "nuxt": "4.0.1",
    "tailwindcss": "4.0.9",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  }
}

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/content": "3.6.3",
    "@nuxt/ui": "3.2.0",
    "@tailwindcss/vite": "4.0.9",
    "better-sqlite3": "12.2.0",
    "nuxt": "4.0.1",
    "tailwindcss": "4.0.9",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  }
}

Any insight would be appreciated!

3 Replies

kapa.ai•2mo ago

Hi @Made Y. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about the internal behavior or requirements of the <MDC> component from Nuxt UI Pro when rendering a plain string. The available documentation shows usage of <MDC> with the :value prop, typically passing markdown content (often multi-line strings or markdown from content files), but it does not clarify whether a plain string (like "Hello World") should render as expected or if there are special requirements for the input value. For example, the official documentation demonstrates:

<MDC :value="version.content" />

<MDC :value="version.content" />

where version.content is a markdown string, not just plain text. There is no mention of rendering issues or requirements for the value to be markdown-formatted or multi-line specifically, nor any troubleshooting steps for when nothing renders With body slot. If you are passing a plain string and nothing renders, and there are no errors, it may be that <MDC> expects markdown content or a specific format, but this is not confirmed in the documentation. You might try passing a markdown-formatted string (e.g., "# Hello World" instead of "Hello World") to see if that changes the behavior. If the issue persists, I recommend checking for updates in the official documentation or opening an issue on the Nuxt UI Pro GitHub repository, as the knowledge sources do not provide enough detail to resolve this specific problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Made YOP•2mo ago

I found the issue. it was because I had ssr: false in my nuxt.config.ts. Turns out, the <MDC> component relies on ssr to parse and render the markdown content. When SSR is disabled, it doesn't render anything and silently fails, resulting in just  in the output. If you're using <MDC> from nuxt content, make sure SSR is enabled in your Nuxt config:

export default defineNuxtConfig({
  ssr: true,
})

export default defineNuxtConfig({
  ssr: true,
})

After re-enabling SSR, everything renders as expected. Hope this helps someone else running into the same issue!

Gaming

Programming

<MDC> Component Not Rendering Anything Despite Passing a String

Did you find this page helpful?