Components / Code & Prose
Code Block
Multi-line syntax-highlighted code with copy button.
nuxt.config.ts
Inline Code
One-line copyable snippet for commands and imports.
Prose / Markdown
Renders markdown with syntax-highlighted fenced code blocks.
Preview Component
Interactive tabbed viewer demonstrating a live component next to its source code, with configurable heights.
Nested Preview
I am inside a preview!
CodeBlock API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
code | string | '' | The source code string to display and highlight. |
lang | string | 'text' | The language for syntax highlighting (e.g. "vue", "javascript"). |
filename | string | '' | Optional filename to display in the header. |
InlineCode API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
code | string | '' | The inline code snippet string. |
lang | string | '' | The language for syntax highlighting. |
copyable | boolean | true | Whether to show the copy to clipboard button. |
Prose API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
content | string | '' | The Markdown string to render as HTML. |
PreviewCode API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
title | string | '' | The title displayed above the preview. |
description | string | '' | The description displayed below the title. |
code | string | '' | The source code to display in the Code tab. |
lang | string | 'vue' | The language for syntax highlighting in the Code tab. |
previewHeight | string | 'auto' | Fixed height for the Preview tab (e.g. "200px"). |
codeHeight | string | 'auto' | Fixed height for the Code tab. |