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.$dialog contained here, import the global configuration of the components to the styleguide.config.js .

  • By default, the style guide resolves the component's name using the component name attribute, as bAutocomplete, shown here. However to use Buefy, the b-autocomplete case must be used, so the author converted the component names before being documented, by converting CamelCase to kebab-case, like this.

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.