Page Layout

How it works

Use the PageLayout component within the layout components in the Layout folder to write content.

The PageLayout component provides responsive layout arrangements.

Use the type attribute to select a preset layout method.

ContainerLess Layout

One Column

vue

<template>
 <PageLayout type="three-columns">
  <template #header>
   <!-- Header -->
  </template>
  <template #start>
   <!-- Left Nav -->
  </template>
  <template #end>
   <!-- Right Nav -->
  </template>
  <template #default>
   <!-- Main Content -->
  </template>
  <template #footer>
   <!-- Footer -->
  </template>
 </PageLayout>
</template>

Container Layout

Left Sidebar

vue

<template>
 <PageLayout type="start-sidebar">
  <template #header>
   <!-- Header -->
  </template>
  <template #start>
   <!-- Side Nav -->
  </template>
  <template #default>
   <!-- Main Content -->
  </template>
  <template #footer>
   <!-- Footer -->
  </template>
 </PageLayout>
</template>

Three Columns

vue

<template>
 <PageLayout type="three-columns">
  <template #header>
   <!-- Header -->
  </template>
  <template #start>
   <!-- Left Nav -->
  </template>
  <template #end>
   <!-- Right Nav -->
  </template>
  <template #default>
   <!-- Main Content -->
  </template>
  <template #footer>
   <!-- Footer -->
  </template>
 </PageLayout>
</template>

Mini and One Column Sidebar

vue

<template>
 <PageLayout type="three-columns">
  <template #header>
   <!-- Header -->
  </template>
  <template #start>
   <!-- Left Nav -->
  </template>
  <template #end>
   <!-- Right Nav -->
  </template>
  <template #default>
   <!-- Main Content -->
  </template>
  <template #footer>
   <!-- Footer -->
  </template>
 </PageLayout>
</template>

Bootstrap