ComponentCode

GitHub 查看源码

ComponentCode 让作者在 Markdown 中以声明式属性矩阵驱动任意已注册的 Vue 组件实时渲染，并同步合成可复制粘贴的 Vue 代码片段。

用法

基本用法

最小示例：传入 name（PascalCase 的组件名）与初始 props，配合 items 给出可选项。

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 与 ComponentExample 共用同一个 ComponentExampleExtras 扩展组件。

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`

Changelog

No recent changes

ComponentExample

ComponentExample 在文档中嵌入交互式 Vue 组件示例，实时渲染预览效果并展示带语法高亮的源代码，支持折叠显示。通过 useFetchComponentExample 获取构建时注册的示例文件，显著提升文档的可读性和用户体验。

CommitChangelog

CommitChangelog 自动从 GitHub 仓库获取指定组件或文件的 Git 提交历史，以时间线卡片形式展示。支持通过文件名、路径、作者过滤，以及 commitPath、suffix、casing 路径推断配置。需配置 NUXT_GITHUB_TOKEN 环境变量。