Nuxt UI

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

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

::callout{icon="i-lucide-square-play" color="neutral" to="/docs/getting-started/installation/nuxt"}
This is a \`callout\` with full **markdown** support.
::
`
</script>

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

This example demonstrates how to use Comark Syntax with Nuxt UI. Comark Syntax automatically detects when Nuxt UI is installed and uses its components for rendering. Simply add both comark/nuxt and @nuxt/ui modules to your Nuxt config, and the Comark component will use Nuxt UI components automatically.

What does comark/nuxt module do

• Registers the <Comark> component 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.
• Detects Nuxt UI and tells Nuxt UI to register its Prose components