Menu
I couldn't find exact definition of Dom template in Vue docs but I see it mentioned in several places such as here: https://v3.vuejs.org/style-guide/#self-closing-components-strongly-recommended
So what exactly are DOM templates? Is that Vue's concept or something more general (eg. HTML concept defined in some specs)? Are they just HTML elements that are outside <template> tag that Vue can attach to or they can also be inside <template> tag? Examples are welcome.
273
In the context of Vue, "DOM template" (commonly seen as "in-DOM template" in the rest of the Vue docs) refers to a component's markup specified in the document body/head, as opposed to a string template or SFC template.
While DOM templates include <script type="text/html"> or <template> in the document, these two tags (along with string templates and SFC templates) are not subject to the known DOM template parsing caveats because they're inert.
in-DOM template:
// index.html
<body>
<div id="app">
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</div>
</body>
demo
in-DOM template with <script type="text/html">:
// index.html
<body>
<script type="text/html" id="my-comp-template">
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</script>
<div id="app">
<my-comp></my-comp>
</div>
</body>
demo
in-DOM template with <template>:
// index.html
<body>
<template id="my-comp-template">
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</template>
<div id="app">
<my-comp></my-comp>
</div>
</body>
demo
// MyComponent.js
Vue.component('my-comp', {
template: `<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>`
})
demo
// MyComponent.vue
<template>
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</template>
demo
96
So what exactly are DOM templates? Is that Vue's concept or something more general (eg. HTML concept defined in some specs)?
You're not far off. This refers to one or more template tags that are meant to be, or has been, parsed and included in the DOM. You can find the spec for it here: HTML Standard 4.12.3 - "The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.".
In the link you've shared, the term "DOM template" is used to differentiate:
You're generally correct in your assumptions, Vue uses template tags with standard HTML in them - as opposed to JSX or some other flavor of markup. So you can expect to use the HTML you're used to in a Vue template tag, along with custom tags you define for the components you create - or the components from dependencies/libraries you choose to use.
As a side note, Vue works some auto-magic to translate templates and attach them to the DOM at runtime. This may include changing the name of your component tags to be a div with a class name of your component name. Occasionally you may run into edge-case issues where the browser does something to parse your component markup in the template tag before Vue can translate it... resulting in tags rendering improperly. As Vue has matured for the last few years, this has gotten to be farrrr less prevalent. Using Single-File components has seemed to alleviate things like this in my experience.
31
answered Sep 12 '25 08:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
