Component

You can add components easily in Markdown content.

Settings

TS

// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // Enable component support
      component: true,
    }),
  ],
};

JS

// .vuepress/config.js
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // Enable component support
      component: true,
    }),
  ],
};

Usage

You can use component fence block to add a component into your markdown content. Both YAML and JSON format props data are supported:

```component ComponentName
# component data here
```

```component ComponentName
{
  // component data here
}
```

Demo

Mr.Hope

---

Where there is light, there is hope

Mr.Hope

---

Where there is light, there is hope

```component VPCard
title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
color: rgba(253, 230, 138, 0.15)
```

```component VPCard
{
  "title": "Mr.Hope",
  "desc": "Where there is light, there is hope",
  "logo": "https://mister-hope.com/logo.svg",
  "link": "https://mister-hope.com",
  "color": "rgba(253, 230, 138, 0.15)"
}
```