Rendering markdown from remote with Vue components

[kwiat1990]

Hey, I wonder if is it possible with nuxt/content module to render a markdown string (fetched from somewhere) in template and if transform some HTML tags to Vue components (such as link or image)?

After reading issues and discussion, I came to conclusion that it's currently not possible or, at least, nobody has come up with a working solution.

Things like this are pretty easy to do in React and there's plenty of resources how to achieve it. In case of Vue it seems to be a bit a different story. Especially for Nuxt.

For months I came up with a working solution for Gridsome (SSG for Vue), in which I used marked packages to render markdown and transform tokens, but this approach doesn't work in Nuxt:
https://github.com/kwiat1990/marketingowy-wir/blob/master/frontend/src/components/RichContent.vue
https://github.com/kwiat1990/marketingowy-wir/blob/master/frontend/src/utils/markdown-renderer.js

If it's not possible with nuxt/content, is there an alternative approach one could use? I would be glad if someone could give me some hints.

[geminigeek]

hi,

looking for the same functionality , you found any solution ?

[kwiat1990]

Yes, I did. My Component for rendering markdown content looks like this:

<template>
  <ContentRenderer :value="renderMarkdown">
    <ContentRendererMarkdown
      class="prose prose-xl dark:prose-invert mx-auto"
      :value="renderMarkdown"
    />
  </ContentRenderer>
</template>

<script setup lang="ts">
// @ts-expect-error avoid lint error
import markdownParser from "@nuxt/content/transformers/markdown";

const props = defineProps<{ content: string }>();

const parsedMarkdown = await markdownParser.parse("someId", props.content);
const renderMarkdown = useUnwrap().unwrap(parsedMarkdown, ["p"]);
</script>