ComponentCode

GitHub View source

ComponentCode lets authors drive the live rendering of any registered Vue component from a declarative property matrix in Markdown, while synthesizing a copy-paste Vue snippet in sync.

Usage

Basic usage

A minimal example: pass name (the PascalCase component name) and the initial props, with items providing the available options.

label

color

variant

New

<template>
  <UBadge label="New" color="primary" variant="solid" />
</template>

::component-code
---
name: UBadge
props:
  label: New
  color: primary
  variant: solid
items:
  color: [primary, secondary, success, warning, error, neutral]
  variant: [solid, outline, soft, subtle]
---
::

ComponentCode and ComponentExample share the same ComponentExampleExtras extension component.

API

Props

Prop	Default	Type
`name`		`string`
`props`		`Record<string, any>`
`items`		`Record<string, any[]>`
`model`		`string[]`
`hide`		`string[]`
`ignore`		`string[]`
`slots`		`Record<string, any>`
`collapse`	`false`	`boolean \| { icon?: string; name?: string; openText?: string; closeText?: string; open?: boolean; }` 是否折叠代码块
`highlights`		`number[]`
`prettier`	`false`	`boolean` 是否使用 Prettier 格式化代码
`overflowHidden`		`boolean`
`elevated`		`boolean`

ComponentExample embeds interactive Vue component examples in your documentation, rendering a live preview and displaying syntax-highlighted source code with collapsible support. It fetches example files registered at build time via useFetchComponentExample, significantly improving the readability and user experience of your docs.

CommitChangelog

CommitChangelog automatically fetches the Git commit history of a specific component or file from a GitHub repository and displays it as timeline cards. It supports filtering by filename, path, and author, as well as path inference via commitPath, suffix, and casing. Requires the NUXT_GITHUB_TOKEN environment variable.