Automated Extraction of Vue Component Information for Documentation

The article discusses the challenges of maintaining component documentation in large Vue projects and proposes an automated solution.

Current situation : In multi‑developer Vue projects, many shared components accumulate. Developers often do not know the purpose or usage of existing components, leading to duplicated effort and the need to read source code. Manual documentation is low‑efficiency, error‑prone, and not synchronized with component changes.

Ideal documentation approach should require little work, be accurate, and update automatically when components evolve.

Community solutions : Vue‑Press can generate static docs, and some third‑party libraries can extract component metadata, but they miss important details such as v‑model handling, sync modifiers, and method parameter information.

Technical solution presented by the author’s team includes a custom tool that parses Vue single‑file components (SFC) and generates documentation automatically.

3.1 Vue file parsing

The Vue official vue-template-compiler library provides a parseComponent method to split a .vue file into its template and script parts.

import { parseComponent } from 'Vue-template-compiler'
const result = parseComponent(VueFileContent, [options])

The result conforms to the following TypeScript interface:

export interface SFCDescriptor {
  template: SFCBlock | undefined;
  script: SFCBlock | undefined;
  styles: SFCBlock[];
  customBlocks: SFCBlock[];
}

The script section is then parsed with Babel to obtain a JavaScript AST.

import { parse } from '@babel/parser';
const jsAst = parse(script, [options]);

The template section is compiled into an AST using the same compiler library:

import { compile } from 'Vue-template-compiler';
const templateAst = compile(template, [options]);

The compiled result has the shape:

export interface CompiledResult {
  ast: ASTElement,
  render: string,
  staticRenderFns: Array
,
  errors: Array
}

3.2 Information extraction

Two categories of information are considered:

Directly extractable data such as props , methods , events , and slots .

Data that requires developer‑defined annotations, e.g., component description, detailed prop explanations.

For direct extraction, Babel’s @babel/traverse is used to walk the JavaScript AST.

import traverse from '@babel/traverse'

traverse(jsAst, options);

Example: locating $emit calls to capture event names.

this.$emit('event', arg);

traverse(jsAst, {
  MemberExpression(Node) {
    // Identify $emit calls
    if (Node.node.property.name === '$emit') {
      // First argument is the event name
      const eventName = Node.parent.arguments[0];
    }
  }
});

Using the extracted events together with props , the tool can infer whether a component supports v‑model (presence of a value prop and an input event) and whether a prop supports .sync (an update:propName event).

Slot information is obtained from the template AST by locating nodes named slots and reading their name attributes.

3.2.2 Required annotations

Because automatically extracted data is limited, developers are encouraged to add comments that describe component purpose, prop details, method signatures, etc. These comments are captured from the AST:

// header comment
export default {} // tail comment

The parsed node looks like:

const exportNode = {
  type: "ExportDefaultDeclaration",
  leadingComments: [{
    type: 'CommentLine',
    value: '头部注释'
  }],
  trailingComments: [{
    type: 'CommentLine',
    value: '尾部注释'
  }]
}

Both line comments ( CommentLine ) and block comments ( CommentBlock ) are supported:

/**
 * Block comment
 */
// Single line comment
export default {}

Resulting AST node:

const exportNode = {
  type: "ExportDefaultDeclaration",
  leadingComments: [
    { type: 'CommentBlock', value: '块级注释' },
    { type: 'CommentLine', value: '单行注释' }
  ]
}

Template comments are identified by the isComment flag:

被注释的节点

Parsed representation:

const templateAst = [
  { isComment: true, text: "template的注释", type: 3 },
  { tag: "slot", type: 1 }
];

Comments can also carry custom tags such as @public to mark public methods. By parsing JSDoc‑style annotations, the tool can include parameter types and descriptions in the generated documentation.

export default {
  methods: {
    /**
     * @public
     * @param {boolean} value 入参说明
     */
    show(value) {}
  }
}

4. Summary

Automating Vue component documentation reduces manual effort, improves accuracy, and enhances collaboration among front‑end developers. The workflow consists of:

Parsing the .vue file with vue-template-compiler to obtain template and script ASTs.

Using Babel to generate a JavaScript AST and traversing it to extract props, methods, events, and slots.

Collecting developer comments from both script and template ASTs to enrich the documentation.

Outputting the gathered information in Markdown or JSON format as needed.

The approach can be extended to extract test cases or example usages from component libraries in the future.