How to use this developer tool
- Paste a Vue component.
- Choose a parse depth.
- Run the parser.
- Copy or download the resulting JSON metadata.
#205 · Vue Developer Tool
Vue Parser
Parse a Vue single-file component into structured JSON containing API style, dependencies, state, computed values, CSS classes, and block statistics.
Developer Input
Framework sourceAd space
What this developer tool does
Extracts static component metadata from template, script, and style blocks into a machine-readable report.
Extract SFC blocks → match declarations → deduplicate metadata → serialize JSON
Dynamic imports and runtime-generated component metadata may not be visible to static analysis.
Example
Use the preloaded sample, run the tool, then inspect the output and status before copying it into a project.
Tips for better output
- Use complete framework code when possible.
- Select the matching framework version.
- Review heuristic findings before changing production code.
- Run the project compiler and tests after using generated or transformed output.
FAQ
How do I parse a Vue single file component online?
Paste a Vue SFC and run the parser to generate structured JSON metadata.
Can I extract Vue imports and dependencies?
Yes. Module specifiers from import statements are included in the dependencies array.
How do I extract refs and computed values from Vue code?
The parser recognizes common ref and computed declarations in the script block.
Can I download Vue component metadata as JSON?
Yes. Use the download button after parsing.
Does the parser execute Vue code?
No. It performs static text analysis locally in the browser.
Related developer tools
Analysis modules
| Module | Purpose |
|---|---|
| Output | Structured JSON |
| Metadata | State, computed, and dependencies |
| Stats | Block line counts |