---
title: "ComponentProps"
description: "ComponentProps 通过 nuxt-component-meta 自动读取 Vue 组件元数据，在 Markdown 文档中一行代码生成包含属性名称、类型、默认值和说明的完整 Props 文档表格，支持通过 slug 属性指定目标组件名称。"
seo_title: "ComponentProps"
seo_description: "Document Vue component props in Movk Nuxt Docs with automatic metadata extraction, typed prop tables, defaults, descriptions, and slug-based lookup."
canonical_url: "https://docs.mhaibaraai.cn/docs/components/component-props"
---
# ComponentProps

> ComponentProps 通过 nuxt-component-meta 自动读取 Vue 组件元数据，在 Markdown 文档中一行代码生成包含属性名称、类型、默认值和说明的完整 Props 文档表格，支持通过 slug 属性指定目标组件名称。

## 用法

在您的 Markdown 文档中使用 `:component-props` 语法：

```vue
<template>
  <pre language=ts code=/**
   * Props for the TestApi component
   */
  interface TestApiProps {
    color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined;
    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
    /**
     * The variant of the component
     */
    variant?: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost" | undefined;
    disabled?: boolean | undefined;
    label?: string | undefined;
    /**
     * display an avatar
     */
    avatar?: { src: string; alt?: string | undefined; text?: string | undefined; chip?: boolean | "circle" | undefined; size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined; } | undefined;
  } />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:component-props{slug="TestApi"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  component-props</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  slug</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  TestApi</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ComponentProps component
 */
interface ComponentPropsProps {
  /**
   * 获取组件属性的 slug 标识
   */
  slug?: string | undefined;
  /**
   * 需要忽略的属性名数组
   * @default "[
    \"activeClass\",
    \"inactiveClass\",
    \"exactActiveClass\",
    \"ariaCurrentValue\",
    \"href\",
    \"rel\",
    \"noRel\",
    \"prefetch\",
    \"prefetchOn\",
    \"noPrefetch\",
    \"prefetchedClass\",
    \"replace\",
    \"exact\",
    \"exactQuery\",
    \"exactHash\",
    \"external\",
    \"onClick\",
    \"viewTransition\",
    \"enterKeyHint\",
    \"form\",
    \"formaction\",
    \"formenctype\",
    \"formmethod\",
    \"formnovalidate\",
    \"formtarget\"
]"
   */
  ignore?: string[] | undefined;
  prose?: boolean | undefined;
}
```

## Changelog

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


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.