Vue Formatter
Format Vue single-file components — template, script and style. It runs entirely on your device — nothing is uploaded.
Example
Format Vue single-file components — template, script and style.
How it works
Prettier's Vue parser formats the <template>, <script> and <style> blocks of your .vue file together.
Good to know
Vue Formatter takes a Vue single-file component (a .vue file) and rewrites it with consistent indentation, spacing, and line breaks across all three of its blocks — the <template> markup, the <script> (or <script setup>) logic, and the <style> CSS — in one pass. It uses the same Prettier engine and HTML/Vue parser that many teams run in their editors, so the output matches the de facto community standard rather than an arbitrary house style. It is aimed at Vue developers, code reviewers, and anyone pasting a component snippet who wants it cleaned up without installing anything.
Reach for it when you have inherited an inconsistently indented component, when you are pasting code into documentation, a blog post, or a chat message and want it readable, or when your local toolchain is not set up yet (a fresh machine, a quick sandbox, or a Vue 2 project without Prettier configured). Because it runs entirely in your browser and uploads nothing, it is also a reasonable choice for proprietary code you cannot paste into an online service that stores data on a server.
The result is the same component, semantically unchanged, with normalized whitespace: attributes wrapped onto multiple lines when a tag gets long, consistent quote style, and tidy nesting inside the template. Treat formatting differences as cosmetic — if the formatted output behaves differently from your original, that points to a pre-existing bug rather than something the formatter introduced. If the tool reports a parse error instead of formatting, that almost always means there is a genuine syntax problem in the SFC, such as an unclosed tag or a stray brace.
A few practical notes:
- It expects a complete SFC structure; a bare template fragment or a loose snippet of JavaScript without the surrounding
<script> tags may not format the way you expect — use a dedicated HTML or JavaScript formatter for those. - The output reflects Prettier's defaults, so it may not match a project's custom
.prettierrc (print width, single vs double quotes, semicolons); run your project's own config for an exact match before committing. - For TypeScript-heavy components, the script block is parsed as JS/TS by Prettier, but it does no type checking — it only reformats, so it will happily pretty-print code that does not compile.
Frequently asked questions
Is my data uploaded anywhere?
No — everything runs in your browser. Your code never leaves your device, so it's safe for private work and runs offline once loaded.
Is this tool free?
Yes, completely free with no sign-up and no limits.
People also ask
What is a Vue single-file component?
A Vue single-file component (SFC) is a .vue file that combines a component's markup, logic, and styling in one file using three blocks: <template>, <script>, and <style>. Build tools like Vite compile these files into standard JavaScript for the browser.
Does formatting a Vue component change how it behaves?
No. Formatting only adjusts whitespace, indentation, line breaks, and quote style; it does not alter the meaning of your code. If output behaves differently, that usually indicates a pre-existing issue rather than something the formatter changed.
Can this format Vue 2 components and the Options API?
Yes. Prettier's Vue parser handles both the Options API and the Composition API, including <script setup>, and works with Vue 2 and Vue 3 single-file components. It formats the structure regardless of which API style the component uses.
Will it match my project's Prettier or ESLint settings?
It applies Prettier's default options, so things like print width, semicolons, and quote style may differ from a project's custom .prettierrc or ESLint rules. Run your own configured tooling locally if you need output that matches your repository exactly.
Why does the formatter show a parse error on my component?
A parse error means the SFC has a syntax problem the parser cannot read, such as an unclosed tag, a missing brace, or invalid template expression. Fix the reported syntax issue and format again.
Does it format the CSS and SCSS inside the style block?
It formats the contents of the <style> block as part of the component. Standard CSS is handled directly; for preprocessor syntax like SCSS the results depend on the parser, so verify the output if you rely on preprocessor-specific features.
Is it safe to paste private or proprietary Vue code here?
The tool runs entirely in your browser and does not upload your code to any server, so the component stays on your device. As with any web tool, you remain responsible for following your organization's policies on handling proprietary code.
What's the difference between a formatter and a linter for Vue?
A formatter only restructures whitespace and style to make code consistent, while a linter analyzes code for potential errors, bad patterns, or rule violations. Many teams use both: a formatter for layout and a linter for code quality.
Related tools