Layout Configure

Here is the layout and routing configure

// Boxed Fansy Layout

<template>
  <div class="boxed-inner">
    <span class="screen-darken"></span>
    <!-- Main Content Start Here -->
    <main class="main-content">
      <horizontal-navbar></horizontal-navbar>
      <main-content-component>
        <!-- Router View For Pages -->
        <router-view></router-view>
      </main-content-component>
    </main>
    <!-- Main Content Start Here -->
    <!-- Footer Component Start Here -->
    <footer-component></footer-component>
    <!-- Footer Component End Here -->
  </div>
  <!-- Live Customizer Component Start Here -->
  <setting-offcanvas></setting-offcanvas>
  <!-- Live Customizer Component End Here-->
</template>

// Boxed Layout

<template>
  <div class="boxed-inner">
    <span class="screen-darken"></span>
    <!-- Main Content Start Here -->
    <main class="main-content">
      <horizontal-navbar></horizontal-navbar>
      <main-content-component>
        <!-- Router View For Pages -->
        <router-view></router-view>
      </main-content-component>
    </main>
    <!-- Main Content Start Here -->
    <!-- Footer Component Start Here -->
    <footer-component></footer-component>
    <!-- Footer Component End Here -->
  </div>
  <!-- Live Customizer Component Start Here -->
  <setting-offcanvas></setting-offcanvas>
  <!-- Live Customizer Component End Here-->
</template>

// Dual Compac Layout

<template>
    <span class="screen-darken"></span>
    <!-- Main Content Start Here -->
    <main class="main-content">
        <dual-compact-navbar></dual-compact-navbar>
        <main-content-component>
        <!-- Router View For Pages -->
        <router-view></router-view>
        </main-content-component>
    </main>
    <!-- Main Content Start Here -->
    <!-- Footer Component Start Here -->
    <footer-component></footer-component>
    <!-- Footer Component End Here -->
    <!-- Live Customizer Component Start Here -->
    <setting-offcanvas></setting-offcanvas>
    <!-- Live Customizer Component End Here-->
</template>

// Dual Horizontal Layout

<template>
  <span class="screen-darken"></span>
  <!-- Main Content Start Here -->
  <main class="main-content">
    <dual-horizontal-navbar></dual-horizontal-navbar>
    <main-content-component>
      <!-- Router View For Pages -->
      <router-view></router-view>
    </main-content-component>
  </main>
  <!-- Main Content Start Here -->
  <!-- Footer Component Start Here -->
  <footer-component></footer-component>
  <!-- Footer Component End Here -->
  <!-- Live Customizer Component Start Here -->
  <setting-offcanvas></setting-offcanvas>
  <!-- Live Customizer Component End Here-->
</template>

// Horizontal Layout

<template>
  <span class="screen-darken"></span>
  <!-- Main Content Start Here -->
  <main class="main-content">
    <horizontal-navbar></horizontal-navbar>
    <main-content-component>
      <!-- Router View For Pages -->
      <router-view></router-view>
    </main-content-component>
  </main>
  <!-- Main Content Start Here -->
  <!-- Footer Component Start Here -->
  <footer-component></footer-component>
  <!-- Footer Component End Here -->
  <!-- Live Customizer Component Start Here -->
  <setting-offcanvas></setting-offcanvas>
  <!-- Live Customizer Component End Here-->
</template>

// Default Layout
    
<template>
  <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></sub-header>
        <!-- Sub Header Component End Here-->
      </template>
      <!-- Header Component End Here -->
    </div>

    <!-- Main Content Start Here -->
    <main-content-component>
      <!-- Router View For Pages -->
      <router-view></router-view>
    </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-->
</template>

// Landing Page Layout

<template>
  <main v-if="header === 'header_two'" class="main-content">
    <div class="position-relative">
      <HeaderTwo></HeaderTwo>
    </div>
    <router-view></router-view>
  </main>
  <main v-else class="main-content">
    <div class="position-relative">
      <HeaderOne></HeaderOne>
    </div>
    <router-view></router-view>
  </main>
  <footer v-if="footer === 'footer_one'">
    <FooterOne />
  </footer>
  <footer v-else>
    <FooterComponent></FooterComponent>
  </footer>
  <div id="back-to-top" ref="backToTopButton" :class="buttonClass" style="display: none" @click="backToTop">
    <a class="p-0 btn btn-primary btn-sm position-fixed top" id="top" href="#">
      <svg class="icon-30" width="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 15.5L12 8.5L19 15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </a>
  </div>
  <a class="btn btn-primary btn-landing" href="/dashboard"> Dashboard Demo </a>
</template>

// Blank Page Layout

<template>
  <router-view> </router-view>
  <!-- Live Customizer Component Start Here -->
  <setting-offcanvas :landing-page="landingPage" :buy-now="buyNow"></setting-offcanvas>
  <!-- Live Customizer Component End Here-->
</template>

<script>
import SettingOffcanvas from '@/components/setting/SettingOffcanvas.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
export default {
  components: { SettingOffcanvas },
  setup() {
    const route = useRoute()
    const landingPage = computed(() => route.meta.landingPage)
    const buyNow = computed(() => route.meta.buyNow)

    return {
      landingPage,
      buyNow
    }
  }
}
</script>

// Auth Layout

<template>
  <router-view> </router-view>
  <!-- Live Customizer Component Start Here -->
  <setting-offcanvas></setting-offcanvas>
  <!-- Live Customizer Component End Here-->
</template>

<script>
import SettingOffcanvas from '@/components/setting/SettingOffcanvas.vue'
export default {
  components: { SettingOffcanvas }
}
</script>