Integrations

Nuxt

Learn how to use Comark in a Nuxt application with auto-imported components and Nuxt UI integration.

Render Markdown content in Nuxt applications with automatic component registration. The comark/nuxt module provides zero-config setup with auto-imported components and Nuxt UI integration.

Installation

pnpm add @comark/nuxt

npm install @comark/nuxt

yarn add @comark/nuxt

bun add @comark/nuxt

Add the module to your nuxt.config.ts:

nuxt.config.ts

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

What the Module Does

The @comark/nuxt module automatically:

Auto-imports Components - Registers <Comark> component globally
Registers Component Directory - Makes ~/components/prose a global components directory for custom prose components
Detects Nuxt UI - Automatically configures Nuxt UI prose components when @nuxt/ui is installed
Server-Side Support - Full SSR/SSG compatibility

Comark Component

The Comark component is automatically available in all your templates without imports. Pass markdown content and it handles parsing and rendering.

Basic Usage

app.vue

<template>
  <Comark># Hello *World*</Comark>
</template>

With Reactive Content

app.vue

<script setup lang="ts">
const content = ref(`# Hello World

This is **markdown** with components.

::alert{type="info"}
This is an alert!
::
`)
</script>

<template>
  <Comark>{{ content }}</Comark>
</template>

Props

Prop	Type	Description
`markdown`	`string`	Markdown content to parse and render
`components`	`Record<string, Component>`	Custom component mappings
`summary`	`boolean`	Only render content before `<!-- more -->`

With Custom Components

app.vue

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

const components = {
  alert: CustomAlert,
  card: CustomCard,
}

const content = `
::alert{type="warning"}
Important message here
::

::card{title="My Card"}
Card content
::
`
</script>

<template>
  <Comark :markdown="content" :components="components" />
</template>

Summary Mode

Render only content before :

pages/blog/[slug].vue

<script setup lang="ts">
const content = `# Article Title

This is the summary shown in listings.

<!-- more -->

This is the full article content.
`
</script>

<template>
  <!-- Only renders "This is the summary shown in listings." -->
  <Comark summary>{{ content }}</Comark>
</template>

Custom Prose Components

Override default HTML element rendering by creating components in the ~/components/prose directory. These components are automatically registered and used by the Comark renderer.

Directory Structure

~/components/
  prose/
    Alert.vue
    Card.vue
    H1.vue
    H2.vue
    Pre.vue

Creating Custom Components

components/prose/Alert.vue

<script setup lang="ts">
defineProps<{
  type?: 'info' | 'warning' | 'error' | 'success'
}>()
</script>

<template>
  <div class="alert" :class="`alert-${type || 'info'}`" role="alert">
    <slot />
  </div>
</template>

<style scoped>
.alert { padding: 1rem; border-radius: 0.5rem; }
.alert-info { background: #e3f2fd; }
.alert-warning { background: #fff3e0; }
.alert-error { background: #ffebee; }
.alert-success { background: #e8f5e9; }
</style>

Usage in markdown:

content/article.md

::alert{type="warning"}
This is a warning message!
::

Overriding HTML Elements

components/prose/H1.vue

<script setup lang="ts">
const props = defineProps<{
  id?: string
}>()
</script>

<template>
  <h1 :id="id" class="heading">
    <a v-if="id" :href="`#${id}`" class="anchor">#</a>
    <slot />
  </h1>
</template>

Components in ~/components/prose with lowercase names (h1, h2, p, etc.) automatically override HTML elements.

Nuxt UI Integration

When @nuxt/ui is installed, Comark automatically uses Nuxt UI's prose components for enhanced styling.

Installation

pnpm add @nuxt/ui

npm install @nuxt/ui

yarn add @nuxt/ui

bun add @nuxt/ui

nuxt.config.ts

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

Auto-Detection

No extra configuration needed. The @comark/nuxt module detects @nuxt/ui in your dependencies and configures prose components automatically.

The module:

Registers Nuxt UI's prose components automatically
Uses Nuxt UI styling for all HTML elements
Provides consistent design with your Nuxt UI setup

Example Setup

app.vue

<script setup lang="ts">
const markdown = `
# Comark + Nuxt UI

Comark automatically detects Nuxt UI and uses its components for rendering.

::u-alert{type="info"}
This alert uses Nuxt UI styling!
::
`
</script>

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

CSS Setup

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@comark/nuxt', '@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Server-Side Rendering

Comark fully supports SSR and SSG in Nuxt:

Static Generation

pages/index.vue

<script setup lang="ts">
// Content is parsed at build time
const content = `# Static Content

This is rendered at build time.
`
</script>

<template>
  <Comark>{{ content }}</Comark>
</template>

Dynamic SSR

pages/blog/[slug].vue

<script setup lang="ts">
// Fetch and render on the server
const { data: content } = await useFetch('/api/article')
</script>

<template>
  <Comark v-if="content">{{ content }}</Comark>
</template>

Prerendering

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@comark/nuxt'],
  nitro: {
    prerender: {
      routes: ['/blog', '/docs']
    }
  }
})