Vue Formatter

About Vue Formatter

Format and beautify your Vue.js Single-File Components with this free online tool. Make your Vue code easy to read with proper indentation and syntax highlighting.

Format the template, script, and style sections of a Vue single-file component as one coherent document.

Key features

• Formatting purpose Format the template, script, and style sections of a Vue single-file component as one coherent document.
• Supported source Paste a .vue component with supported template syntax, script or script setup, and optional scoped styles.
• Style controls Configure indentation and wrapping; embedded languages are parsed according to their section and attributes.
• Formatted result The result aligns component blocks, directives, bindings, JavaScript or TypeScript, and CSS for easier review.

How to use Vue Formatter

Follow this workflow to work with Vue single-file components safely and accurately.

1. Paste or enter the source Paste a .vue component with supported template syntax, script or script setup, and optional scoped styles.
2. Choose formatting rules Configure indentation and wrapping; embedded languages are parsed according to their section and attributes.
3. Format the source Run the formatter after the source parses successfully. It will apply presentation rules without intentionally changing the parsed structure.
4. Review and copy The result aligns component blocks, directives, bindings, JavaScript or TypeScript, and CSS for easier review.

Usage tips

• Preserve the correct lang attributes for TypeScript, SCSS, Pug, or other preprocessors.
• Review whitespace-sensitive template text and custom-block content after formatting.
• Run Vue compiler checks, ESLint, and component tests before committing broad changes.

Frequently asked questions