---
title: 常用组件
description: 常用自定义组件速查文档
navigation:
  icon: lucide-component
---



:::code-group
  ```mdc [index.md]
        ::callout
        ---
        icon: simple-icons-visualstudiocode
        to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
        ---
        安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
        ::     
  ```

  ::::code-preview{icon="i-lucide-eye" label="Preview"}
        ::callout
        ---
        icon: simple-icons-visualstudiocode
        to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
        ---
        安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
        ::
  ::::
:::



::tip
在 tip 标签中嵌套 code-group 的示例. 可以直接复制index.md 中的内容,既是 当前展示 的效果.

  :::code-group
  ```mdc [index.md]
            ::tip
            在文档中使用自定义组件时，可以在插槽中使用 Markdown 语法，组件会自动渲染 Markdown 内容。

              :::code-group
              ```mdc [index.md]
              ::my-title
              A [rich text](/) will be **rendered** by the component.
              ::
              ```
              
              ```html [MyTitle.vue]
              <template>
                <h1 class="text-4xl">
                  <slot mdc-unwrap="p" />
                </h1>
              </template>
              ```

                ::::code-preview{icon="i-lucide-eye" label="Preview"}
                  :::::example-title
                  A [rich text](/) will be **rendered** by the component.
                  :::::
                ::::
              :::
            ::
  ```
  
  ```html [MyTitle.vue]
  <template>
    <h1 class="text-4xl">
      <slot mdc-unwrap="p" />
    </h1>
  </template>
  ```

    ::::code-preview{icon="i-lucide-eye" label="Preview"}
      :::::example-title
      A [rich text](/) will be **rendered** by the component.
      :::::
    ::::
  :::
::