vuepress-plugin-component-demo v1.0.3

vuepress-plugin-component-demo

Vuepress component demo block in markdown.

Install

npm i -D vuepress-plugin-component-demo

Usage

Directory Structure

.
├── docs
│   ├── .vuepress
│   │   ├── components
│   │   │   ├── function1.vue
│   │   │   └── function2.vue
│   │   └── config.js
│   └── README.md

config.js

import demo from "vuepress-plugin-component-demo";

export default {
  plugins: ["vuepress-plugin-component-demo"],
};

README.md

# Title

description...

## Function1

<demo name="function1" />

Result

Options

Extends

Use custom demo block:

.
├── docs
│   ├── .vuepress
│   │   ├── components
│   │   │   ├── custom-demo.vue

custom-demo.vue

<template>
  <div v-html="code"></div>
</template>

<script>
import { CODES } from "@dynamic/demo-codes";

export default {
  props: {
    name: String,
  },
  computed: {
    code() {
      return CODES[this.name];
    },
  },
};
</script>

README.md

<custom-demo name="function1" />