Rendering Markdown with Comark Content

Markdown is the natural fit for prose: articles, docs, changelogs. Comark Content parses every .md file in content/ into a MarkdownDocument: the frontmatter becomes data, and the body becomes a tree of nodes you render with Vue.

Components in Markdown

Comark is short for Components in Markdown. On top of standard CommonMark and GFM, it adds a component syntax: a :: block, {} props, and #name slots.

::page-hero
#title
Hello from Markdown

#links
  :::button{to="/posts" size="lg"}
  Read the posts
  :::
::

Props use the : prefix for typed values (:count="5", :items='["a","b"]'), and named slots map to Vue slots. See the full component syntax reference.

Rendering it

Fetch the parsed document from the Content instance, then hand its nodes to <MarkdownDocument> with a map from tag names to your components:

<script setup lang="ts">
import { UPageHero as PageHero, UButton as Button } from '#components'

const { data: page } = await useAsyncData('post', () => clientContent.get('/landing-markdown'))
const components = { PageHero, Button }
</script>

<template>
  <MarkdownDocument :value="page" :components="components" />
</template>

Any tag the content uses (page-hero, button, …) resolves to the matching entry in components; anything unmapped renders as a native HTML element. See rendering in Nuxt for auto-import and Nuxt UI integration.