how to use ContentRenderer to render external API data

[leosin]

Can external API data (in markdown format) can be rendered using ContentRenderer with Nuxt Content?

For example: i fetch article data from Directus。and the article is generated using directus markdown editor.

content: "# title \n ## some text....."

In the local document (It is the MD document in the content directory), I use the following method, which can work.

<ContentRenderer :value="content">
  <header>
    <h1>{{ content.title }} <small>{{ content.name }}</small></h1>
    <div class="blocks desc">
      {{ content.description }}
    </div>
  </header>
  <ContentRendererMarkdown :value="content" />
</ContentRenderer>

is there any good ideas?

[Chengyunlai]

Have you solved it yet? I also want to get the Md data from an external API and render it with nuxt-content.

[ali4zimi]

I also needed this, and I used this solution:

#924 (comment)

[leosin]

Thank you very much, according to the post you mentioned, the markdown content in the remote api can be displayed.
But there is a problem, the highlighting in markdown, as well as custom modules, cannot be used.

[ali4zimi]

For me, it is working. I have created a component named MarkdownRenderer with the following content:

<template>
  <ContentRenderer :value="parsedMarkdown" />
</template>

<script>
import { defineComponent } from 'vue'

import markdownParser from '@nuxt/content/transformers/markdown'

export default defineComponent({
  components: {},

  // define props
  props: {
    md: {
      type: String,
      default: '',
    },
    cid: {
      type: String,
      default: '<some-id>',
    },
  },

  // init
  async setup(props) {
    return {
      parsedMarkdown: await markdownParser.parse(props.cid, props.md),
    }
  },
})
</script>

and then call it like this:

<MarkdownRenderer :md="item.description" />

if you are using tailwind, maybe you need to add prose class

[lionel-addvanto]

Hmm, I still get this error: [plugin:vite:import-analysis] Failed to resolve import "@nuxt/content/transformers/markdown/"

[leosin]

// @ts-expect-error avoid lint error
import markdownParser from '@nuxt/content/transformers/markdown'

try this : // @ts-expect-error avoid lint error
and use nuxt latest version 3.5.x

[zzdaddy]

you can use @nuxtjs/mdc like this:

after add moudle @nuxtjs/mdc

const content  = "# title \n ## some text....."

<MDC :value="content" tag="section" class="mdc-memo-prose prose"/>

now, your custom content render by external api data has same style like your articles