How to use this developer tool
- Enter a component name on the first line.
- Choose script setup or Options API.
- Set ts or js as the script language.
- Copy the generated SFC into your project.
#202 · Vue Developer Tool
Vue Generator
Generate a practical Vue component using script setup or Options API, with naming normalization, props, emits, styles, and optional test guidance.
Developer Input
Framework sourceAd space
What this developer tool does
Creates a complete Vue SFC with normalized PascalCase and kebab-case names, a prop, an emit, accessible markup, and scoped styling.
Normalize name → select API syntax → generate template/script/style → validate output
Generated code is intentionally dependency-free and should be adapted to the project domain.
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 generate a Vue 3 component with script setup?
Choose Script Setup, enter the component name, and generate a complete Vue SFC.
Can I generate a Vue component with TypeScript?
Enter ts as the script language to receive a lang="ts" script block and typed declarations.
How do I generate a Vue Options API component?
Choose Options API before generating the component.
Does the generator create scoped CSS?
Enable scoped styles to add the scoped attribute to the style block.
Can I download the generated Vue component?
Yes. Use the download button to save the output with a Vue file extension.
Related developer tools
Analysis modules
| Module | Purpose |
|---|---|
| Naming | PascalCase and file-safe CSS class |
| API | Script Setup or Options API |
| Output | Single .vue component |