Layout Configure

Here is the layout and routing configure

Dashboard Layouts

There are three layout in dashboard:

// Auth Layout

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

// Blank Layout

<template>
  <div>
    <Loader />
    <div class="wrapper">
      <router-view />
    </div>
  </div>
</template>
           

// Dashboard Layout
            
<template>
  <div>
    <loader-component :show="isLoader"></loader-component>
    <!-- Sidebar Component Start Here-->
    <sidebar-component></sidebar-component>
    <!-- Sidebar Component End Here-->
    <main class="main-content">
      <div :class="`position-relative  ${isBanner ? 'iq-banner ' + bannerStyle : ''}`">
        <!-- Header Component Start Here -->
        <header-component> </header-component>

        <template v-if="isBanner">
          <!-- Sub Header Component Start Here-->
          <sub-header :title="title"></sub-header>
          <!-- Sub Header Component End Here-->
        </template>
        <!-- Header Component End Here -->
      </div>

      <!-- Main Content Start Here -->
      <main-content-component>
        <!-- Router View For Pages -->
        <b-container fluid :class="`content-inner pb-0 ${pageLayout}`">
          <router-view></router-view>
        </b-container>
      </main-content-component>
      <!-- Main Content Start Here -->

      <!-- Footer Component Start Here -->
      <footer-component></footer-component>
      <!-- Footer Component End Here -->
    </main>
    <!-- Live Customizer Component Start Here -->
    <setting-offcanvas></setting-offcanvas>
    <!-- Live Customizer Component End Here-->
  </div>
</template>

Frontend Layouts

There are two layout in frontend:

// Frontend Layout
            
<template>
  <main class="main-content">
    <!-- Header Component Start -->
    <HeaderDefault></HeaderDefault>
    <!-- Header Component End-->

    <!-- Hero Slider, Banner Start -->
    <BreadcrumbWidget v-if="route.meta.beforeWrapper"></BreadcrumbWidget>
    <!-- Hero Slider, Banner End -->

    <!-- Main Component Start -->
    <router-view />
    <!-- Main Component Start -->
  </main>

  <!-- Footer Component Start -->
  <FooterDefault></FooterDefault>
  <!-- Footer Component End -->

  <SettingOffcanvas></SettingOffcanvas>
</template>

// Frontend Merchandise Layout
            
<template>
  <!-- Header Component Start -->
  <HeaderMerchandise> </HeaderMerchandise>
  <!-- Header Component End-->

  <!-- Hero Slider, Banner Start -->
  <BreadcrumbWidget v-if="route.meta.beforeWrapper"></BreadcrumbWidget>
  <!-- Hero Slider, Banner End -->

  <!-- Main Component Start -->
  <router-view />
  <!-- Main Component End -->

  <!-- Footer Component Start -->
  <FooterDefault v-if="route.meta.footer === 'default'"></FooterDefault>

  <FooterMerchandise v-else></FooterMerchandise>
  <!-- Footer Component End -->

  <div id="offcanvasCart" class="offcanvas offcanvas-end sidebar-cart border-0 on-rtl end" tabindex="-1" aria-modal="true" role="dialog">
    .......
  </div>

  <SettingOffcanvas></SettingOffcanvas>
</template>