App Layout

Basic usage

<template>
  <app-layout></app-layout>
</template>

<script>
  import {
    AppLayout
  } from 'vue-luma'

  export default {
    components: {
      AppLayout
    }
  }
</script>

Content

<app-layout>

  <!-- Page Content -->
  <template v-slot:default="{layoutProps}">
    <!-- Nuxt -->
    <nuxt v-bind:layout-props="layoutProps" />

    <!-- or Vue Router -->
    <router-view v-bind:layout-props="layoutProps" />

    <!-- Or Inertia.js -->
    <slot v-bind:layout-props="layoutProps" />
  </template>

  <!-- Other -->
  <template v-slot:after-layout>
    <!-- Additional after layout components -->
    <!-- For example, we're adding the app settings here -->
  </template>

</app-layout>

<app-layout>

  <!-- Replace Navbar Component -->
  <template v-slot:navbar>
    Replace Navbar Component
  </template>

  <!-- Replace Navbar Content -->
  <template v-slot:navbar-content>
    Replace Navbar Content
  </template>

</app-layout>

<template>
  <app-layout :sidebar-menu="sidebarMenu">

    <!-- Replace Sidebar Component -->
    <template v-slot:sidebar>
      Replace Sidebar Component
    </template>

    <!-- Replace Sidebar Content -->
    <template v-slot:sidebar-content="{sidebar}">
      <div class="sidebar-heading">Replace Sidebar Content</div>

      <fmv-sidebar-menu :menu="sidebar.menu"
        class="mb-24pt" />

      <pre class="sidebar-text"
        v-text="sidebar.menu" />
    </template>

  </app-layout>
</template>

<script>
  import {
    AppLayout
  } from 'vue-luma'
  import {
    FmvSidebarMenu
  } from 'fmv-layout'

  export default {
    components: {
      AppLayout,
      FmvSidebarMenu
    },
    computed() {
      sidebarMenu() {
        return [{
          "label": "Home",
          "route": {
            "name": "layout",
            "params": {
              "layout": "default"
            }
          },
          "icon": {
            "type": "md-icon",
            "id": "home"
          }
        }]
      }
    }
  }
</script>

<app-layout>

  <!-- Footer Content -->
  <template v-slot:footer-content="footerProps">
    <p class="text-70 brand mb-24pt">
      <img class="brand-icon"
        :src="footerProps.footerLogo"
        width="30"
        :alt="footerProps.footerBrand">
      {{ footerProps.footerBrand }}
    </p>

    <p class="text-50 measure-lead-max small">A beautifully crafted user interface for modern Education Platforms, including Courses & Tutorials, Video Lessons, Student and Teacher Dashboard, Curriculum Management, Earnings and Reporting, ERP, HR, CMS, Tasks, Projects, eCommerce and more.</p>

    <pre v-text="footerProps" />
  </template>

  <!-- Footer Links -->
  <template v-slot:footer-links>
    <p class="mb-8pt d-flex">
      <a class="text-70 text-underline mr-8pt small">Terms</a>
      <a class="text-70 text-underline small">Privacy</a>
    </p>
  </template>

  <!-- Footer Copyright Text -->
  <template v-slot:footer-copyright-text>
    Copyright 2020 &copy; All rights reserved!
  </template>

  <!-- Footer Description Text -->
  <template v-slot:footer-description-text>
    Hello World!
  </template>

  <!-- Other -->
  <template v-slot:after-layout>
    <!-- Additional after layout components -->
  </template>

</app-layout>

<app-layout> Reference

<app-layout> Properties

Property	Type	Default Value
body-class	String
sub-layout	Boolean
sub-layout-has-scrolling-region	Boolean	true
sub-layout-drawer	Object or Boolean
sub-layout-drawer-id	String
sub-layout-drawer-align	String	end
sub-layout-responsive-width	String	992px
sidebar-type	String	dark-pickled-bluewood
sidebar-variant	String
sidebar-brand	String or Boolean	Brand
sidebar-search	Boolean	true
sidebar-search-form-class	String or Array or Object
sidebar-brand-class	String or Array or Object
sidebar-menu	Object or Array
navbar-class	String or Array or Object
navbar-toggle-class	String or Array or Object
navbar-type	String	light
navbar-variant	String	body border-bottom-2
navbar-container-class	String or Array or Object	d-flex w-100 align-items-center
navbar-content-container-class	String or Array or Object	d-flex w-100 align-items-center
navbar-brand	String	Brand
navbar-brand-class	String or Array or Object
navbar-full-sample-guest-mode	Boolean
navbar-search	Boolean
has-footer	Boolean	true
footer-class	String or Array or Object	bg-white border-top-2
footer-container-class	String or Array or Object
footer-brand	String	Brand
footer-logo	String or Boolean
footer-copyright-year	String or Number or Boolean
footer-copyright-text	String or Boolean
footer-description-text	String or Boolean
drawer-layout-class	String or Array or Object
drawer-layout-responsive-width	String	992px
drawer-layout-content-id	String	drawer-layout-content
container-class	String or Array or Object	container page__container
drawer-align	String	start

<app-layout> Slots

Slot	Description
default	The page content.
navbar	Replace Navbar Component
navbar-content	Replace Navbar Content
sidebar	Replace Sidebar Component
sidebar-content	Replace Sidebar Content
footer-content	Replace Footer Content
footer-links	Replace the footer links
footer-copyright-text	Replace the footer copyright text
footer-description-text	Replace the footer description text
footer	Replace Footer Component

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset