What Is an In-DOM Template in Vue?

An "in-DOM template" is a Vue feature: a template written directly inside the page's HTML (the DOM). Vue is a JavaScript framework for building user interfaces, and one of its basic features is that a template can be defined inline in the HTML.

Templates written directly in the HTML are called in-DOM templates; Vue code then lives inside the HTML page itself. Here is a simple example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js In-DOM Template</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue.js!',
        },
      });
    </script>
  </body>
</html>

Here a template is defined inside the div with the id #app. The {{ message }} expression is bound to the message data managed by Vue; Vue watches it and updates the DOM automatically whenever it changes.

This approach makes Vue easy to adopt and lets you put templates directly into existing HTML.

Note: The example uses Vue 2 (new Vue). In Vue 3 the same page uses Vue.createApp({ data() { return { message: 'Hello, Vue.js!' } } }).mount('#app'). In-DOM templates are parsed by the browser first, so tag and attribute names must be lower-case and kebab-case (for example <my-component>).