Vue Formatter & Validator

Format and validate Vue single-file components

Paste a complete .vue file and format all three parts at once: the <template> markup with its directives, the <script> or <script setup> block in JavaScript or TypeScript, and the <style> block in CSS, SCSS or Less. Validation checks the component structure and then parses each script and style block with the right parser, so a syntax error in a lang="ts" script is reported with its line number in the original file. It all runs in your browser.

What can you do?

1. 1. Template formatting
   Indent nested elements and keep v-if, v-for, :bind and @event attributes readable, with {{ interpolations }} spaced consistently.
2. 2. Script and script setup
   Format the script block as JavaScript or TypeScript depending on its lang attribute, including Composition API code with typed refs and props.
3. 3. Scoped and preprocessed styles
   Format <style>, <style scoped>, lang="scss" and lang="less" blocks with the matching CSS parser.
4. 4. Block-by-block validation
   Errors are reported per block, e.g. “<script> block – Line 12, column 10: Type expected”, with line numbers that match your original file.

Why format Vue components with one tool?

A single-file component mixes three languages. Formatting each part by hand, or with separate tools, is tedious and easy to get inconsistent. Prettier understands the whole file and applies the right rules to each block, which is why the official create-vue project scaffolding offers it as the formatter of choice.

It also matters for validation. When a script block contains a syntax error, Prettier quietly leaves that block unformatted instead of reporting it. This tool parses every block separately so you're told exactly where the problem is.

How to format a .vue file

1. 1. Paste the component
   Paste the entire .vue file, including its template, script and style blocks.
2. 2. Click format
   The component is validated block by block and then formatted. The parsers load the first time you use the tool.
3. 3. Fix any reported block
   The message names the block and the line in your file, so you can go straight to the problem.
4. 4. Copy the component
   Paste the formatted component back into your project.

Example: a Vue 3 component with script setup and SCSS

<template>
<ul class="todos"><li v-for="t in todos" :key="t.id" @click="toggle(t)">{{t.label}}</li></ul>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const todos=ref<{id:number;label:string}[]>([])
function toggle(t:{id:number}){console.log(t.id)}
</script>
<style scoped lang="scss">.todos{li{cursor:pointer}}</style>

<template>
  <ul class="todos">
    <li v-for="t in todos" :key="t.id" @click="toggle(t)">{{ t.label }}</li>
  </ul>
</template>
<script setup lang="ts">
import { ref } from "vue";
const todos = ref<{ id: number; label: string }[]>([]);
function toggle(t: { id: number }) {
  console.log(t.id);
}
</script>
<style scoped lang="scss">
.todos {
  li {
    cursor: pointer;
  }
}
</style>

Supported block languages

Frequently asked questions

Related tools

Working on the pieces separately? Use the TypeScript formatter for script code and the SCSS formatter for styles.

• TypeScript Formatter & Validator – Format TypeScript and TSX and check them for syntax errors.
• SCSS Formatter, Validator & Minifier – Beautify, validate and safely minify Sass (SCSS).
• HTML Formatter, Validator & Minifier – Indent markup, catch structural errors and compact HTML.
• JSX Formatter & Validator – Format React components and catch JSX syntax errors.
• GraphQL Formatter, Validator & Minifier – Format, validate and minify GraphQL queries and schemas.