Vue.js component styleguide generator

vue-styleguide-generator

The Vue styleguide generator is a project that allows users to generate a catalog with all the Vue components in their project and extract their properties, methods and if provided with an .md file can list all information related to it, created by Mikhail Kuznetcov. This project was initially started after this vue.js feature request and with the purpose to be able to generate a single HTML file containing all components listed with details and be able to search out from your *.vue project files with support for .js files referenced from .vue files & have the features of the React version.

Output UI demo based on the Buefy project with a search for "toast" components:

Check the results of running the generator on large components collections like Keen-UI:

Run with Keen-UI repo produces the following result available here. Run with vuikit repo produces the following result available here.

Setting it up is easy just run:

npm install vue-styleguide-generator --save-dev

Then add to your package.json in the script section a new command like "build-components": "node ./node_modules/vue-styleguide-generator/" and then run npm run build-components from the root folder of the project.

Find the project on Github to share and publish your projectsm check out its readme for documentation and more on the CLI options available, the iteration of the components or maybe give a hand to complete some todos.