Vite Vue Docgen Plugin

0.3.4 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: 'vueDocgenPlugin is not a function' ↓

cause 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 Error: Cannot find module 'vite-plugin-vue-docgen' ↓

cause Package not installed or node_modules missing.

fix

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

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

cause 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

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

cause 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.

Warnings

gotcha Plugin must be registered after the Vue plugin in Vite config. ↓

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

deprecated Import path changing: prior to v0.3.0 default export was named 'docgenPlugin'. ↓

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

gotcha TypeScript 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.

breaking Vite 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.

gotcha docgenOptions 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.

gotcha When 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.

Install

npm install vite-plugin-vue-docgen

yarn add vite-plugin-vue-docgen

pnpm add vite-plugin-vue-docgen

Imports

default

wrong

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

correct

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

ES module only; CommonJS require not supported.

VueDocgenPlugin

wrong

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

correct

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

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

__docgenInfo

wrong

Button.__docgenInfo.props

correct

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

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

Quickstart

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: '' } }