A Vue SFC formatter restructures Vue Single File Components with consistent indentation across all three sections — template, script, and style. Whether you are reviewing a component from a pull request or cleaning up generated code, this formatter handles Vue 3 Composition API, Vue 2 Options API, and all standard Vue directives including v-if, v-for, and slot syntax.
Formatted Vue SFC will appear here...
Load Example
How to Use the Vue SFC Formatter
Vue Single File Components mix template HTML, JavaScript logic, and CSS styles in one .vue file. When components are copied from docs, auto-generated by scaffolding tools, or minified for production, the formatting often breaks down. A Vue SFC formatter restores consistent indentation in every section so your components are readable and diff-friendly.
Step 1: Paste Your Vue Component
Copy the contents of any .vue file — messy, minified, or inconsistently indented — and paste it into the input area. The formatter accepts components with any combination of <template>, <script>, <script setup>, and <style> sections.
Step 2: Choose Indentation
Select your preferred indentation — 2 spaces, 4 spaces, or tabs. Teams using ESLint with vue/html-indent typically use 2 spaces. Click Format Vue to apply.
Step 3: Review Sections
The formatter processes each section independently: HTML rules apply to the template section, JavaScript indentation applies to the script section, and CSS block formatting applies to the style section. Vue-specific directives like v-if, v-for, :prop, and @event are treated as HTML attributes and preserved exactly.
Step 4: Copy or Download
Click Copy to place the formatted component on your clipboard, or Download to save it as a .vue file ready to drop into your project. The line and character counts update automatically so you can verify the output size.
Vue SFC Formatting Best Practices
The Vue Style Guide recommends ordering sections as template → script → style. Use consistent indentation throughout — most Vue projects use 2 spaces following ESLint's vue/html-indent rule. For long attribute lists on components, one attribute per line improves readability and keeps diffs clean in code reviews.
FAQ
Is the Vue SFC formatter free?
Yes, completely free with no signup required. Format unlimited Vue single file components in your browser.
Is my Vue code safe?
Yes. All formatting runs locally in your browser. Your Vue component code is never sent to any server.
What Vue SFC syntax does this formatter support?
The formatter handles all standard Vue SFC sections: <template>, <script>, <script setup>, <style>, and <style scoped>. It formats each section with proper indentation and preserves Vue-specific attributes like v-if, v-for, :prop, @event, and slot directives.
Can I format Vue 3 Composition API components?
Yes. The formatter supports both Vue 2 Options API and Vue 3 Composition API syntax including <script setup>, defineProps, defineEmits, and reactive references.
Does the formatter change my Vue component logic?
No. Only whitespace and indentation are adjusted. Your template directives, script logic, and style rules remain functionally identical.
Can I minify Vue SFC files?
Yes. The Minify button collapses each section to a single line with minimal whitespace, useful for comparing sizes or copying compact template snippets.