Vue script setup docs

A simple way to parse a .vue file's props and events into a JSON structured file. The parser will go through all .vue files in a given directory and output the results to another directory.

This project is still a work-in-progress and might not work for your vue project. I have listed some prerequisites at the bottom of this page that might help you if the parser doesn't work as expected.

Features

• [x] Parsing props with comments.
• [x] Parsing events with comments.
• [x] Parsing slots with comments (comming soon)

Basic usage

1. Create a js file that can execute the function

vueDocsGenerator.js

import generate from "vue-script-setup-docs";

// The first argument is the directory where the .vue files are located.
// The second argument is where the .json files should be saved.
generate("/example", "/component-docs");

Optional: You can watch for changes in the specified directory

// Optional:
// will update the .json files whenever a .vue file is saved.
generate("/example", "/component-docs", { watch: true});

2. Execute the function

From the terminal-window

node vueDocsGenerator.js

OR Add it to your dev/serve script. This option will require som additional packages like npm-run-all to run multiple scripts.

package.json using npm-run-all package.

...
"scripts": {
    // For vite projects
    "dev": "vite && node vueDocsGenerator.js",
    // For vue cli
    "serve": "vue-cli-service serve && node vueDocsGenerator.js",
}
...

Prerequisites

Use prettier or similar code-formatter to format your code. The parser is written to read the files line-by-line and might not work if the .vue files isn't fromatted in a standarized structure.

disclaimer This project is 100% open source, and you are free to use and/or modify the code to your needs without crediting me. I have not written it with the intention of a wide usage - however I like the idea that it might be usefull for someone looking for a way to document their vue components.

This project will be available on git-hub at a later stage.