How to use this developer tool
- Paste a Vue SFC.
- Select the section or outline view.
- Toggle line numbers as needed.
- Copy the focused view.
#207 · Vue Developer Tool
Vue Viewer
View Vue code by full source, template, script, style, or outline with optional line numbers for fast navigation and inspection.
Developer Input
Framework sourceAd space
What this developer tool does
Separates SFC blocks and generates an outline while preserving original source for inspection.
Detect blocks → select view → build line map or outline → render output
This viewer does not execute Vue code or render a live component preview.
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 view only the template section of a Vue component?
Select Template from the view mode list.
Can I show line numbers in Vue code?
Enable Show line numbers before generating the view.
How do I create a Vue component outline?
Choose Outline to list detected template elements.
Does the viewer run the Vue component?
No. It provides a safe source and structure view only.
Can I download a selected Vue section?
Yes. The current output can be downloaded as a text file.
Related developer tools
Analysis modules
| Module | Purpose |
|---|---|
| Views | Full, block, and outline |
| Navigation | Optional line numbering |
| Safety | Source remains local |