Skip to main content

Component

Less than 1 minuteComponentComponentMarkdown

You can easily insert components in Markdown content with component code block.

Settings

TS
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        components: 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:

  • YAML Recommended:

    ```component ComponentName
    # component data here
    ```
    
  • JSON:

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

Demo

VPCard
```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
background: 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",
  "background": "rgba(253, 230, 138, 0.15)"
}
```

<VPCard> here is a global component.

The above code blocks are equivalent to:

<VPCard
  title="Mr.Hope"
  desc="Where there is light, there is hope"
  logo="https://mister-hope.com/logo.svg"
  link="https://mister-hope.com"
  background="rgba(253, 230, 138, 0.15)"
/>