Registry / devops / vite-plugin-vue-docgen

vite-plugin-vue-docgen

library0.3.4jsnpmunverified

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.

devops web-framework

npm install vite-plugin-vue-docgen

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-DO

vite-plugin-vue-docgen

devopsjavascriptv0.3.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import vueDocgenPlugin from 'vite-plugin-vue-docgen'

✗ const vueDocgenPlugin = require('vite-plugin-vue-docgen')

ES module only; CommonJS require not supported.

VueDocgenPlugin

✓ import { VueDocgenPlugin } from 'vite-plugin-vue-docgen'

✗ import VueDocgenPlugin from 'vite-plugin-vue-docgen'

Named export available since v0.2.0, but default import is more common.

__docgenInfo

✓ import Button from './Button.vue'; const { props } = Button.__docgenInfo

✗ Button.__docgenInfo.props

Access token as property on the imported Vue component after plugin injection.

Vite config setup with vue plugin and docgen plugin, then accessing __docgenInfo on a Vue SFC component.

// vite.config.ts import vue from '@vitejs/plugin-vue'; import vueDocgen from 'vite-plugin-vue-docgen'; export default { plugins: [ vue(), vueDocgen({ include: /\.vue$/, exclude: /\.story\.vue$/, injectAt: '__docgenInfo', docgenOptions: { jsx: true } }) ] }; // Any .vue file <template> <button>{{ label }}</button> </template> <script setup lang="ts"> defineProps<{ label: string }>() </script> // Usage in another file import MyButton from './MyButton.vue'; const { props } = MyButton.__docgenInfo; console.log(props); // { label: { type: 'string', required: true, description: '' } }

Debug

Known issues

gotchaPlugin must be registered after the Vue plugin in Vite config.

fix

Ensure order: vue() then vueDocgen() in plugins array.

affects: >=0.1.0

deprecatedImport path changing: prior to v0.3.0 default export was named 'docgenPlugin'.

fix

Use default import: import vueDocgenPlugin from 'vite-plugin-vue-docgen'

affects: <0.3.0

gotchaTypeScript types may not be correctly resolved if module resolution is not set to 'node' or 'bundler'.

fix

Add 'moduleResolution': 'node' in tsconfig.json or use Vite's default.

affects: >=0.2.0

breakingVite peer dependency changed from ^2.0 to >2.0? Actually still >2.0, but future versions may drop Vite 2 support.

fix

Use Vite 3+ if possible.

affects: >=0.3.0

gotchadocgenOptions passed directly to vue-docgen-api - some options may be incompatible with Vite's build mode.

fix

Test in both dev and build modes, especially when using jsx:true and custom resolvers.

affects: >=0.2.0

gotchaWhen using script setup, some docgen info may be missing due to limited static analysis.

fix

Use explicit defineExpose or defineOptions if needed; consider using 'vue-docgen-cli' for more comprehensive output.

affects: >=0.3.0

Errors

Common errors & fixes

Error: 'vueDocgenPlugin is not a function'

Importing the plugin incorrectly or using an outdated import path (e.g., require vs import).

fix

Use ESM import: import vueDocgenPlugin from 'vite-plugin-vue-docgen'

Error: Cannot find module 'vite-plugin-vue-docgen'

Package not installed or node_modules missing.

fix

Install via npm: npm install vite-plugin-vue-docgen --save-dev

TypeError: Cannot read properties of undefined (reading 'props')

Accessing __docgenInfo on a component that hasn't been processed by the plugin (e.g., dynamic import or out of scope).

fix

Ensure the component is imported statically and the plugin is correctly configured in vite.config

Property '__docgenInfo' does not exist on type 'typeof import ...'

TypeScript doesn't know about the injected property. No type augmentation.

fix

Add a declaration file: declare module '*.vue' { const component: any; export default component; } or use vue-docgen-api types.

Upgrade

Version history

0.3.4latest on npm

Audit

Dependencies

viterequiredpeer dependency - plugin requires Vite >2.0 to function

vue-docgen-apirequiredruntime dependency that generates the docgen metadata

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/andrewcourtice/vite-plugin-vue-docgen ↗

packagehttps://www.npmjs.com/package/vite-plugin-vue-docgen ↗