How to call VueJS component from another component

Question

I'm new to VueJS, i have different pages which i organized in 'components'. Now, different pages have different layouts, for example, some pages will not include the header and the footer (which are also individual components).

This is the code for a component that is supposed to include the header

<template>
    <Header />
    <div class="container main-content">
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                    <div class="item-body">
                        <router-link to="/dashboards" class="">
                            <i class="fa fa-user fa-4x"></i>
                            <p>View Dashboards</p>
                        </router-link>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                    <div class="item-body">
                        <router-link to="/home" class="">
                            <i class="fa fa-cogs fa-4x"></i>
                            <p>Manage Settings</p>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="col-lg-2"></div>
        </div>
    </div>
</template>
<script>
    import Header from './Header.vue'

    export default{
        name: 'Loyalty',
        components:{
            'Header': Header
        }
    }
</script>

And this is my Header.vue

<template>
    <div>
        <div class="head">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
              <span class="pull-left" style="padding-left: 10px;">
                <router-link to="/home" class="header-text page-link"><span class="fa fa-arrow-left"></span>&nbsp;&nbsp;Home</router-link>
              </span>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 custom-hidden-sm">
              <span class="pull-right" style="padding-right: 10px;">
                <span class="header-text">Waje Loyalty</span>
              </span>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'Header',
        data(){
            return{
              page_name: this.$router.currentRoute.name
            }
        }
    }
</script>

When i compile, i get the error:

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

How can i solve this?

Answer 1

The issue is caused by the two root elements in your Loyalty.vue template: <Header /> and <div class="container main-content">.

VueJS component templates can contain one and only one root node.

To solve this, wrap the content of your Loyalty.vue template with a root div.

<template>
    <!-- root div -->
    <div> 
      <Header />
      <div class="container main-content">
          <div class="row">
              <div class="col-lg-2"></div>
              <div class="col-lg-8">
                  <h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                      <div class="item-body">
                          <router-link to="/dashboards" class="">
                              <i class="fa fa-user fa-4x"></i>
                              <p>View Dashboards</p>
                          </router-link>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                      <div class="item-body">
                          <router-link to="/home" class="">
                              <i class="fa fa-cogs fa-4x"></i>
                              <p>Manage Settings</p>
                          </router-link>
                      </div>
                  </div>
              </div>
              <div class="col-lg-2"></div>
          </div>
      </div>
    </div>
</template>