| 1 | <div align="center" markdown="1" style="text-align:center">
|
| 2 | <img src="https://raw.githubusercontent.com/vue-styleguidist/vue-styleguidist/dev/assets/logo-withtext.png" alt="Vue Styleguidist" width="400">
|
| 3 |
|
| 4 | **Isolated Vue component development environment with a living style guide**
|
| 5 |
|
| 6 | <a href="https://www.npmjs.com/package/vue-styleguidist">
|
| 7 | <img src="https://img.shields.io/npm/v/vue-styleguidist.svg" alt="Version">
|
| 8 | </a>
|
| 9 | <a href="https://travis-ci.com/vue-styleguidist/vue-styleguidist">
|
| 10 | <img src="https://travis-ci.com/vue-styleguidist/vue-styleguidist.svg?branch=dev" alt="Travis CI (unit & lint)">
|
| 11 | </a>
|
| 12 | <a href="https://circleci.com/gh/vue-styleguidist/vue-styleguidist">
|
| 13 | <img src="https://circleci.com/gh/vue-styleguidist/vue-styleguidist.svg?style=svg" alt="Circle CI (integration)">
|
| 14 | </a>
|
| 15 | </div>
|
| 16 |
|
| 17 | > 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.
|
| 18 |
|
| 19 | 
|
| 20 |
|
| 21 | 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.
|
| 22 |
|
| 23 | ## Usage
|
| 24 |
|
| 25 | - **[Getting Started](https://vue-styleguidist.github.io/docs/GettingStarted.html): install and run Vue Styleguidist**
|
| 26 | - [Documenting components](https://vue-styleguidist.github.io/docs/Documenting.html): how to write documentation
|
| 27 | - [Locating components](https://vue-styleguidist.github.io/docs/Components.html): point Vue Styleguidist to your Vue components
|
| 28 | - [Configuring webpack](https://vue-styleguidist.github.io/docs/Webpack.html): tell Vue Styleguidist how to load your code
|
| 29 | - [Cookbook](https://vue-styleguidist.github.io/docs/Cookbook.html): how to solve common tasks with Vue Styleguidist
|
| 30 |
|
| 31 | ## Advanced documentation
|
| 32 |
|
| 33 | - [Configuration](https://vue-styleguidist.github.io/docs/Configuration.html)
|
| 34 | - [CLI commands and options](https://vue-styleguidist.github.io/docs/CLI.html)
|
| 35 | - [Node API](https://vue-styleguidist.github.io/docs/API.html)
|
| 36 |
|
| 37 | ## Examples
|
| 38 |
|
| 39 | - [Basic style guide](http://rafaelescala.com/vue-styleguide/), [source](./examples/basic)
|
| 40 | - [Buefy style guide with sections, customized styles](http://rafaelescala.com/buefy-example/). [source](https://github.com/vue-styleguidist/buefy-styleguide-example)
|
| 41 | - Style guide with vuetify and vue-i18n. [source](./examples/vuetify)
|
| 42 | - Style guide with customized styles, [source](./examples/customised)
|
| 43 | - Style guide with sections, [source](./examples/sections)
|
| 44 | - Style guide with navigation, [source](./examples/navigation)
|
| 45 | - Style guide with Vuex, [source](./examples/vuex)
|
| 46 | - Style guide with Nuxt.js, [source](./examples/nuxtjs)
|
| 47 |
|
| 48 | ## Showcases
|
| 49 |
|
| 50 | Real projects using Vue Styleguidist:
|
| 51 |
|
| 52 | - [Croud Style Guide](https://croudtech.github.io/Croud-Style-Guide/)
|
| 53 | - [Vue Design System](https://vueds.com/)
|
| 54 |
|
| 55 | ## Change log
|
| 56 |
|
| 57 | The change log can be found on the [Releases page](https://github.com/vue-styleguidist/vue-styleguidist/releases).
|
| 58 |
|
| 59 | ## Authors and license
|
| 60 |
|
| 61 | We work on this project because we love the open source community and learn new things.
|
| 62 |
|
| 63 | - Rafael: You can buy me a cup of coffee :) [](https://www.paypal.me/rafaesc)
|
| 64 | - Bart: Send me money to make chameleon stickers. I promise I will send you one if you donate. [](https://www.paypal.me/elevatebart)
|