Layout Page     

QLayout must contain page content. If you haven’t already, please read QLayout documentation page first.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QPageContainer',
    'QPage'
  ]
}

Basic Usage

A QPage must be encapsulated by QPageContainer, which in turn must be a child of QLayout.

<q-layout>
  ...
  <q-page-container>
    <q-page>
      <!-- page content -->
    </q-page>
  </q-page-container>
</q-layout>

Usually, the QPageContainer is part of the Layout template (where it contains a <router-view /> child only), and its content goes into separate vue files under /src/pages. If you haven’t already, please read Integrating Layout with Router.

<!-- vue file for Layout: -->
<q-layout>
  ...
  <q-page-container>
    <router-view />
  </q-page-container>
</q-layout>

<!-- vue file for a Page: -->
<q-page padding>
  <!-- page content -->
</q-page>

QPage Vue Properties

Style-fn

A QPage needs a QLayout, because QLayout controls all the offsets of a page, keeping account of the space that header/footer/drawer use, according to its view property configuration. By default, your QPage component will have a min-height CSS property set on it to ensure that the content fills the screen at all times, even when the content is just a few lines.

If you wish to tweak, or even remove this property, you can do so by using the style-fn property:

<template>
  <q-page :style-fn="myTweak">...</q-page>
</template>

<script>
export default {
  // ...
  methods: {
    myTweak (offset) {
      // "offset" is a Number (pixels) that refers to the total
      // height of header + footer that occupies on screen,
      // based on the QLayout "view" prop configuration

      // this is actually what the default style-fn does in Quasar
      return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
    }
  }
}
</script>