vue-styleguidist/README.md

Vue components style guide generator

<div align="center" markdown="1" style="text-align:center">
  <img src="https://raw.githubusercontent.com/vue-styleguidist/vue-styleguidist/dev/assets/logo-withtext.png" alt="Vue Styleguidist" width="400">

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

<a href="https://www.npmjs.com/package/vue-styleguidist"> 
  <img src="https://img.shields.io/npm/v/vue-styleguidist.svg" alt="Version"> 
</a>
<a href="https://travis-ci.com/vue-styleguidist/vue-styleguidist">
  <img src="https://travis-ci.com/vue-styleguidist/vue-styleguidist.svg?branch=dev" alt="Travis CI (unit & lint)">
</a>
<a href="https://circleci.com/gh/vue-styleguidist/vue-styleguidist">
  <img src="https://circleci.com/gh/vue-styleguidist/vue-styleguidist.svg?style=svg" alt="Circle CI (integration)">
</a>
</div>

> 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)