Content

<WriterContent> renders Markdown, or a document parsed ahead of time. In plain Vue, import WriterContent.

Examples

Live preview

Markdown renders as you type; debounce waits a beat before parsing again.

<script setup lang="ts">
const body = ref(`## Rendered

Type on the left: **Markdown** renders on the right, blocks included.

::callout
A callout block.
::`);
</script>

<template>
  <div class="writer-demo writer-demo-split">
    <UiTextarea v-model="body" label="Markdown" />
    <WriterContent :value="body" :debounce="100" />
  </div>
</template>

Props

Give it a parsed document on public pages: they render without loading the parser. A string works anywhere, server rendering included, and loads the parser on demand.

What renders

• Markdown's own elements, and registered blocks. Anything else renders its content only.

• Images load lazily. An image alone in its paragraph, with a title, becomes a <figure>. See Images.

• Content is sanitized again before rendering. See Security.

Your own wrapper

renderDocument(document, { blocks, components }) returns the rendered Vue nodes, for when <WriterContent> doesn't fit. These docs render their pages with it.