在Nuxt 3中使用MDX加载静态数据失败求助

1. 确认@nuxt/content的MDX支持配置 #

在nuxt.config.ts里必须启用MDX解析，添加如下配置：

export default defineNuxtConfig({
  modules: ['@nuxt/content', 'vuetify-nuxt-module'],
  content: {
    extensions: ['.md', '.mdx'], // 必须包含.mdx扩展名
    markdown: {
      mdx: true // 开启MDX解析支持
    }
  }
})

2. 检查MDX文件的数据结构 #

确保content/roadtrip.mdx的数据导出格式正确，两种常用方式：

方式1：Frontmatter（推荐） #

---
cardData:
  title: "西部公路"
  subtitle: "穿越落基山脉"
  description: "沿途欣赏壮丽自然风光，体验露营与探险"
  image: "/images/roadtrip.jpg"
---

# 公路旅行指南
这里是MDX正文内容...

方式2：ES模块导出 #

export const cardData = {
  title: "西部公路",
  subtitle: "穿越落基山脉",
  description: "沿途欣赏壮丽自然风光，体验露营与探险",
  image: "/images/roadtrip.jpg"
}

# 公路旅行指南
这里是MDX正文内容...

3. 组件中正确获取并渲染数据 #

方法1：用<ContentDoc>组件结合插槽 #

<template>
  <ContentDoc path="/roadtrip">
    <template #default="{ doc }">
      <v-card>
        <v-img :src="doc.frontmatter.cardData.image" height="200"></v-img>
        <v-card-title>{{ doc.frontmatter.cardData.title }}</v-card-title>
        <v-card-subtitle>{{ doc.frontmatter.cardData.subtitle }}</v-card-subtitle>
        <v-card-text>{{ doc.frontmatter.cardData.description }}</v-card-text>
      </v-card>
      <!-- 渲染MDX正文内容 -->
      <ContentRenderer :value="doc" />
    </template>
  </ContentDoc>
</template>

方法2：用useContentQuery手动查询 #

<script setup>
const { data: roadtripDoc } = await useContentQuery('roadtrip')
// 若用ES模块导出，访问roadtripDoc.value.exports.cardData
// 若用frontmatter，访问roadtripDoc.value.frontmatter.cardData
</script>

<template>
  <v-card v-if="roadtripDoc">
    <v-img :src="roadtripDoc.frontmatter.cardData.image" height="200"></v-img>
    <v-card-title>{{ roadtripDoc.frontmatter.cardData.title }}</v-card-title>
    <v-card-subtitle>{{ roadtripDoc.frontmatter.cardData.subtitle }}</v-card-subtitle>
    <v-card-text>{{ roadtripDoc.frontmatter.cardData.description }}</v-card-text>
  </v-card>
</template>

4. 常见排查点 #

• 确认MDX文件路径正确：content/roadtrip.mdx，注意Linux/macOS环境下路径区分大小写
• 重启Nuxt开发服务，确保@nuxt/content重新解析MDX文件
• 在组件中打印roadtripDoc.value，查看数据结构是否符合预期
• 检查MDX文件语法：比如frontmatter的JSON格式是否合法，引号、逗号是否正确
• 先测试静态Vuetify卡片是否能正常渲染，排除Vuetify配置问题

内容的提问来源于stack exchange，提问作者Christoph Pfrommer