ComponentPreview

A component for displaying live component demos with optional source code viewing. Useful for showcasing UI components in documentation.

Usage

Use the ::component-preview MDC syntax with the name prop pointing to a component in ~/components/demo/:

::component-preview{name="ButtonDemo"}
::

The component will render the demo and optionally show its source code.

Creating Demo Components

Demo components should be placed in ~/components/demo/ directory:

components/
└── demo/
    ├── ButtonDemo.vue
    ├── ButtonOutline.vue
    └── ButtonSizes.vue

Example demo component:

<!-- components/demo/ButtonDemo.vue -->
<script setup>
import { Button } from '~/components/ui/button'
</script>

<template>
  <div class="flex gap-2">
    <Button>Default</Button>
    <Button variant="outline">
      Outline
    </Button>
    <Button variant="ghost">
      Ghost
    </Button>
  </div>
</template>

Alignment

Control the alignment of the preview content:

::component-preview{name="ButtonDemo" align="start"}
::

::component-preview{name="ButtonDemo" align="center"}
::

::component-preview{name="ButtonDemo" align="end"}
::

Hide Source Code

Hide the source code tab to show only the live preview:

::component-preview{name="ButtonDemo" hide-code}
::

Preview Types

Component (default)

Standard component preview with tabs for preview and source:

::component-preview{name="ButtonDemo" type="component"}
::

Example

Similar to component type:

::component-preview{name="ButtonDemo" type="example"}
::

Block

For larger components, shows as image on mobile and iframe on desktop:

::component-preview{name="DashboardDemo" type="block"}
::

Props

Prop	Type	Default	Description
`name`	`string`	required	Component name in `~/components/demo/`
`align`	`'center' \| 'start' \| 'end'`	`'center'`	Content alignment
`description`	`string`	-	Optional description text
`hideCode`	`boolean`	`false`	Hide the source code tab
`type`	`'block' \| 'component' \| 'example'`	`'component'`	Preview type
`class`	`string`	-	Additional CSS classes

Error Handling

If the specified component is not found, an error message will be displayed:

Component `ComponentName` not found in registry.

Ensure the component exists at ~/components/demo/{name}.vue.