---
title: "ComponentCode"
description: "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."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/components/component-code"
---
# ComponentCode

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

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

> [!NOTE]
> See: /en/docs/components/component-example#componentexampleextras
> 
> ComponentCode and ComponentExample share the same 
> 
> ComponentExampleExtras
> 
>  extension component.

## API

### Props

```ts
/**
 * Props for the ComponentCode component
 */
interface ComponentCodeProps {
  name: string;
  props?: Record<string, any> | undefined;
  items?: Record<string, any[]> | undefined;
  model?: string[] | undefined;
  external?: string[] | undefined;
  hide?: string[] | undefined;
  ignore?: string[] | undefined;
  slots?: Record<string, any> | undefined;
  /**
   * 是否使用 Prettier 格式化代码
   * @default false
   */
  prettier?: boolean | undefined;
  /**
   * 是否折叠代码块
   * @default false
   */
  collapse?: boolean | { icon?: string | undefined; name?: string | undefined; openText?: string | undefined; closeText?: string | undefined; open?: boolean | undefined; } | undefined;
  highlights?: number[] | undefined;
  overflowHidden?: boolean | undefined;
  elevated?: boolean | undefined;
}
```

## Changelog

See commit history for [layer/app/components/content/ComponentCode.vue](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/components/content/ComponentCode.vue).

---

- [GitHub](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/content/ComponentCode.vue)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.