{"id":27524,"library":"vite-plugin-vue-docgen","title":"Vite Vue Docgen Plugin","description":"Vite plugin that wraps the Vue Docgen API to generate metadata (props, events, slots, methods, etc.) from Vue single-file components (SFC). Current stable version is 0.3.4. It injects docgen information as a property on the component at build time. Simple configuration with include/exclude patterns and custom property name. Requires Vite >2.0. Provides TypeScript types. Lightweight alternative to vue-styleguidist's webpack plugin for Vite users.","status":"active","version":"0.3.4","language":"javascript","source_language":"en","source_url":"https://github.com/andrewcourtice/vite-plugin-vue-docgen","tags":["javascript","vite","plugin","vue-docgen","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-docgen","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-docgen","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-docgen","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - plugin requires Vite >2.0 to function","package":"vite","optional":false},{"reason":"runtime dependency that generates the docgen metadata","package":"vue-docgen-api","optional":false}],"imports":[{"note":"ES module only; CommonJS require not supported.","wrong":"const vueDocgenPlugin = require('vite-plugin-vue-docgen')","symbol":"default","correct":"import vueDocgenPlugin from 'vite-plugin-vue-docgen'"},{"note":"Named export available since v0.2.0, but default import is more common.","wrong":"import VueDocgenPlugin from 'vite-plugin-vue-docgen'","symbol":"VueDocgenPlugin","correct":"import { VueDocgenPlugin } from 'vite-plugin-vue-docgen'"},{"note":"Access token as property on the imported Vue component after plugin injection.","wrong":"Button.__docgenInfo.props","symbol":"__docgenInfo","correct":"import Button from './Button.vue'; const { props } = Button.__docgenInfo"}],"quickstart":{"code":"// vite.config.ts\nimport vue from '@vitejs/plugin-vue';\nimport vueDocgen from 'vite-plugin-vue-docgen';\n\nexport default {\n  plugins: [\n    vue(),\n    vueDocgen({\n      include: /\\.vue$/,\n      exclude: /\\.story\\.vue$/,\n      injectAt: '__docgenInfo',\n      docgenOptions: { jsx: true }\n    })\n  ]\n};\n\n// Any .vue file\n<template>\n  <button>{{ label }}</button>\n</template>\n<script setup lang=\"ts\">\ndefineProps<{ label: string }>()\n</script>\n\n// Usage in another file\nimport MyButton from './MyButton.vue';\nconst { props } = MyButton.__docgenInfo;\nconsole.log(props); // { label: { type: 'string', required: true, description: '' } }","lang":"typescript","description":"Vite config setup with vue plugin and docgen plugin, then accessing __docgenInfo on a Vue SFC component."},"warnings":[{"fix":"Ensure order: vue() then vueDocgen() in plugins array.","message":"Plugin must be registered after the Vue plugin in Vite config.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use default import: import vueDocgenPlugin from 'vite-plugin-vue-docgen'","message":"Import path changing: prior to v0.3.0 default export was named 'docgenPlugin'.","severity":"deprecated","affected_versions":"<0.3.0"},{"fix":"Add 'moduleResolution': 'node' in tsconfig.json or use Vite's default.","message":"TypeScript types may not be correctly resolved if module resolution is not set to 'node' or 'bundler'.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use Vite 3+ if possible.","message":"Vite peer dependency changed from ^2.0 to >2.0? Actually still >2.0, but future versions may drop Vite 2 support.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Test in both dev and build modes, especially when using jsx:true and custom resolvers.","message":"docgenOptions passed directly to vue-docgen-api - some options may be incompatible with Vite's build mode.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use explicit defineExpose or defineOptions if needed; consider using 'vue-docgen-cli' for more comprehensive output.","message":"When using script setup, some docgen info may be missing due to limited static analysis.","severity":"gotcha","affected_versions":">=0.3.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use ESM import: import vueDocgenPlugin from 'vite-plugin-vue-docgen'","cause":"Importing the plugin incorrectly or using an outdated import path (e.g., require vs import).","error":"Error: 'vueDocgenPlugin is not a function'"},{"fix":"Install via npm: npm install vite-plugin-vue-docgen --save-dev","cause":"Package not installed or node_modules missing.","error":"Error: Cannot find module 'vite-plugin-vue-docgen'"},{"fix":"Ensure the component is imported statically and the plugin is correctly configured in vite.config","cause":"Accessing __docgenInfo on a component that hasn't been processed by the plugin (e.g., dynamic import or out of scope).","error":"TypeError: Cannot read properties of undefined (reading 'props')"},{"fix":"Add a declaration file: declare module '*.vue' { const component: any; export default component; } or use vue-docgen-api types.","cause":"TypeScript doesn't know about the injected property. No type augmentation.","error":"Property '__docgenInfo' does not exist on type 'typeof import ...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}