How to display static markdown element ? Is it possible via content v2 ?

[shehabulalam]

I am new at content v2. I need to display some markdown content coming from api or some static markdown const variable (not from content/something.md file). Is it possible via @nuxt/content ? I am giving a example, what I want to do

nuxt: v3.0.0-rc.13
nuxt/content: v2.2.1
node: v16.18.0

<script setup lang="ts">
const staticMarkdown = ref('# Hello World')
</script>

<template>
  <main>
    <ContentRenderer :value="staticMarkdown">
      <h1>{{ staticMarkdown }}</h1>
      <ContentRendererMarkdown :value="staticMarkdown" />
    </ContentRenderer>
  </main>
</template>

But it now showing expected out with a 500 error.

500
Cannot read properties of undefined (reading 'type')

at resolveContentComponents (./node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.js:252:41)
at setup (./node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.js:41:11)
at _sfc_main.setup (./node_modules/@nuxt/content/dist/runtime/components/ContentRendererMarkdown.js:284:23)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7158:29)
at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7113:11)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)
at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:299:22)
at renderVNodeChildren (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:314:9)

What is my mistake ?

[ManasMadrecha]

You need to convert your raw markdown into proper object format before sending it to be rendered so that ContentDoc component can understand it.

[kwiat1990]

@ManasMadrecha, could you elaborate how this conversion should look like?

[ManasMadrecha]

Use ContentSlot component to display the markdown from any source. It is exactly like Vue's slot component (which can render html), but this can render markdown + html.

[kwiat1990]

How should it work exactly?

I have tried to use markdown-it for it like that in a Markdown.vue component:

const md = MarkdownIt();
md.renderer.rules.image = function(...) { 
  return <nuxt-img src="${...}" /> 
} 
const content = md.render(props.content);

But then I get a raw string <nuxt-img src="correct-link-to-img" /> inside my rendered component instead of a rendered NuxtImg. I have used v-html for it, so I think it can't work anyway. But with a render function I also had no luck.