Need help with vue-styleguide-generator?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

123 Stars 16 Forks 82 Commits 4 Opened issues


React inspired style guide generator for Vue.js

Services available


Need anything else?

Contributors list

# 69,140
71 commits
# 171,346
2 commits
# 206,646
1 commit

🙀 [20/09/2017] Project discontinued 🙀

For purpose of having a demo of your Vuejs components please take a look at following projects that do really great job and are really handy for you dev workflow with Vuejs: storybook for vuejs and vue-styleguidist.

Vue js components styleguide generator 📚

dependencies status

Initially started after reading this vue.js feature request. Now only basic proof of concept is available which can load folder with .vue files, parse it and extract basic props of it.

Target is to have some tool with at least some of the React version capabilities.

Idea is to have what vue-play does but in automated way - with one task run, plus READMEs, etc.

Generate single html file containing all components listed with details and search out from your .vue project files.

Questions & bugs

  • General questions please ping me on twitter @legkoletat.
  • Bugs and inconsistencies please create an issue . Please concider to adding more information on what is the codebase you're running the generator against, what errors (with code, if applicable) you got. To keep issues list clean and relevant issues with no feedback/details/activity will be closed within 3 days.

1. Examples

Running on large components collections

Output UI demo

resulting output

2. Setup

  1. npm install vue-styleguide-generator --save-dev
  2. add to you package.json in script section - for example like this

    "build-components": "node ./node_modules/vue-styleguide-generator/"
    and then run
    npm run build-components
    from the root folder of the project.

🏃 You can also manually (or using Gulp/Grunt) run

node ./node_modules/vue-styleguide-generator/

3. Usage

✅ Works only for Vue 2.x projects.

CLI options

| Name | Type | Description | Default | | ---: | ---- | ------ |------------ | | --src | String|Source dir, will be recursively scanned|src| | --dest | String|Destination output dir, file index.html will be placed there| components-preview| | --exclude| RegExp|File mask to exclude certain type of files|/^./| | --locale|String|Output locale language|en| | --verbose| String|Output all details while processing| false| | --all| String|Do not ignore any components| false| | --o| String|Open browser preview after generating| false|


node ./node_modules/vue-styleguide-generator/ --src components --dest preview
will read components from PROJECTROOT/components folder and provide a html page into PROJECTROOT/preview folder

To see all parser error run with DEBUG:

DEBUG=app node ./node_modules/vue-styleguide-generator/

How the components are iterated

If you want to see more information about the component - add a .md file in the same directory. While retrieving the files the following assumptions are made: - if there are files with the same name in one folder (e.g.

) it's assumed to be one component; - if there are only two files in the folder and one is .vue and another is .md (e.g.
) it's assumed to be one component; - If there are >1 .vue files in the folder and .md file that does not have the same name as one of the .vue files - this .md file is ignored - Components with no props, no computed and no methods defined are considered to be a simple wrappers and not outputed

Found a bug or have a proposal - please create an issue or tweet me @legkoletat!


  • improve parsing technique and/or configuration to deal with variety of components organisation approaches
  • syntax highlighting
  • align parsing and display with vue-js-component-style-guide
  • core: move the demo-page to use Vue so that components can be generated from its declaration
  • ui: output extra component parameters (computable, data)
  • various use cases testing, added vuikit and Keen-UI links

Contributions are welcome 👍!

Especially on following: - translations - extra features - implementing SSR

Bugs and problems

  • window object may not be patched fully so some component's code execution may fail
  • 'vue-template-compiler' must be the same as the version of 'vue' you're using in your codebase. Now set to 2.1.10. may have to manually put to other version that's used in your project.'



Now as from 0.9.11 also your

files referenced from
files are supported.



option to open the browser. Refactoring the template. Added pt-br translation by israelss.


UI improvements (UX of the search block, 'Copy' component code).



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.