如何使用@nuxt/content渲染从Firebase获取的Markdown字符串内容

以下分为 @nuxt/content v2（适配Nuxt 3，当前主流版本）和 @nuxt/content v1（适配Nuxt 2）两种场景给出实现步骤，全程不需要引入额外的Markdown渲染库，可完全复用你现有针对静态Markdown配置的解析、高亮、自定义组件等能力。

@nuxt/content v2 版本操作步骤 #

• 利用@nuxt/content内置的useContentMarkdown组合式API解析原始Markdown字符串，解析后直接用<ContentRenderer>组件（原nuxt-content组件的更名版本）渲染即可。
• 如果你的项目关闭了Nuxt自动导入，手动添加导入语句：import { useContentMarkdown } from '#content'

完整代码示例：

<script setup>
const { parseMarkdown } = useContentMarkdown()
// 存储解析后的可渲染内容
const parsedContent = ref(null)

// 从Firebase Firestore获取Markdown字符串的逻辑
const getFirebaseMarkdown = async () => {
  // 替换为你自己的Firestore查询逻辑
  const docRef = doc(db, "你的集合名称", "目标文档ID")
  const docSnap = await getDoc(docRef)
  if (docSnap.exists()) {
    // 假设Markdown内容存在文档的content字段中，替换为你自己的字段名
    const rawMarkdownStr = docSnap.data().content
    // 调用内置方法解析字符串
    parsedContent.value = await parseMarkdown(rawMarkdownStr)
  }
}

onMounted(() => getFirebaseMarkdown())
</script>

<template>
  <div class="markdown-container">
    <!-- 直接渲染解析后的内容，和静态Markdown渲染效果完全一致 -->
    <ContentRenderer v-if="parsedContent" :value="parsedContent" />
  </div>
</template>

@nuxt/content v1 版本操作步骤 #

• 直接调用内置的$content.parse方法解析原始Markdown字符串，把解析结果传给<nuxt-content>组件的document属性即可。

完整代码示例：

<script>
export default {
  data() {
    return {
      parsedContent: null
    }
  },
  async mounted() {
    // 替换为你自己的Firestore查询逻辑
    const rawMarkdownStr = await fetchMarkdownFromFirebase()
    // 调用内置方法解析
    this.parsedContent = await this.$content
      .parse(rawMarkdownStr, { path: 'dynamic-render.md' })
      .fetch()
  }
}
</script>

<template>
  <div class="markdown-container">
    <nuxt-content :document="parsedContent" v-if="parsedContent" />
  </div>
</template>

内容的提问来源于stack exchange，提问作者bacon-delight