# Component Preview

A live demo with its source underneath, read from one Vue file.

A component preview renders a demo and shows the file it was rendered from. The source is read from the demo itself, so the code on the page is the code that runs.

::component-preview{src="~/demos/ButtonDemo.vue"}
::

## Usage

Name the demo relative to the Markdown file, or through an alias such as `~/`.

```mdc
::component-preview{src="~/demos/ButtonDemo.vue"}
::
```

Every demo has to match a glob in `docs.previews`, which registers it at build time.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['@maas/docs'],
  docs: {
    previews: ['app/demos/*.vue'],
  },
})
```

::warning
Keep demos outside `content/`. Nuxt Content stops the dev server from watching that directory, so a demo inside it only updates after a restart.
::

## Written code

If a demo carries setup a reader should not copy, write the code to show inside the block. The pane shows that code block in place of the demo’s file, and the copy button copies it.

::component-preview{src="~/demos/ButtonDemo.vue"}
```vue
<template>
  <Button>Save</Button>
  <Button disabled>Disabled</Button>
</template>

<script setup lang="ts">
import { Button } from '@maas/mirror/vue/Button'
</script>
```
::

````mdc
::component-preview{src="~/demos/ButtonDemo.vue"}
```vue
<template>
  <Button>Save</Button>
  <Button disabled>Disabled</Button>
</template>

<script setup lang="ts">
import { Button } from '@maas/mirror/vue/Button'
</script>
```
::
````

The pane names the file after the code block’s `[filename]`. Without one, the language decides: `App.vue` for `vue`, `index.html` for `html`, `styles.css` for `css` and `main.ts` for `ts`.

::caution
Nothing compares the written code with the demo. Change both in the same edit, or the page shows code that no longer matches what runs.
::

## Settings

The settings in the corner of the frame switch the demo between the page’s color mode, light and dark. With `previewThemes` in the app config, they switch between themes as well, and the theme holds for every preview on the page.

```ts [app/app.config.ts]
export default defineAppConfig({
  docs: {
    previewThemes: ['mono'],
  },
})
```