Formatters
Vue Formatter
Single-file components formatted block by block — template, script setup, and style each by the right engine.
In short
Format Vue single-file components online: template, script and style blocks each formatted with the right parser by prettier's Vue support. Free.
By NaveenKumar T · Updated
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
Vue JS Formatter: input and output
A product-picker component: a `<script setup lang="ts">` block with a typed `defineProps` and a computed filter, a one-line template with `v-model`, `v-for` and an emitted event, and a minified scoped style block.
<script setup lang="ts">
import {ref,computed} from 'vue'
const props=defineProps<{items:{id:number;label:string;price:number}[]}>()
const query=ref("");const filtered=computed(()=>props.items.filter(i=>i.label.toLowerCase().includes(query.value.toLowerCase())))
</script>
<template><section class="picker"><input v-model.trim="query" placeholder='Search products' @keyup.enter="$emit('pick',filtered[0])"/><ul><li v-for="item in filtered" :key="item.id" :class="{cheap:item.price<10}" @click="$emit('pick',item)">{{item.label}} — {{item.price.toFixed(2)}}</li></ul></section></template>
<style scoped>.picker{display:grid;gap:8px}.cheap{color:green}</style><script setup lang="ts">
import { ref, computed } from "vue";
const props = defineProps<{
items: { id: number; label: string; price: number }[];
}>();
const query = ref("");
const filtered = computed(() =>
props.items.filter((i) =>
i.label.toLowerCase().includes(query.value.toLowerCase()),
),
);
</script>
<template>
<section class="picker">
<input
v-model.trim="query"
placeholder="Search products"
@keyup.enter="$emit('pick', filtered[0])"
/>
<ul>
<li
v-for="item in filtered"
:key="item.id"
:class="{ cheap: item.price < 10 }"
@click="$emit('pick', item)"
>
{{ item.label }} — {{ item.price.toFixed(2) }}
</li>
</ul>
</section>
</template>
<style scoped>
.picker {
display: grid;
gap: 8px;
}
.cheap {
color: green;
}
</style>
Script and style contents stay at column 0 (prettier's `vueIndentScriptAndStyle` default), while the `:class` object and the `@keyup.enter` handler are reprinted as JavaScript with normalized spacing and single quotes inside the double-quoted attribute.
Learn more
Formatting Vue, properly
A .vue file is three languages in one: an HTML-like template with directives (v-for, v-model, : and @ shorthands), a script block (often TypeScript with setup syntax), and styles (possibly SCSS). Prettier's Vue parser routes each block to its proper engine, so the whole SFC formats coherently in one pass.
Paste a whole component — exported from a playground, copied from a tutorial, or churned by a teammate's editor — and get back the canonical Vue style the ecosystem's tooling produces. Template directive expressions format as real code, not strings.
Help
Frequently asked questions
Everything you need to know about the Vue JS Formatter.
01How do I format Vue code here?
Paste a whole Vue single-file component (or load a file/URL) and press Format. Prettier's Vue parser routes the template, script and style blocks each to their own engine, so the entire SFC formats coherently in one pass.
02Does it handle <script setup> and TypeScript blocks?
Yes — script setup, lang="ts", multiple style blocks with scoped/module attributes: the SFC structure is parsed properly and each block is formatted by the engine its lang attribute calls for.
03Why aren't `<script>` and `<style>` contents indented, and are template expressions reformatted?
Prettier's `vueIndentScriptAndStyle` option is off by default, so code inside `<script setup>` and `<style>` starts at column 0 — the convention `create-vue` scaffolds and most Vue repositories commit. Template expressions are parsed as JavaScript: `:class="{cheap:item.price<10}"` becomes `{ cheap: item.price < 10 }`, `{{item.label}}` gains inner spaces, and string literals inside a double-quoted attribute switch to single quotes so nothing needs escaping. Directive names, modifiers like `v-model.trim`, and the `:`/`@` shorthands are preserved exactly.