@comark/nuxt

@comark/nuxt

Zero-config Nuxt module for Comark, a high-performance markdown parser and renderer.

Features

• ⚡ Auto-imported <Markdown> and <MarkdownDocument> components
• 📁 ~/components/prose directory for overriding HTML elements
• 🎨 Automatic Nuxt UI prose integration
• 🖥️ SSR, SSG, and prerendering support out of the box
• 🧩 Re-exports of Comark plugins (binding, math, mermaid)
• 🎯 Full TypeScript support

Installation

Automatic

Add @comark/nuxt to your project. This installs the dependency and registers the module in nuxt.config.ts:

npx nuxt add comark

Manual

Add @comark/nuxt to your dependencies:

npm install @comark/nuxt
# or
pnpm add @comark/nuxt

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@comark/nuxt'],
})

Usage

The <Markdown> component is available globally, no imports needed. Pass markdown via the default slot or the value prop:

<script setup lang="ts">
const content = `# Hello Nuxt\n\nRendered with **Comark**.`
</script>

<template>
  <Markdown>{{ content }}</Markdown>
</template>

Custom components

Map Comark tags to your own Vue components:

<script setup lang="ts">
import Alert from '~/components/Alert.vue'
</script>

<template>
  <Markdown :components="{ alert: Alert }">{{ content }}</Markdown>
</template>

::alert{type="warning"}
This is a warning.
::

Overriding HTML elements

Drop components into ~/components/prose to override how native HTML elements render. They are auto-registered:

~/components/prose/
  ProseH1.vue
  ProsePre.vue
  ProseA.vue

Plugins

<script setup lang="ts">
import math, { Math } from '@comark/nuxt/plugins/math'
import mermaid, { Mermaid } from '@comark/nuxt/plugins/mermaid'
</script>

<template>
  <Markdown
    :components="{ math: Math, mermaid: Mermaid }"
    :plugins="[math(), mermaid()]"
  >
    {{ content }}
  </Markdown>
</template>

Nuxt UI

When @nuxt/ui is installed, prose components are wired up automatically:

export default defineNuxtConfig({
  modules: ['@comark/nuxt', '@nuxt/ui'],
})

Documentation

Full guide and API reference at comark.dev/rendering/nuxt.

Agent skill

Coding agents can install the Comark skill from the docs site:

npx skills add https://comark.dev

License

Made with ❤️

Published under MIT License.