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: The application of this rule is limited to projects using Vue 2.x version.

Noncompliant Code Example

// 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

// 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.