How are SFC blocks ( , , ) preserved?

The formatter detects each top-level block by tag name, runs a block-appropriate indenter on its body (HTML-style for , brace-aware for , declaration-style for ), and re-emits the block with its original opening tag attributes intact (lang="ts", scoped, setup, src, etc.). Block order is preserved exactly — if your file has before , that order survives.

Will this break my TypeScript types?

No. The formatter is whitespace-only inside the script body — it does not parse types or rewrite generic syntax. defineProps (), defineEmits (), and complex type annotations survive intact. The Vue compiler will read the formatted source and emit identical runtime JavaScript.

Vue.js Formatter Online — Format Vue SFC

Beautify Vue Single File Components — preserve <template>, <script>, and <style> blocks with consistent indentation. Vue 2, Vue 3, and Composition API supported — 100% in your browser.

Vue SFC Input

Formatted Vue

What is a Vue.js Formatter?

A Vue.js formatter beautifies a Vue Single File Component (.vue) by detecting the top-level <template>, <script>, and <style> blocks and indenting each with rules appropriate to its content type. Templates use HTML-style tag indentation, scripts use brace-aware indentation, and styles use declaration-per-line CSS conventions. The block order, opening-tag attributes (setup, scoped, lang), and inline content all stay intact.

The OpenFormatter Vue tool runs entirely in your browser — no Prettier install, no Node.js, no upload. Paste a Vue 2 Options API component, a Vue 3 Composition API <script setup> file, or a TypeScript-typed SFC and the formatter handles it.

How to format Vue SFC — 4 steps

Paste your Vue SFC. Drop a .vue file body — template, script (or script setup), and style blocks — into the Input panel. Click Load Sample to try a Composition API demo.
Click Format. Each block is parsed by tag, indented with the correct rules, and re-emitted in original order.
Review the output. Confirm the template tree is indented, script statements sit one per line, and style declarations have one rule per line.
Copy the result. Click Copy to paste the formatted SFC back into your editor, a code review, or a documentation snippet.

Side-by-side: compact input vs formatted output

Compact Vue SFC

<template><div><h1>{{ title }}</h1><button @click="save">Save</button></div></template><script setup>const title='Hello';function save(){console.log('saved');}</script>

Formatted Vue SFC

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="save">Save</button>
  </div>
</template>

<script setup>
  const title = 'Hello';
  function save() {
    console.log('saved');
  }
</script>

SFC-Aware

Detects template, script, script setup, and style blocks and routes each through a block-appropriate indenter — no global brace logic on your CSS.

Vue 2 + Vue 3

SFC syntax is identical between Vue 2 Options API and Vue 3 Composition API. Both format correctly without configuration.

Browser-Only

Vue components run through JavaScript on your machine. Component logic, env references, and route definitions never leave the device.

Common use cases

check_circleFormat a Vue SFC copied from a Stack Overflow answer or GitHub gist
check_circleBeautify a one-line minified Vue component pasted from a build artifact
check_circleReformat an Element Plus, Vuetify, or Naive UI component template
check_circleClean up an auto-generated SFC from a Vue scaffolding tool
check_circleFormat a Nuxt 3 page or layout file before committing to a repo
check_circleIndent a Vue component for a code-review screenshot or blog post
check_circleBeautify a Vue SFC before pasting into a Histoire or Storybook story
check_circleReformat a third-party Vue component you want to fork or audit

Vue formatter vs Prettier vs ESLint Vue plugin

A pretty printer is the lightweight option — it preserves your token order and only adjusts whitespace. Prettier with the built-in Vue parser is the canonical project-wide formatter — it parses each block with the right grammar (vue-eslint-parser, babel/typescript, postcss) and re-prints. eslint-plugin-vue is a different tool entirely — it lints templates and scripts against Vue style rules (vue/no-unused-vars, vue/require-default-prop, vue/multi-word-component-names) and can autofix many. Use this online tool for a one-off readability pass; use Prettier for project-wide enforcement; use ESLint Vue for correctness.

More than Vue formatting

Format Angular, beautify TypeScript, or pretty-print JavaScript — all browser-side, all free.

Angular Formatter TypeScript Formatter HTML Formatter

Frequently Asked Questions

Why use this Vue formatter instead of Prettier?

Prettier with the Vue parser is the canonical project-wide formatter — it parses each SFC block with the right grammar (vue-eslint-parser for templates, babel/typescript for script, postcss for style) and re-prints. Use this online tool when you need a one-off reformat without installing anything: paste a .vue file, click Format, copy the result. For a configured project, Prettier remains the better choice because it enforces consistency across hundreds of files.

How are SFC blocks (<template>, <script>, <style>) preserved?

The formatter detects each top-level block by tag name, runs a block-appropriate indenter on its body (HTML-style for <template>, brace-aware for <script>, declaration-style for <style>), and re-emits the block with its original opening tag attributes intact (lang="ts", scoped, setup, src, etc.). Block order is preserved exactly — if your file has <script> before <template>, that order survives.

Does it support <script setup> syntax?

Yes. The <script setup> block uses the same indentation logic as a regular <script> block — the SFC compiler treats setup as an ordinary script with implicit imports and exposed top-level bindings, so the source itself is plain JavaScript or TypeScript. Composition API helpers (ref, computed, watchEffect, defineProps, defineEmits) format normally.

How does it handle Vue directives like v-for and v-if?

Directives are ordinary HTML attributes from a parser perspective — v-for="item in items", v-if="user.active", v-bind:class="cls" (or :class), v-on:click="handler" (or @click), v-model="x", and v-slot are all preserved verbatim. The formatter never modifies attribute values or syntax sugar; it only adjusts whitespace between elements.

Will it format Vue 2 and Vue 3 components the same way?

Yes. The SFC structure (<template>, <script>, <style>) is identical between Vue 2 and Vue 3 — the formatter does not interpret the framework version. Vue 3 features like <script setup>, <Suspense>, <Teleport>, and Fragments (multiple root elements in <template>) all format correctly because they only differ in semantics, not syntax.

Does it handle <style scoped> and CSS preprocessors?

Yes for plain CSS. The <style> block is reformatted with one declaration per line and standard brace placement. For <style lang="scss"> or lang="less" the formatter applies CSS-style rules — nested selectors, at-rules, and variables are kept as-is but rebraced and reindented. For complex Sass/Less nesting, run the dedicated CSS preprocessor formatter instead.

Is the Vue code I paste sent to your servers?

No. Formatting runs entirely in your browser using JavaScript. SFC files containing API endpoints, environment variables embedded in import.meta.env references, or proprietary component logic never leave the device. Open DevTools → Network to verify no requests are made when you click Format.

Will this break my <script setup lang="ts"> TypeScript types?

No. The formatter is whitespace-only inside the script body — it does not parse types or rewrite generic syntax. defineProps<{ name: string }>(), defineEmits<{ (e: "save", id: number): void }>(), and complex type annotations survive intact. The Vue compiler will read the formatted source and emit identical runtime JavaScript.