Vue Styleguidist: Style Guide generator for Vue components
Vue Styleguidist
A project that serves as a component development environment - a style guide generator for Vue components. Inspired by React Styleguidist, Vue Styleguidist is a tool that generates documentation for components with hot reloading, lists information based on the comments in your source code and Readme files, providing also a playground. It can show live results, and 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.
Take a look at the demo here.
If you click on "show code" link on a documented component, it opens a playground to manipulate the code of the component right on the spot allowing to see any changes made in real time. You can also open an "isolated" page for a specific component to make things easier.
To get a better idea there are 2 examples available, the Basic style guide, and the Buefy style guide with sections and customized styles.
The Buefy example is slightly more complex. Steps made for implementation:
- Import the Buefy's own CSS
-
Customize the styles of style guide to match the colors of Buefy.
-
To avoid conflicts with Buefy's own configuration, like the
this.$dialogcontained here, import the global configuration of the components to thestyleguide.config.js.- By default, the style guide resolves the component's name using the component
nameattribute, asbAutocomplete, shown here. However to use Buefy, theb-autocompletecase must be used, so the author converted the component names before being documented, by converting CamelCase to kebab-case, like this.
- By default, the style guide resolves the component's name using the component
That's it! If you want to get your hands dirty the repository is available here.
Vue Styleguidist was created and submitted by Rafael Escala.
