Replies: 2 comments
-
hi, looking for the same functionality , you found any solution ? |
Beta Was this translation helpful? Give feedback.
0 replies
-
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> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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.Beta Was this translation helpful? Give feedback.
All reactions