VuePress Docgen

Thank you for using us

Vuepress plugin for creating a documentation site of your Vue component

npm

Install from NPM

npm install --save-dev vuepress-plugin-component-docgen

Install from Yarn

yarn add vuepress-plugin-component-docgen

How to use

Update your .vuepress/config.js

const path = require("path");

module.exports = {
    plugins: [
        [
            'component-docgen',
            {
                rootDir: <string>, // path.join(__dirname, '../../src/components')
                include: <string | string[]>, // need an example
                exclude: <string | string[]>, // need an example
                prefix: <string>, // need more explanation
            },
        ],
    ],
}

What you should care

WARNING

It is adapted for sidebar navigation.

Vuepress using 2 types of sidebar: Groups and Multiple see more

  • Groups: Example

    const path = require('path')

/**
 *  this will add a /components/ routes
 *  and all you components are add like /Comp/ etc
 */
module.exports = {
  themeConfig: {
    sidebar: {
      '/guide/': ['', 'getting-started'],
    },
  },
}

  • Mutliple: Example

    const path = require('path')

/**
 * this will add by default at the end of your array
 * if you want to add at a specific place you can see the example
 * with a
 * {
 *   title: "Components"
 * }
 * It will replace this object
 */
module.exports = {
  themeConfig: {
    sidebar: [
      // add this if you want to position the library here
      // {
      //   title: "Components"
      // },
      {
        title: 'Guide',
        collapsable: false,
        children: ['/guide/', '/guide/getting-started'],
      },
    ],
  },
}

Who use us

Contributors

License

MIT © dacsang97