Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Vue Styleguidist

Explore how to use Vue Styleguidist to create living style guides and isolated development environments for Vue components. Learn how to document props, events, slots, and methods effectively using annotations, and write usage examples to streamline component development and maintain clear documentation.

We'll cover the following...

Vue Styleguidist is an isolated Vue component development environment with a living style guide.

Installation

There are a few ways to install it, but if the project was scaffolded with VueCLI, we could add it by running vue add styleguidist in our project. This command automatically:

  • Installs Vue Styleguidist.
  • Creates a config file called styleguide.config.js at the root of the project. We can find the full config guide here.
  • Creates a component called app-button.vue in the components directory.
  • Adds styleguide and styleguide:build commands to the package.json file.

Note: Vue Styleguidist is still working on Vue 3 support at this time. Therefore, the code below was written in a Vue 2 project. When reading this, there might already be a Vue 3 compatible version. We can track the progress in this Github issue. ...