NuxtN
Nuxt•6mo ago•
4 replies
Made Y

<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]"
/>


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
    }
  },
})


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"
  }
}


Any insight would be appreciated!
Was this page helpful?