Layout

The QLayout is a component designed to manage the entire window and wrap page content with elements such as a navigational bar or a drawer. Multiple pages can share the same QLayout, so the code is reusable, which is one of their key points.

QLayout is NOT mandatory, but it does help you to better structure your website/app. It has a number of features which offer you major benefits in simplifying your website/app’s layout design, right out of the box.

Installation

In the card below we’re installing all Quasar components related to a QLayout, but you should cherry-pick only what you are using from this list. Only QLayout is required.


// quasar.conf.js

return {
  framework: {
    components: [
      'QLayout',
      'QPageContainer',
      'QPage',
      'QHeader',
      'QFooter',
      'QDrawer',
      'QPageSticky',
      'QPageScroller'
    ]
  }
}

Layout Builder

Scaffold your layout(s) by clicking on the button below.

WARNING

The Layout Builder might use components not already inserted into quasar.conf.js.

You are likely going to need the following components - QLayout, QHeader, QToolbar, QToolbarTitle, QBtn, QAvatar, QTabs, QRouteTab, QDrawer, QPageContainer, QFooter.

TIP

Keep an eye on your developer console for handy helpers on which components are being used but not declared in your quasar.conf.js file.

Layout Builder

Usage

Using margin CSS will break the layout

QLayout depends on taking up the whole screen and so QPageContainer, QHeader, QFooter and QLayoutDrawer positions are managed by it (through the view prop). You cannot use CSS margins as a style neither on QLayout itself nor on any of the QLayout components mentioned above. However you can safely use CSS padding.

TIP

If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue’s <router-view /> component, which is just a placeholder where sub-routes are injected. For more information, please read Routing with Layouts and Pages.

Understanding the “view” prop

Quasar introduces a unique and excellent layout concept, which allows you to easily structure layouts to work in certain ways, by simply changing a short string notation.

To explain how this works, imagine your Layout is a 3x3 matrix of containers (depicted in blue below). The first row of containers would be the header and the last row would be the footer. The first column of containers would be the “left” and last column would be the “right”. The center of the matrix, below the header and above the footer, would be the page or main content container.

This matrix of containers or “QLayout View” can be represented by a string that you should supply to view property of QLayout. This string must contain exactly 11 characters:

  • 3 defining the header row
  • then a space
  • 3 defining the middle row
  • a space
  • then 3 defining the footer row
Header
l/h
h/H
r/h
l/L
p
r/R
Footer
l/f
f/F
r/f
Left
Right

The letters shown above are also case sensitive. For example, using at least one “L” (uppercase character instead of lowercase) will make your layout left side (drawer) be in a fixed position. Same applies for “H” (header), “F” (footer) and finally “R” (right side / drawer).

l
h
h
H
r
h
l
L
p
r
R
l
f
f
F
r
f
View:
hHh Lpr fFf

For example, if you want your layout’s right side / drawer to be placed on the right of the header, page and footer, you’d use hhr lpr ffr. If you’d like to also make it fixed, just transform one r character to uppercase, like this: hhr lpR ffr, or hhr lpR ffr or hhr lpR ffr.

These settings are completely up to you to use as you’d like. You could even go wild with a setup like this: lhh LpR ffr. Try it out!

Layout Builder

WARNING

It is important that you specify all sections of a QLayout, even if you don’t use them. For example, even if you don’t use footer or right side drawer, still specify them within your QLayout’s view prop.

Containerized QLayout

By default, QLayout is managing the entire window. However, you can also use QLayout as a container (with specific height and width) to isolate it somewhere in your pages.

WARNING

Not supported in IE11.

WARNING

Please note that it requires a CSS height (or min-height) being set explicitly, otherwise it can’t and it won’t work.

In the example below, there is a containerized QLayout with drawers on each side (breakpoint of 700px on the left-side drawer and 500px on the right-side drawer). The breakpoint does not refer to the window width, but to the actual width of the QLayout container.

Containerized QLayout



In a QDialog



QLayout API