Vue Styleguidist

4.72.4 · active · verified Sun Apr 19

Vue Styleguidist is a living style guide generator and isolated development environment for Vue components. It enables developers to document components with live, editable usage examples based on Markdown files, fostering a component-driven development workflow. Currently at version 4.72.4, it generally maintains a frequent patch and minor release cadence, often addressing compatibility with newer Vue versions or fixing parsing issues in its underlying `vue-docgen-api` dependency. Its key differentiators include its heritage from React Styleguidist, providing a similar interactive documentation experience, and its specific tooling for parsing and compiling `.vue` single-file components. It supports both Vue 2 and Vue 3 environments (requiring appropriate `vue-loader` and `@vue/compiler-sfc` peer dependencies respectively) and integrates with webpack for asset loading.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to set up Vue Styleguidist for Vue 3 with a basic component, including a `styleguide.config.js` for webpack configuration and a `.vue` component with embedded documentation using TypeScript.

npm install --save-dev vue-styleguidist vue@^3 @vue/compiler-sfc webpack@^5 vue-loader@^17 style-loader css-loader babel-loader @babel/core @babel/preset-env

# Create styleguide.config.js
// styleguide.config.js
const path = require('path');

module.exports = {
  title: 'My Vue Component Style Guide',
  // Adjust components glob to match your project structure
  components: 'src/components/**/*.vue',
  defaultExample: true,
  // Required for Vue 3 setup, or if you have specific compilation needs
  compiler: 'vue-styleguidist/lib/loaders/vue-standalone-compiler',
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
        },
        {
          test: /\.(js|ts)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    resolve: {
      alias: {
        // Essential for Vue 3 to resolve the correct Vue instance
        'vue': path.resolve(__dirname, 'node_modules/vue'),
      },
      extensions: ['.vue', '.js', '.ts', '.json'],
    },
  },
  styleguideDir: 'dist-styleguide',
};


# Create src/components/MyButton.vue
// src/components/MyButton.vue
<template>
  <button :style="{ backgroundColor: color }" @click="onClick">
    {{ label }}
  </button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyButton',
  props: {
    label: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: 'blue',
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const onClick = () => {
      console.log(`Button '${props.label}' clicked!`);
      emit('click');
    };
    return {
      onClick,
    };
  },
});
</script>

<style scoped>
button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}
</style>

<docs>
This is a simple button component with customizable label and color.

```vue
<MyButton label="Click Me!" />
<MyButton label="Submit" color="#4CAF50" />
<MyButton label="Danger" color="#f44336" @click="alert('Danger button clicked!')" />
```
</docs>

# Run Styleguidist
npx styleguidist server
# or to build a static style guide
npx styleguidist build

view raw JSON →