CodePreview

Display code examples with a preview and their source for clearer documentation.

Usage

Wrap any content with the code-preview component to display a live preview alongside its source code using the code slot.

inline code

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

API

Props

Prop Default Type
ui

{ root?: ClassNameValue; preview?: ClassNameValue; code?: ClassNameValue; }

Slots

Slot Type
default

{}

code

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codePreview: {
        slots: {
          root: 'my-5',
          preview: 'flex justify-center border border-muted relative p-4 rounded-md',
          code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
        },
        variants: {
          code: {
            true: {
              preview: 'border-b-0 rounded-b-none'
            }
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codePreview: {
            slots: {
              root: 'my-5',
              preview: 'flex justify-center border border-muted relative p-4 rounded-md',
              code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
            },
            variants: {
              code: {
                true: {
                  preview: 'border-b-0 rounded-b-none'
                }
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

CodeGroup

Group multiple code examples in tabbed interfaces for easy comparison.

CodeTree

Visualize file and folder structures with syntax-highlighted code.