Vue template should have a single root element

  • VUE_MULTIPLE_TEMPLATE_ROOT
  • Error
  • High
  • vue

This rule applies when a Vue template has multiple root elements.

Vue allows only a single element as a template root.
If multiple root elements are specified, unintended behaviors occur as follows:

  • For single-file component with a .vue extension, Vue throws a compile error
  • For uncompiled templates, Vue only renders the first element as a root and outputs a warning message

Vue considers the following cases as having multiple root elements:

  1. Root elements without v-if, v-else-if, and v-else directives
  2. A root element with v-for directive

Note: This rule is based on Vue 2.x API specifications.

Noncompliant Code Example

View with compliant examples side by side
// Example 1
<template>
  <div>Hello</div> <!-- VUE_MULTIPLE_TEMPLATE_ROOT alarm because the template has two 'div' elements as a root. -->
  <div>Hi</div>
</template>

<script>
  export default {
  }
</script>

// Example 2
<template>
  <div v-for="item in list" :key="item.id">{{ item.name }}</div> <!-- VUE_MULTIPLE_TEMPLATE_ROOT alarm because the template has single root element with 'v-for' directive. -->
</template>

<script>
  export default {
    data() {
      return { list: [{ id: 'hello', name: 'Hello' }, { id: 'hi', name: 'Hi' }] };
    }
  }
</script>

Compliant Code Example

View with noncompliant examples side by side
// Example 1
<template>
  <div v-if="isHello">Hello</div>
  <div v-else>Hi</div>
</template>

<script>
  export default {
    data() {
      return { isHello: true };
    }
  }
</script>

// Example 2
<template>
  <div>
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return { list: [{ id: 'hello', name: 'Hello' }, { id: 'hi', name: 'Hi' }] };
    }
  }
</script>

Version

This rule was introduced in DeepScan 1.16.0-beta.

See

  • [Vue warn]: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

  • [Vue warn]: Inline-template components must have exactly one child element.