Component Preview

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.

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button :class="style">Save</Button>
    <Button :class="style" disabled>Disabled</Button>
  </div>
</template>

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

const style = [
  'inline-flex h-12 items-center justify-center px-[1.125rem] whitespace-nowrap',
  'rounded-component-lg type-component-lg',
  'bg-primary-solid text-primary-on-solid',
  'transition-colors duration-100 ease-linear',
  'hover:bg-primary-solid-hover active:bg-primary-solid-active',
  'data-[disabled=true]:bg-disabled-solid data-[disabled=true]:text-disabled-on-solid',
].join(' ')
</script>

Usage

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

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

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

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

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.

<template>
  <Button>Save</Button>
  <Button disabled>Disabled</Button>
</template>

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

::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.

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.

export default defineAppConfig({
  docs: {
    previewThemes: ['mono'],
  },
})