Vue Formatter

It formats the content of script and style blocks and places each top level block on its own line. The code inside each block is indented by two spaces under its opening tag.

The template block is kept on a single line, with runs of whitespace collapsed to single spaces. Directives such as v-if, v-for, :prop and @event and mustache expressions are copied exactly as written.

A plain script block is parsed and printed as JavaScript with two space indentation and semicolons. With lang="ts" it is formatted as TypeScript, which also accepts type annotations.

A style block is formatted as CSS by default, with one declaration per line. With lang="scss" or lang="less" it uses the SCSS or Less rules, and the scoped attribute is kept.

JavaScript and CSS blocks are parsed, so a syntax error stops the tool and its message is shown. Fix the reported problem and format again.

Yes, the setup attribute is kept on the tag and the content is formatted like any other script block. Compiler macros such as defineProps are ordinary function calls to the formatter.

No, the formatter always uses two spaces and has no options. The same component always produces the same output.

Yes, HTML comments between blocks and comments inside script and style blocks are kept. Comments inside the template stay in place on its single line.

Single file components are read as HTML, so the result is returned as a Markdown code block marked html. Copy the lines between the fences into your .vue file.

Up to 5 MB per run; larger input is rejected with a message. The output is identical to the Vue option of the Code Formatter.