Vue Single-File Component Formatter

One file, three languages

A Vue single-file component mixes three languages, and that is exactly why a generic HTML beautifier mangles it. Prettier’s Vue support splits the file into its blocks and formats each one properly:

• The <template> is printed with HTML rules, and the JavaScript inside it is formatted too: {{count===1?'click':'clicks'}} gains spaces, :class="{invalid:errors.email}" becomes :class="{ invalid: errors.email }", and elements with many attributes are broken one attribute per line.
• <script> and <script setup> are formatted as JavaScript, or as TypeScript when the tag says lang="ts", so defineProps<{ user?: User }>() and interfaces work.
• <style> blocks go through Prettier’s CSS printer, including lang="scss" and lang="less".

Blocks Prettier has no parser for are passed through untouched. That covers <template lang="pug"> and custom blocks such as <i18n> or <docs>. Script and style contents are not indented under their tags, which is Prettier’s default for Vue files.

Script options

The options are Prettier’s JavaScript settings, so they apply to the script block and to expressions in the template.

• Semicolons: on by default. Turn it off for the no-semicolon style common in Vue projects created with older templates.
• Single quotes: switches string literals in the script and inside {{ }} to single quotes. Attribute values in the template always keep their double quotes.
• Trailing commas: All adds a comma after the last item of multi-line arrays, objects, parameters and arguments; ES5 only in arrays and objects; None never.
• Spaces inside { }: writes { ref, computed } rather than {ref, computed}, in imports, object literals and template bindings.
• Arrow function parentheses: Always gives (item) => item.id, Avoid gives item => item.id when there is a single parameter.

Indent in the toolbar sets the indentation for all three blocks at once.

Where errors come from

The template parser is strict about structure. A closing tag that does not match what is open, such as </template> arriving while a <div> inside it is still open, produces an “Unexpected closing tag” error with its position. Some mistakes are quietly repaired instead, following browser rules: a <p> left open is closed for you when its parent’s </div> arrives.

Embedded code is more forgiving. If the script or style block has a syntax error, Prettier leaves that block exactly as written and formats the rest, so nothing is reported. If a block you expected to change comes out untouched, check it for a typo. The same applies to a broken expression in an interpolation.

Using the formatter

Input that starts with <template> and also contains a script or style block is detected as Vue on its own. Ctrl/Cmd+Enter formats on demand and Ctrl/Cmd+Shift+C copies the result. All parsing happens locally in the page, and nothing is sent anywhere while you work.

Lines wrap at 80 columns. A template holding nothing but one short element of plain text, such as <template><p>Loading</p></template>, may stay on a single line. That comes from Prettier’s whitespace rules for inline text and is not a sign that formatting failed; add an interpolation or a nested element and it expands as usual.

Examples

<template><div class="profile"><p v-if="user">{{user.name}} ({{user.email}})</p><p v-else>Guest</p><button @click="emit('logout')" :disabled="!user">Log out</button></div></template>
<script setup lang="ts">
import {computed} from 'vue'
interface User{id:number;name:string;email:string}
const props=defineProps<{user?:User}>()
const emit=defineEmits<{(e:'logout'):void}>()
const label=computed(()=>props.user?.name??'Guest')
</script>
<style scoped>.profile{display:flex;gap:.5rem;align-items:center}</style>

<template>
  <div class="profile">
    <p v-if="user">{{ user.name }} ({{ user.email }})</p>
    <p v-else>Guest</p>
    <button @click="emit('logout')" :disabled="!user">Log out</button>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
interface User {
  id: number
  name: string
  email: string
}
const props = defineProps<{ user?: User }>()
const emit = defineEmits<{ (e: 'logout'): void }>()
const label = computed(() => props.user?.name ?? 'Guest')
</script>
<style scoped>
.profile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
</style>

<script>
export default{name:'OrderList',props:{orders:{type:Array,required:true}},computed:{total(){return this.orders.reduce((sum,o)=>sum+o.total,0)},paid(){return this.orders.filter(o=>o.status==='paid')}},methods:{remove(id){this.$emit('remove',id)}}}
</script>
<template><ul><li v-for="o in paid" :key="o.id">{{o.id}} - {{o.total.toFixed(2)}} <button @click="remove(o.id)">Remove</button></li></ul><p>Total: {{total}}</p></template>

<script>
export default {
  name: "OrderList",
  props: { orders: { type: Array, required: true } },
  computed: {
    total() {
      return this.orders.reduce((sum, o) => sum + o.total, 0);
    },
    paid() {
      return this.orders.filter(o => o.status === "paid");
    },
  },
  methods: {
    remove(id) {
      this.$emit("remove", id);
    },
  },
};
</script>
<template>
  <ul>
    <li v-for="o in paid" :key="o.id">
      {{ o.id }} - {{ o.total.toFixed(2) }}
      <button @click="remove(o.id)">Remove</button>
    </li>
  </ul>
  <p>Total: {{ total }}</p>
</template>

<template><form @submit.prevent="submit"><input v-model="form.email" type="email" placeholder="[email protected]" @keyup.enter="submit" :class="{invalid:errors.email,active:focused}"></form></template>
<style lang="scss">.form{padding:1rem;input{border:1px solid #ccc;&.invalid{border-color:#dc2626}}}</style>

<template>
  <form @submit.prevent="submit">
    <input
      v-model="form.email"
      type="email"
      placeholder="[email protected]"
      @keyup.enter="submit"
      :class="{ invalid: errors.email, active: focused }"
    />
  </form>
</template>
<style lang="scss">
.form {
  padding: 1rem;
  input {
    border: 1px solid #ccc;
    &.invalid {
      border-color: #dc2626;
    }
  }
}
</style>

Common errors and how to fix them

Related tools

• JavaScript / JSX formatter
• TypeScript / TSX formatter
• HTML formatter
• CSS formatter
• SCSS formatter
• Angular template formatter
• JSON formatter