Layout Configure

Here is the layout and routing configure

Default Layout
<template>
    <div class="wrapper">
        <Sidebar></Sidebar>
        <main class="main-content">
            <div class="position-sticky top-0 z-3">
                <Header />
            </div>
            <div :class="`content-inner ${pageLayout} pb-0`" id="page_layout">
                <router-view></router-view>
            </div>
            <Footer />
        </main>
        <setting-offcanvas></setting-offcanvas>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import Sidebar from "@/components/partials/Sidebar.vue"
import Footer from '@/components/partials/Footer.vue';
import SettingOffcanvas from '@/components/setting/SettingOffcanvas.vue';
import Header from '@/components/partials/Header.vue'

// Pinia Store
import { useSetting } from '@/store/pinia';

const store = useSetting();
const pageLayout = computed(() => store.page_layout_value);
</script>

Blank Layout
<template>
    <div class="wrapper">
        <router-view></router-view>
    </div>
    <SettingOffcanvas />
</template>

<script setup>
import SettingOffcanvas from '@/components/setting/SettingOffcanvas.vue'
</script>