A minimal example showing how to use Comark Syntax with Nuxt 4.
app.vue
<script setup lang="ts">
const markdown = `
# Comark + Nuxt

Comark Syntax automatically detects Components in \`~/components/prose/\` directory and uses them for rendering.
`
</script>

<template>
  <Comark>{{ markdown }}</Comark>
</template>

This example demonstrates the simplest way to use Comark Syntax with Nuxt - just add the comark/nuxt module to your Nuxt config, and the Comark component will be automatically available in your templates. The module handles parsing and rendering automatically.

What does comark/nuxt module do

  • Registers the <Comark> components in Nuxt for automatic import.
  • Registers the ~/components/prose directory in the app and all layers as a global components directory.
    • This allows users to override prose components by creating components in this directory.
Copyright © 2026