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:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

This is not:

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

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

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

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

While loading VueJS:

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

Then in your component template:

<template>
  <v-fragment>
    <tr class="hola">
      ...
    </tr>
    <tr class="hello">
      ...
    </tr>
  <v-fragment>
</template>

Hope it helps!

Categories: DebugTech

4 Comments

HomeNetix Remote · November 25, 2018 at 2:32 pm

I like this site so much, saved to favorites.

javascript scripts · March 4, 2019 at 4:40 pm

What’s up, I desire to subscribe for this website to take newest updates, therefore where
can i do it please assist.

Marylee Ammirata · March 7, 2019 at 7:59 pm

I found your weblog website on google and examine a couple of of your early posts. Proceed to maintain up the very good operate. I simply extra up your RSS feed to my MSN Information Reader. Searching for forward to studying more from you afterward!…

Willard Abbate · March 7, 2019 at 10:13 pm

Aw, i thought this was an extremely good post. In concept I have to put in writing in this way moreover – taking time and actual effort to make a excellent article… but exactly what do I say… I procrastinate alot by no indicates find a way to go carried out.

Leave a Reply

Your email address will not be published. Required fields are marked *