{"id":15268,"library":"vue-docgen-loader","title":"Vue Component Documentation Webpack Loader","description":"vue-docgen-loader is a Webpack loader designed to parse Vue component files, including single-file components (.vue) and standard JavaScript/TypeScript files exporting Vue components. It leverages vue-docgen-api to extract detailed documentation metadata (props, events, methods, slots, etc.) and injects this information directly into the compiled component's module export. This enables various development tools, such as automatically generated style guides (e.g., Vue Styleguidist), component explorers, or dynamic property editors, to access component specifications at runtime. The current stable version is 2.0.1. While there isn't a strict release cadence, updates appear to be made as needed, often for dependency bumps or feature enhancements. Its primary differentiation lies in seamlessly integrating documentation generation into the Webpack build pipeline, making component documentation an intrinsic part of the application bundle.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/pocka/vue-docgen-loader","tags":["javascript","vue","docgen","webpack","loader"],"install":[{"cmd":"npm install vue-docgen-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-docgen-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-docgen-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for parsing Vue component documentation. Required for all functionality.","package":"vue-docgen-api","optional":false},{"reason":"Webpack is the build tool this loader integrates with. Required for all functionality.","package":"webpack","optional":false}],"imports":[{"note":"Webpack loaders are referenced by their package name string within the webpack configuration rules, not as an importable module itself.","wrong":"import { loader } from 'vue-docgen-loader'","symbol":"vue-docgen-loader (in webpack config)","correct":"loader: 'vue-docgen-loader'"},{"note":"The documentation object is injected as a property onto the component's default export (typically `__docgenInfo` by default), not as a named export. It is accessible on the component's options object or `this` inside the component instance.","wrong":"import { __docgenInfo } from './MyComponent.vue'","symbol":"Component with injected docgen info","correct":"import MyComponent from './MyComponent.vue'; console.log(MyComponent.__docgenInfo);"},{"note":"The `VueLoaderPlugin` is essential for processing Vue Single File Components. Modern webpack configurations often use CommonJS `require` for plugins, though ESM `import` is also supported if your webpack config is set up for it. Avoid deprecated paths.","wrong":"import VueLoaderPlugin from 'vue-loader/lib/plugin';","symbol":"VueLoaderPlugin (for .vue files)","correct":"const { VueLoaderPlugin } = require('vue-loader');"}],"quickstart":{"code":"const path = require('path');\nconst { VueLoaderPlugin } = require('vue-loader');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/main.js', // Assuming a main entry point for a Vue app\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        // Apply vue-docgen-loader to Vue Single File Components.\n        // 'enforce: \"post\"' ensures it runs after vue-loader, which is\n        // crucial for correctly parsing the Vue component's script.\n        test: /\\.vue$/,\n        loader: 'vue-docgen-loader',\n        options: {\n          // Customize the property name where documentation will be injected.\n          // Default is '__docgenInfo'.\n          injectAt: '__docgenInfo'\n        },\n        enforce: 'post'\n      }\n    ]\n  },\n  plugins: [\n    new VueLoaderPlugin(),\n    new HtmlWebpackPlugin({\n      template: './public/index.html',\n      filename: 'index.html'\n    })\n  ],\n  resolve: {\n    alias: {\n      'vue$': 'vue/dist/vue.esm.js'\n    }\n  },\n  devServer: {\n    static: {\n      directory: path.join(__dirname, 'dist')\n    },\n    compress: true,\n    port: 8080,\n    open: true\n  }\n};","lang":"javascript","description":"Configures Webpack to use `vue-docgen-loader` for Vue Single File Components, ensuring documentation metadata is injected into component exports at `__docgenInfo` for runtime access. It demonstrates `enforce: 'post'` for correct loader ordering and basic setup with `vue-loader` and `HtmlWebpackPlugin` for a runnable development server."},"warnings":[{"fix":"Ensure your webpack rule for `vue-docgen-loader` includes `enforce: 'post'` to guarantee correct execution order after other loaders like `vue-loader`.","message":"Loader ordering is critical: `vue-docgen-loader` *must* run after `vue-loader` for Single File Components. Incorrect order will lead to parsing failures or missing documentation.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"For non-SFC files, use a distinct `resourceQuery` like `?component` (e.g., `import MyButton from './my-button.js?component'`) and configure the loader rule to match only that specific query (e.g., `resourceQuery: /component/`).","message":"When applying `vue-docgen-loader` to non-SFC JavaScript files (e.g., `my-button.js` exporting a Vue component), do not use the `?vue` resource query. This query is silently injected by `vue-loader` and will break the module's processing by `vue-docgen-loader`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade your `vue-docgen-api` peer dependency to `^4.0.0` or higher to enable comprehensive non-SFC file parsing capabilities.","message":"Support for parsing non-SFC JavaScript files (e.g., `.js` or `.ts` files exporting Vue components) through `vue-docgen-loader` requires `vue-docgen-api` version 4.0.0 or higher.","severity":"gotcha","affected_versions":">=1.0.0 (behavior varies based on peer dependency)"},{"fix":"Install `vue-docgen-api` (e.g., `npm install vue-docgen-api`) and ensure `webpack` is installed in your project (e.g., `npm install webpack`). Consult your `package.json` and the loader's requirements for specific version ranges.","message":"Missing peer dependencies `vue-docgen-api` or `webpack` will cause Webpack compilation errors or runtime failures for the loader.","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":"Ensure `vue-loader` is correctly configured in your `webpack.config.js` rules array for `.vue` files and that `VueLoaderPlugin` is added to your plugins. The `vue-docgen-loader` rule should typically follow it with `enforce: 'post'`.","cause":"`vue-loader` is either missing or configured incorrectly, preventing `.vue` files from being transformed into valid JavaScript before `vue-docgen-loader` attempts to process them.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/configuration/module/#module-rules"},{"fix":"Run `npm install --save-dev vue-docgen-loader vue-docgen-api` (or `yarn add -D vue-docgen-loader vue-docgen-api`) to ensure both the loader and its core parsing dependency are installed and available to Webpack.","cause":"`vue-docgen-loader` is not installed as a dependency in your project or Webpack cannot resolve its path.","error":"Error: Cannot find module 'vue-docgen-loader' from '...' (or similar loader resolution error like 'Module not found: Error: Can't resolve 'vue-docgen-loader'')'"},{"fix":"Verify that `vue-docgen-loader` is correctly applied in your `webpack.config.js` with `enforce: 'post'`, that `vue-docgen-api` is installed, and that the `injectAt` option matches the property name you are trying to access on the component instance (e.g., `this.__docgenInfo`).","cause":"`vue-docgen-loader` either failed to execute, or its configuration (e.g., `injectAt` option) differs from where you are attempting to access the documentation object within your Vue component.","error":"TypeError: this.__docgenInfo is undefined (or similar runtime error accessing injected property)"}],"ecosystem":"npm"}