**Isolated Vue component development environment with a living style guide**

> Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from [React Styleguidist](https://github.com/styleguidist/react-styleguidist), implement additional support to read and compile .vue files. Only supports vue 2.x. ![](https://user-images.githubusercontent.com/10201025/48210221-e7bcee00-e344-11e8-92d7-df4d988598f7.gif) Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server. ## Usage - **[Getting Started](https://vue-styleguidist.github.io/docs/GettingStarted.html): install and run Vue Styleguidist** - [Documenting components](https://vue-styleguidist.github.io/docs/Documenting.html): how to write documentation - [Locating components](https://vue-styleguidist.github.io/docs/Components.html): point Vue Styleguidist to your Vue components - [Configuring webpack](https://vue-styleguidist.github.io/docs/Webpack.html): tell Vue Styleguidist how to load your code - [Cookbook](https://vue-styleguidist.github.io/docs/Cookbook.html): how to solve common tasks with Vue Styleguidist ## Advanced documentation - [Configuration](https://vue-styleguidist.github.io/docs/Configuration.html) - [CLI commands and options](https://vue-styleguidist.github.io/docs/CLI.html) - [Node API](https://vue-styleguidist.github.io/docs/API.html) ## Examples - [Basic style guide](http://rafaelescala.com/vue-styleguide/), [source](./examples/basic) - [Buefy style guide with sections, customized styles](http://rafaelescala.com/buefy-example/). [source](https://github.com/vue-styleguidist/buefy-styleguide-example) - Style guide with vuetify and vue-i18n. [source](./examples/vuetify) - Style guide with customized styles, [source](./examples/customised) - Style guide with sections, [source](./examples/sections) - Style guide with navigation, [source](./examples/navigation) - Style guide with Vuex, [source](./examples/vuex) - Style guide with Nuxt.js, [source](./examples/nuxtjs) ## Showcases Real projects using Vue Styleguidist: - [Croud Style Guide](https://croudtech.github.io/Croud-Style-Guide/) - [Vue Design System](https://vueds.com/) ## Change log The change log can be found on the [Releases page](https://github.com/vue-styleguidist/vue-styleguidist/releases). ## Authors and license We work on this project because we love the open source community and learn new things. - Rafael: You can buy me a cup of coffee :) [![Paypal.me donate](https://img.shields.io/badge/Paypal.me-donate-yellow.svg)](https://www.paypal.me/rafaesc) - Bart: Send me money to make chameleon stickers. I promise I will send you one if you donate. [![Paypal.me donate](https://img.shields.io/badge/Paypal.me-donate-yellow.svg)](https://www.paypal.me/elevatebart)