Format a Vue single-file component: template, script and style together.
Loading the tool...
How to use Vue Formatter
Paste your code. The formatter engine loads in a moment the first time.
Adjust the options if you need to.
Copy the formatted result.
About Vue Formatter
A Vue single-file component mixes three languages in one file. This formatter handles all three: the template with its directives (v-if, v-for, @click), the script block in JavaScript or TypeScript, and the style block in CSS.
Paste the whole .vue file or just one block.
Frequently asked questions
Does it support the Composition API and script setup?
Yes, script blocks are formatted as normal JavaScript or TypeScript.
Does it work with Vue 2 and Vue 3?
Yes, the template syntax of both is supported.
What about scoped styles and SCSS?
Style blocks are formatted according to their lang attribute.
Why did the first run take a second?
The formatting engine for this language is downloaded the first time you use it, then cached by your browser. After that, formatting is instant and nothing leaves your machine.