Компонент для рендеринга Markdown с помощью Nuxt Content

Ниже приведён код компонента Nuxt, который рендерит любую строку, содержащую разметку Markdown, в HTML при помощи модуля Nuxt Content.

<script setup>
// components/MarkdownStringRenderer.vue
import markdownParser from "@nuxt/content/transformers/markdown";

const props = defineProps({
  markdownString: {
    type: String,
    required: true,
  },
});

const record = ref("");

watchEffect(async () => {
  await markdownParser
    .parse("custom.md", props.markdownString)
    .then((md) => (record.value = md));
});
</script>

<template>
  <div class="content">
    <ContentRendererMarkdown :value="record" v-if="record" />
  </div>
</template>

Пример использования этого компонента:

<MarkdownStringRenderer :markdownString="description" />

Содержимое компонента будет обновляться реактивно, при каждом изменении значения переменной description, что очень удобно, например, для создания превью вводимого текста с разметкой Markdown.

См. также пример использования в одном из моих проектов.