Vue Styleguidist

# Getting Started

# 1. Install

Install Webpack if you don’t have it already, this is how we determine if your version of Webpack is compatible with styleguidist.

npm install --save-dev webpack

Install Styleguidist:

npm install --save-dev vue-styleguidist

If you use Vue CLI 3 (@vue/cli (opens new window)), you should probably use the plugin

vue add styleguidist

and use Vue CLI documentation

# 2. Configure your style guide

Create a styleguide.config.js file in the same directory that your package.json. This will be your configuration file. In this file, you can :

If you’re using Vue-CLI 3 (opens new window) you can skip the webpack step. When you install vue-cli-plugin-styleguidist, styleguidist picks up what it needs from the CLI. Then tell it where to find the components

# 3. Add npm scripts for convenience

Add these scripts to your package.json:

{
  "scripts": {
+    "styleguide": "vue-styleguidist server",
+    "styleguide:build": "vue-styleguidist build"
  }
}

# 4. Start your style guide

Run npm run styleguide to start style a guide dev server.

Run npm run styleguide:build to build a static version.

# 5. Start documenting your components

See how to document your components

# Have questions

Documenting components →