Overview

A Vue template defines what users see and acts as the bridge between application data and the interface. Templates resemble standard HTML but add interpolation, directives, and event bindings. When reactive data changes, Vue updates the corresponding rendered content automatically.

Key concepts

• Templates define component UI
• Mustache syntax displays text values
• Simple expressions can transform displayed data
• Complex logic belongs in the script section

What is a Template?

A template is an HTML block enhanced with Vue features. In a Single-File Component, it appears inside the template element.

<template>
  <h1>Welcome to Vue.js</h1>
</template>

Although this looks like ordinary HTML, the same template can display reactive data, conditionally render content, repeat elements, and respond to user interaction.

Why do we need Templates?

Without a declarative template, a profile page might manually find DOM nodes whenever a user's name changes. With Vue, the template describes the desired interface and Vue keeps it synchronized with the data.

• Cleaner UI code
• Clear connection between data and markup
• Fewer manual DOM operations
• Easier maintenance as the interface grows

Displaying dynamic Data

Mustache syntax—double curly braces—renders a value as text.

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  data() {
    return {
      message: "Welcome to DevBrainBox!"
    };
  }
};
</script>

If message changes, Vue automatically updates the heading. Interpolation escapes HTML, making it safe for ordinary text values.

Using JavaScript Expressions

Interpolation can evaluate concise JavaScript expressions using values available to the component.

<template>
  <p>{{ 10 + 20 }}</p>
  <p>{{ firstName + " " + lastName }}</p>
  <p>{{ isMember ? "Member" : "Guest" }}</p>
</template>

Expressions should remain easy to read. Move multi-step calculations and reusable derived values into computed properties.

Displaying HTML Content

Interpolation treats HTML markup as text. The v-html directive instead assigns content to an element's innerHTML.

<script setup>
const content = "<strong>Hello Vue!</strong>";
</script>

<template>
  <p>{{ content }}</p>
  <div v-html="content"></div>
</template>

Never use v-html with untrusted or unsanitized content. It can introduce cross-site scripting vulnerabilities because Vue cannot escape the inserted HTML.

Single-File Component structure

<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
const title = "Hello Vue!";
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Template rules and behavior

• Use valid HTML and Vue syntax
• Reference properties exposed by the component
• Bind dynamic attributes with v-bind or its : shorthand
• Use directives for reactive DOM behavior
• Vue 3 supports multiple root nodes, though a wrapper can still help layout and attribute inheritance
• Keep business logic outside the template

Real-life example

A product template can display a name, price, and description from application data. Selecting another product changes the data, and Vue refreshes the displayed values without a page reload.

<template>
  <article>
    <h2>{{ product.name }}</h2>
    <p>Price: ₹{{ product.price }}</p>
    <p>{{ product.description }}</p>
  </article>
</template>

Common beginner mistakes

• Misspelling a data property
• Putting assignments or complex statements in interpolation
• Using interpolation inside HTML attributes instead of v-bind
• Expecting Mustache syntax to render HTML
• Using v-html with unsafe content
• Forgetting that template expressions run in the component's scope

Best practices

• Keep templates simple and readable
• Use meaningful property names
• Move calculations to computed properties
• Move business logic to script
• Break large templates into components
• Use consistent indentation
• Prefer safe text interpolation over v-html

Key takeaways

• Templates define the component UI
• Vue templates enhance familiar HTML
• Double braces display escaped text
• Simple JavaScript expressions are supported
• Reactive data changes update rendered content
• v-html renders raw markup and requires trusted content
• Single-File Components combine template, logic, and styles
• Clean templates make applications easier to maintain