Symptoms

While working on a VueJS component, you face the following error in your browser console (or in your JS linter output):

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.

As explained, VueJS component templates can contain one and only one root node. This is correct:

html

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

  </div>

</template>

 

This is not:

html

<template>

  <div class="hola">

    <h1>{{ msg }}</h1>

  </div>

  <div class="hello">

    <h1>{{ msg }}</h1>

  </div>

</template>

 

Fix

Wrap your html tags into one parent element:

html

<template>

  <div>

    <div class="hola">

      <h1>{{ msg }}</h1>

    </div>

    <div class="hello">

      <h1>{{ msg }}</h1>

    </div>

  </div>

</template>

 

Going further

In some case, you cannot afford to add an extra parent element without breaking HTML structure. For instance, if your child component template replace several <tr> in a parent HTML table:

html

<template>

  <tr class="hola">

    ...

  </tr>

  <tr class="hello">

    ...

  </tr>

</template>

In this specific case, you need have two solutions:

  • use functional components ;
  • use Fragments (my favorite one)

 

Fragments let you group multiple children below a parent element without adding extra nodes to the DOM at render. There is a vue-fragment package you can install:

bash

npm install vue-fragments // yarn add vue-fragments

 

While loading VueJS:

js

import { Plugin } from "vue-fragments"; Vue.use(Plugin);

Then in your component template:

 

html

<template>

  <v-fragment>

    <tr class="hola">

      ...

    </tr>

    <tr class="hello">

      ...

    </tr>

  <v-fragment>

</template>

 

Hope it helps!