{"id":12428,"library":"vue-cli-plugin-styleguidist","title":"Vue CLI Plugin for Styleguidist","description":"The `vue-cli-plugin-styleguidist` package integrates Vue Styleguidist into projects initialized with Vue CLI 3.0 or higher. It streamlines the setup process, allowing developers to generate live-reloading component documentation and a style guide directly within their Vue CLI workflow. The current stable version is `4.72.4`, with a release cadence that includes regular patch updates addressing compatibility issues and feature enhancements, primarily through its underlying `vue-styleguidist` and `vue-docgen-api` dependencies. Key differentiators include its tight integration with the Vue CLI ecosystem, simplifying initial configuration and command-line execution for component documentation compared to a manual setup of Vue Styleguidist.","status":"active","version":"4.72.4","language":"javascript","source_language":"en","source_url":"https://github.com/vue-styleguidist/vue-styleguidist","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-cli-plugin-styleguidist","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-styleguidist","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-styleguidist","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for Vue CLI project integration.","package":"@vue/cli-service","optional":false},{"reason":"Required as a peer dependency for bundling and build processes.","package":"webpack","optional":false}],"imports":[{"note":"While this plugin itself doesn't export this symbol, it's the primary configuration type for `styleguide.config.ts`, which the plugin sets up. It's imported from the underlying `vue-styleguidist` package.","symbol":"StyleguidistConfig","correct":"import type { StyleguidistConfig } from 'vue-styleguidist';"},{"note":"For advanced use cases, such as creating custom documentation generators or parsers, developers might directly use `vue-docgen-api`. This package is a core dependency of `vue-styleguidist` which this plugin integrates.","symbol":"parse","correct":"import { parse } from 'vue-docgen-api';"},{"note":"The primary interaction with `vue-cli-plugin-styleguidist` is via Vue CLI commands (`vue add styleguidist`) and not through direct programmatic imports of a 'setup' function. Its role is to configure and run `vue-styleguidist`.","symbol":"setup","correct":"/* No direct programmatic import for 'setup' from this plugin. */"}],"quickstart":{"code":"vue create my-project\ncd my-project\nvue add styleguidist\n\n# The plugin will prompt you for configuration details.\n# After installation, generate the styleguide:\nyarn styleguide\n\n# This will typically open the style guide in your browser.\n# To customize, edit the generated `styleguide.config.js` or `styleguide.config.ts`.\n// Example of a basic component in src/components/MyComponent.vue\n// <template>\n//   <button :class=\"{ primary }\" @click=\"$emit('click')\">{{ label }}</button>\n// </template>\n// <script setup lang=\"ts\">\n// import { defineProps, defineEmits } from 'vue';\n//\n// interface Props {\n//   label: string;\n//   primary?: boolean;\n// }\n//\n// const props = defineProps<Props>();\n// const emit = defineEmits<{ (e: 'click'): void }>();\n// </script>\n// <style scoped>\n// .primary { background-color: blue; color: white; }\n// </style>","lang":"typescript","description":"Demonstrates how to install the plugin, add it to a Vue CLI project, and run the style guide command to generate documentation."},"warnings":[{"fix":"Upgrade to `vue-cli-plugin-styleguidist@4.72.4` or higher. Ensure your `package.json` allows for the update, then run `npm update vue-cli-plugin-styleguidist` or `yarn upgrade vue-cli-plugin-styleguidist`.","message":"Versions of `vue-cli-plugin-styleguidist` and its underlying `vue-styleguidist` dependency prior to `4.72.4` may experience compatibility issues when used with Vue 3.3.2 due to internal changes in Vue's reactivity system or compiler. Updating to `4.72.4` or newer is crucial for stable operation with Vue 3.3.2.","severity":"breaking","affected_versions":"<4.72.4"},{"fix":"Ensure your project is managed by Vue CLI 3.x. For newer setups, consider directly integrating `vue-styleguidist` without the plugin or exploring alternative documentation solutions native to your build system.","message":"The plugin is specifically designed for Vue CLI 3.0+ projects. While it might function with newer Vue CLI versions (e.g., 4.x or 5.x) or non-CLI setups (like Vite), full compatibility and all features are best guaranteed within the Vue CLI 3.x ecosystem. Using it outside this context may lead to unexpected behavior or require manual configuration adjustments.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Check your `package-lock.json` or `yarn.lock` for the `vue-docgen-api` version. If it's below `4.79.2`, try updating your root dependencies, or manually add `\"vue-docgen-api\": \">=4.79.2\"` to your `package.json` to force an upgrade.","message":"The documentation generation relies heavily on `vue-docgen-api`. Older versions of this dependency (e.g., prior to `4.79.2`) had known bugs, such as failing to parse interface extensions or type alias references correctly, leading to incomplete or incorrect component documentation. Users might need to explicitly update `vue-docgen-api` if their project's dependency resolution pulls an older version.","severity":"gotcha","affected_versions":"<4.79.2 (vue-docgen-api)"},{"fix":"Verify that your installed versions of `@vue/cli-service` and `webpack` satisfy the peer dependency ranges listed in `vue-cli-plugin-styleguidist`'s `package.json`. Use `npm ls <package>` or `yarn why <package>` to inspect installed versions and update if necessary.","message":"The plugin relies on peer dependencies `@vue/cli-service` and `webpack`. Mismatched versions of these peer dependencies can cause build errors or runtime issues when generating the style guide. Always ensure these peer dependencies meet the requirements specified by `vue-cli-plugin-styleguidist`.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `@vue/cli-service` is installed in your project: `npm install @vue/cli-service` or `yarn add @vue/cli-service`.","cause":"The `@vue/cli-service` package, a peer dependency, is not installed or incorrectly linked.","error":"Error: Cannot find module '@vue/cli-service'"},{"fix":"Update `webpack` to a compatible version as specified by `vue-cli-plugin-styleguidist`'s peer dependencies. Review your `styleguide.config.js` for any custom webpack modifications that might be causing the issue.","cause":"Often indicates an issue with `webpack` version compatibility or incorrect configuration within `styleguide.config.js` that interferes with webpack's module resolution.","error":"TypeError: Cannot read properties of undefined (reading 'path') in webpack config"},{"fix":"Double-check the `components` glob pattern in your `styleguide.config.js` to ensure it correctly matches your component files. Verify that your components are valid Vue components and are discoverable.","cause":"Vue Styleguidist could not locate any Vue components at the specified glob path in `styleguide.config.js` or the components are not properly exported.","error":"No component found in <path/to/components>"}],"ecosystem":"npm"}