Component template should contain exactly one root element

Question

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.

ERROR Failed to compile with 1 errors
error in ./src/App.vue

(Emitted value instead of an instance of Error) Error compiling template:

 <div id="app" class="container">
     <div class="page-header">
        <h1>Vue.js 2 & Firebase Sample Application</h1>
     </div>
  </div class="panel panel-default">
     <div class="panel-heading">
         <h3>Book Lists</h3>
     </div>
     <div clas ="panel-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>
                Title
              </th>
              <th>
                Author
              </th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
     </div>
  </div>

Here's my export default

export default {
  name: 'app',
  firebase: {
    books: booksRef
  },
  components: {
    Hello
  }
}

What part should I fix to remove the error?

Answer 1

Component template should contain exactly one root element.

<template>
    <root-element-1></root-element-1>
    <root-element-2></root-element-2>
</template>

this will be the fix

<template>
    <div>
        <root-element-1></root-element-1>
        <root-element-2></root-element-2>
    </div>
</template>

In your case

</div class="panel panel-default">

needs to be

<div class="panel panel-default">

Official Documentation

On the official documentation, about Conditional Rendering, somewhat "multiple" root element could be used when using v-if and v-else combo.

<template v-if="true">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
</template>