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), you should probably use the plugin

vue add styleguidist

and use Vue CLI documentation

2. Configure your style guide

Point Styleguidist to your Vue components and tell it how to load your code.

If you’re using Vue-CLI 3 you can skip the webpack step. When you install vue-cli-plugin-styleguidist, styleguidist picks up what it needs from the CLI. Just 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?