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/prosedirectory in the app and all layers as a global components directory.- This allows users to override prose components by creating components in this directory.