vuepress-markdown-it-vue-docgen

A vuepress markdown-it plugin implemented with vue-docgen-api for parsing documentation comments of Vue components. It is used with the <vue-docgen /> tag.

Install

npm install vuepress-markdown-it-vue-docgen

Usage

1. Write your Vue component and add relevant comments

2. In your config.js, use extendsMarkdown. you can customize the component path being used by setting the plugin's options:

import path from 'path'
import vueDocgen from 'vuepress-markdown-it-vue-docgen'

extendsMarkdown: (md) => {
    md.use(vueDocgen,{
      dir: path.resolve(__dirname, '../../src/components')
    })
}

3. In your markdown file, use the <vue-docgen> tag and provide the src: Then refer to the custom dir path using the ~ identifier:

<vue-docgen src="~/Button.vue" />

Result

The tag will parse and generate relevant markdown information: