Free · Fast · Privacy-first

Format Vue Template HTML

Vue templates are HTML with extra directives, custom components, and mustache interpolations sprinkled throughout.

⚡

Preserves v-bind, v-on, v-if, and v-for directives

🔒

Keeps mustache interpolations inline with text

✨

Treats custom components as block elements

⚡

Runs in your browser with no upload

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this HTML Formatter to your website

Drop the HTML Formatter into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/html/html-formatter?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/html/html-formatter?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

What Makes Vue Templates Different and How to Format Them Cleanly

Vue templates are valid HTML with a layer of framework-specific extensions. The most visible extensions are directives such as v-bind, v-on, v-if, v-for, and v-model, which appear as attributes with the v- prefix and contain JavaScript expressions in their values. Mustache interpolations, written as double curly braces around an expression, embed reactive values directly in text content. Custom component tags can be written in PascalCase or kebab-case and reference components registered in the Vue application. A formatter that handles all of these correctly produces output that compiles identically to the input while being far easier for a human to read.

FixTools formats Vue templates by recognising the template tag as the root container of the template block, applying depth-based indentation to all child elements, preserving v- prefixed directive attributes exactly including any colon arguments and modifiers, keeping mustache interpolations on the same line as their surrounding text content, and treating custom component tags as block-level elements regardless of whether they are written in PascalCase or kebab-case. The formatter does not parse the JavaScript inside directive values or interpolations, which is the right conservative choice because parsing arbitrary JavaScript would slow the formatter and introduce framework-version-specific bugs.

For committed Vue source code in a project, the official Vue Prettier plugin or the Volar formatter integrated with editor save hooks is the right choice because those tools understand the full single-file component structure including the script and style sections. FixTools is better for the cases where the dedicated tooling is not available: ad-hoc snippets pasted from chat, examples from documentation, compressed output from build artifacts, or quick reads of unfamiliar templates. The two approaches complement each other: project tooling for committed source, FixTools for everything else.

A specific behaviour worth understanding is how the formatter handles slot content. Slot content inside a child component, whether written as default slot children or as named slot template blocks, is indented as part of the parent component tree. This matches the visual structure of the template and makes the relationship between parent and slot content obvious. Scoped slot syntax with destructured slot props is preserved exactly in the slot template tag attributes, with no attempt to reformat the destructuring expression.

HTML Living Standard (WHATWG)MDN: HTML attributes

How to use this tool

💡

Paste your Vue template HTML and click Format. The output shows your template with clean indentation while preserving directives, interpolations, and component tags exactly.

How It Works

Step-by-step guide to format vue template html:

1
Paste your Vue template
Paste the template block of your Vue single-file component or any Vue template snippet into the input panel. The wrapping template tag is optional; both forms work identically.
2
Click Format
Click Format to apply depth-based indentation. Directives, mustache interpolations, and component tags are preserved exactly while the structural indentation is restored.
3
Copy back to your component
Copy the formatted template back into your single-file component or wherever the template is consumed. The output compiles to the same render function as the input, with only whitespace differences.

Real-world examples

Common situations where this approach makes a real difference:

Reviewing a Vue component contributed by a junior developer

A senior developer formats the template of a Vue component contributed by a junior developer to make the review more productive. The formatted version reveals two slot misuse patterns that would have been hard to spot in the original compressed source. The feedback in the review is more substantive because attention focused on structure rather than on decoding.

Migrating a Vue 2 component to Vue 3

A developer migrating a Vue 2 component to Vue 3 formats the source template first to clearly identify each directive that needs updating for Vue 3 syntax. The formatted version makes the migration mechanical, while the compressed source would have required careful tracking of each directive across long lines of attribute content.

Onboarding to a Vue codebase from another framework

A developer joining a Vue project from a React background formats several core templates in FixTools to learn the Vue directive conventions. The formatted versions communicate the patterns clearly, accelerating onboarding meaningfully compared to learning from compressed source alone.

Debugging a v-for rendering issue

A developer formats the rendered HTML output of a Vue v-for loop that is producing unexpected duplicates. The formatted output reveals that the key binding is referencing a non-unique field, causing Vue to reuse component instances incorrectly. The fix is in the key binding, and formatting was the step that made the diagnosis possible.

When to use this guide

Use this when you have a Vue single-file component template or any Vue template snippet that needs readable indentation before review, editing, or sharing.

Pro tips

Get better results with these expert suggestions:

Format Vue templates before code review

A formatted Vue template is dramatically easier to review than a compressed one, particularly when the template contains many directives and component tags. Format before opening the pull request so reviewers can engage with the substance of the change rather than spending their attention decoding the source. The few seconds spent formatting save many minutes of reviewer time and produce higher-quality reviews because attention is focused on what matters.

Use formatted templates as design system documentation

When documenting a Vue design system, include formatted template examples for each component. The formatted versions communicate the component API clearly to developers integrating the system, while compressed examples force every integrator to format the code themselves before they can understand it. Investing once in formatted documentation pays back every time a developer uses the system.

Format both source and rendered output for SSR debugging

When debugging Vue server-side rendering with Nuxt or Vue SSR, capture both the source template and the rendered HTML output, format both, and diff them. The diff reveals hydration mismatches, conditional rendering errors, and any differences between expected and actual output. This is the most informative single piece of evidence for SSR bugs because it shows exactly where source intent diverges from rendered reality.

Format snippets from the Vue documentation before integrating

Vue documentation often shows component examples in compact form for inline display. Format these in FixTools before adapting them for your project so the structure is visible and the integration is straightforward. The documentation examples are correct Vue, but the compact display format obscures the structural patterns that are usually the actual lesson the example is meant to teach.

Use Volar or Prettier for committed source

For Vue project source code, use the official Volar formatter or the Vue Prettier plugin. FixTools is best for ad-hoc snippets and quick reads outside the project context.

Format the template block separately

A Vue single-file component has separate template, script, and style sections. Format the template block here and use language-specific formatters for the other sections.

Preserve scoped slot syntax exactly

Scoped slot bindings are JavaScript destructuring expressions inside attribute values. Do not edit them by hand without understanding the Vue slot API.

FAQ

Frequently asked questions

No. v-bind, v-on, v-if, v-for, v-model, and all other v- prefixed directives are preserved exactly as written, including any colon arguments such as v-bind:href, dot modifiers such as v-on:click.stop, and JavaScript expressions in attribute values. The formatter does not parse the directive expressions, so even complex inline expressions pass through unchanged. The output template compiles to the same render function as the input, so directive behaviour is identical before and after formatting.

Yes. Double-curly-brace interpolations inside text content are preserved exactly and kept on the same line as their surrounding text. The formatter does not break interpolations across lines because doing so would introduce whitespace inside the interpolation that might affect rendered output. If an interpolation is very long, the right solution is to compute the value in a computed property or method and reference the property name in the template, which is both more maintainable and more performant than long inline expressions.

For committed Vue source code, the official Volar formatter integrated with your editor or the Vue Prettier plugin in a pre-commit hook is the right choice because those tools understand the full single-file component structure including script and style sections. FixTools is better for ad-hoc snippets outside the project context: pasted examples from chat or documentation, compressed output from build artifacts, or quick reads of unfamiliar templates. Use the project tooling for committed source and FixTools for everything else.

Yes. Scoped slot bindings, including the modern v-slot syntax with destructured props inside the value, are preserved exactly. The destructuring expression is treated as opaque attribute content, which is correct because parsing the destructuring would require a JavaScript parser and would introduce a category of bugs around edge cases in destructuring syntax. The conservative preservation approach handles every form of scoped slot binding without specific support for each variant.

No. FixTools formats HTML structure only, which covers the template block of a Vue single-file component. The script section contains JavaScript or TypeScript and should be formatted with Prettier or a JavaScript-aware formatter. The style section contains CSS, Sass, or another preprocessor language and should be formatted with the appropriate language tool. For full single-file component formatting, the Volar editor extension handles all three sections in a single save action, which is the most convenient setup for active Vue development.