{"id":15905,"library":"vue-docgen-cli","title":"Vue Docgen CLI","description":"vue-docgen-cli is a command-line interface tool designed to generate comprehensive Markdown documentation files directly from Vue.js component source code. Built upon the powerful vue-docgen-api, it parses Vue 2 and Vue 3 components (including Composition API with script setup, defineProps, defineEmits, and defineSlots) and extracts their props, events, methods, slots, and other metadata into structured Markdown. The current stable version is 4.79.0, with frequent patch and minor releases often synchronized with updates to vue-docgen-api to maintain compatibility with the latest Vue features. Key differentiators include its highly customizable templating system for output Markdown, support for a configurable `docgen.config.js` file, a watch mode for automatic regeneration, and the ability to integrate with existing build configurations (e.g., Webpack aliases) to correctly resolve component dependencies. It provides a static documentation generation alternative to in-browser style guides.","status":"active","version":"4.79.0","language":"javascript","source_language":"en","source_url":"https://github.com/vue-styleguidist/vue-styleguidist","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-docgen-cli","lang":"bash","label":"npm"},{"cmd":"yarn add vue-docgen-cli","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-docgen-cli","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core API for parsing Vue components and extracting documentation.","package":"vue-docgen-api","optional":false},{"reason":"Required for compatibility and correct parsing of Vue component syntax.","package":"vue","optional":true}],"imports":[{"note":"Primarily a CLI tool; direct programmatic imports for library usage are less common. This import is for TypeScript users type-checking their `docgen.config.js` / `.ts` file.","wrong":"import { DocgenCLIConfig } from 'vue-docgen-cli';","symbol":"DocgenCLIConfig","correct":"import type { DocgenCLIConfig } from 'vue-docgen-cli';"},{"note":"While primarily a CLI, advanced users might programmatically invoke its generation function. The `docgen.config.js` itself is typically CommonJS.","wrong":"const generate = require('vue-docgen-cli').generate;","symbol":"generate","correct":"import { generate } from 'vue-docgen-cli';"},{"note":"For customizing output, users can extend default templates. This path is illustrative as specific internal template module exports may vary and are not explicitly documented for direct import.","wrong":"import componentTemplate from 'vue-docgen-cli/dist/templates/component';","symbol":"componentTemplate","correct":"import { componentTemplate } from 'vue-docgen-cli/dist/templates';"}],"quickstart":{"code":"```javascript\n// package.json\n{\n  \"name\": \"my-vue-project-docs\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Generate docs for Vue components\",\n  \"scripts\": {\n    \"docs:generate\": \"vue-docgen src/components/**/*.vue docs/components\",\n    \"docs:watch\": \"vue-docgen -w src/components/**/*.vue docs/components\"\n  },\n  \"devDependencies\": {\n    \"vue-docgen-cli\": \"^4.79.0\"\n  }\n}\n\n// src/components/MyButton.vue\n<template>\n  <button @click=\"handleClick\">{{ label }}</button>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * A universal button component.\n * @displayName MyButton\n */\nimport { ref } from 'vue';\n\n/**\n * Props for MyButton.\n */\ninterface MyButtonProps {\n  /**\n   * The text label for the button.\n   * @type {string}\n   * @example 'Click Me'\n   */\n  label: string;\n  /**\n   * Determines if the button is disabled.\n   */\n  disabled?: boolean;\n}\n\nconst props = withDefaults(defineProps<MyButtonProps>(), {\n  disabled: false,\n});\n\nconst emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>();\n\nconst count = ref(0);\n\n/**\n * Handles the click event on the button.\n * @param {MouseEvent} event - The native mouse event.\n * @event click\n */\nconst handleClick = (event: MouseEvent) => {\n  if (!props.disabled) {\n    count.value++;\n    emit('click', event);\n  }\n};\n</script>\n\n// Terminal commands\n$ npm install\n$ npm run docs:generate\n```","lang":"typescript","description":"This quickstart demonstrates how to install vue-docgen-cli, define a basic Vue component with JSDoc comments, and then use the CLI via npm scripts to generate Markdown documentation for it."},"warnings":[{"fix":"Upgrade your Node.js environment to version 16.3 or newer. Use a Node Version Manager (e.g., nvm) for easy switching.","message":"vue-docgen-cli requires Node.js version 16.3 or higher. Running on older Node.js environments will result in errors.","severity":"breaking","affected_versions":"<4.0.0 (check specific previous versions)"},{"fix":"Ensure you are using vue-docgen-cli version 4.75.0 or newer to guarantee compatibility with Vue 3.3+ features. Update your package dependencies.","message":"Older versions of vue-docgen-cli (and its core dependency vue-docgen-api) may fail to correctly parse newer Vue 3.3+ syntax, specifically `defineEmits` syntax introduced in Vue 3.3. This was addressed in vue-docgen-api@4.75.0 and vue-docgen-cli@4.75.0.","severity":"gotcha","affected_versions":"<4.75.0"},{"fix":"Use CommonJS `require()` and `module.exports` syntax within your `docgen.config.js`. If you prefer ESM, consider configuring your build process or renaming the file to `.mjs` if the CLI supports it.","message":"The `docgen.config.js` file is processed as a CommonJS module. Using ES Module syntax (`import`/`export`) directly within this configuration file will cause errors unless your project is explicitly configured to handle `.js` files as ES Modules or you rename the config file to `docgen.config.mjs`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly inform `vue-docgen-cli` of your aliases through the `apiOptions.alias` property in `docgen.config.js`, typically by importing your bundler's resolve configuration (e.g., `apiOptions: { ...require('./webpack.config').resolve }`).","message":"Alias resolution (e.g., `@components`) defined in bundlers like Webpack or Vite is not automatically picked up by vue-docgen-cli. This can lead to issues where component imports within your Vue files cannot be resolved during documentation generation, affecting type inference or linking.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade your Node.js environment to version 16.3 or newer. Use 'nvm install 16 && nvm use 16' or similar for your nvm setup.","cause":"Running vue-docgen-cli on a Node.js version older than 16.3.","error":"Error: Minimum Node.js version 16.3 is required. You are using Node.js X.Y.Z."},{"fix":"Update vue-docgen-cli to version 4.79.1 or newer, which includes a fix for this parsing issue.","cause":"A bug in vue-docgen-api prevented correct parsing of Type alias references within macro functions.","error":"Failed to parse the Props passed to Macro function as Type alias reference"},{"fix":"Update vue-docgen-api to version 4.79.2 or newer, which contains a fix for interface extension parsing.","cause":"A bug related to parsing interface extensions in Vue components.","error":"TypeError: Cannot read properties of undefined (reading 'extension')"},{"fix":"Verify that your `componentsRoot` and `components` glob pattern in `docgen.config.js` (or command-line arguments) accurately reflect the location and naming convention of your Vue components. Ensure the paths are correct relative to your project root.","cause":"The glob pattern provided to vue-docgen-cli did not match any existing component files, or the `componentsRoot` was misconfigured.","error":"Error: No component files found for glob: src/components/**/*.vue"}],"ecosystem":"npm"}