Layout
Understanding template layouts will help you create a page with your desired layout.
Default Layout
The default layout is the layout for all pages which do not require authentication. It is a simple layout that does not include any header, footer, and sidebar.
Usage
vue
<template>
<div>
<main>lorem</main>
</div>
</template>
App Layout
The app layout is the default layout for all pages which are inside the dashboard. It is a simple layout that includes a header, footer, sidebar, and customizer.
Usage
vue
<template>
<main class="app-wrapper">
<Header :class="window.width > 1280 ? switchHeaderClass() : ''" />
<!-- end header -->
<Sidebar
v-if="
this.$store.state.menuLayout === 'vertical' &&
this.$store.state.sidebarHidden === false &&
window.width > 1280
"
/>
<!-- main sidebar end -->
<Transition name="mobilemenu">
<mobile-sidebar
v-if="window.width < 1280 && this.$store.state.mobielSidebar"
/>
</Transition>
<Transition name="overlay-fade">
<div
v-if="window.width < 1280 && this.$store.state.mobielSidebar"
class="overlay bg-black bg-opacity-70 backdrop-filter backdrop-blur-[3px] backdrop-brightness-10 fixed inset-0 z-[999]"
@click="this.$store.state.mobielSidebar = false"
></div>
</Transition>
<!-- mobile sidebar -->
<Settings />
<div
class="content-wrapper transition-all duration-150"
:class="window.width > 1280 ? switchHeaderClass() : ''"
>
<div
class="page-content"
:class="this.$route.meta.appheight ? 'h-full' : 'md:min-h-screen'"
>
<div
:class="` transition-all duration-150 ${
this.$store.state.cWidth === 'boxed'
? 'container mx-auto'
: 'container-fluid'
}`"
>
<Breadcrumbs v-if="!this.$route.meta.hide" />
<router-view v-slot="{ Component }">
<transition name="router-animation" mode="out-in" appear>
<component :is="Component"></component>
</transition>
</router-view>
</div>
</div>
</div>
<!-- end page content -->
<Footer :class="window.width > 1280 ? switchHeaderClass() : ''" />
</main>
</template>