---
title: "Nuxt UI Markdown Example with Comark"
description: "A minimal Nuxt app that renders Comark component syntax with Nuxt UI components through the @comark/vue Nuxt module."
canonical_url: "https://comark.dev/examples/frameworks/nuxt"
---
# Nuxt UI Markdown Example with Comark

> A minimal Nuxt app that renders Comark component syntax with Nuxt UI components through the @comark/vue Nuxt module.

::code-explorer
```yaml [props]
org: comarkdown
repo: comark@afa4b18a806217d4b6a09696377435e77b582870
path: examples/1.frameworks/nuxt
defaultValue: content/posts/comark-syntax.md
```
::

::browser{src="https://comark-nuxt.vercel.app/blog/comark-syntax"}
::

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/vue` and `@nuxt/ui` modules to your Nuxt config, and the `Markdown` component will use Nuxt UI components automatically.

## What does the `@comark/vue` Nuxt module do

- Auto-imports the `<Markdown>` and `<MarkdownDocument>` components.
- Auto-imports the `defineMarkdownComponent()` and `defineMarkdownDocumentComponent()` helpers.
- Detects Nuxt UI and tells Nuxt UI to register its Prose components.


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.