Layouts are the elements that wrap page content, like navigational bar or drawer. Multiple pages can share the same Layout, which is one of the main reason for their existence.
A Layout is constructed by
<q-layout> Component. It is mandatory unless you really know what you are doing.
An example of Layout, containing all possible elements: toolbars (used on header and footer), navigational tabs, a drawer on the left side (which is shown alongside page content on wide screens) and a drawer on the right side (which is always hidden regardless of the screen width and can only be activated by swiping it into view or by clicking a button):
Make sure that your Layout template DOM elements are wrapped by one (and only one) DOM element, like for example
<q-layout>. Do not add more than one DOM element at the highest hierarchical level of your Layout template.
If your layout uses subRoutes, then it makes sense to use
<router-view>component (but with
layout-viewCSS class). Else use whatever element you want, as long as you also specify
<q-layout>Component uses the following slots:
navigation. You can specify your content for these slots with the
slot="footer".<div slot="footer">...Your Content...</div>
Note that you can use define multiple headers, footers and navigation elements. Specify
slot="footer"multiple times if you need. The order in which you specify these DOM elements matter.
navigationslot will be placed after header and before page view on Material Design theme, and after page view and before footer on iOS theme.
The place where the App pages’ content goes on the Layout is the one having
layout-viewCSS class. If you want your page content to have margins and padding calculated automatically (responsive) use CSS class
layout-padding:<div class="layout-view"><div class="layout-padding">...page content...</div></div>
<router-view>:<!-- in the Layout: --><router-view class="layout-view"></router-view><!-- in each page --><div> <!-- root node required for subRoutes --><div class="layout-padding">...page content...</div><!--You can have as many <div>s with"layout-padding" CSS class as you want--><!--Also, anything placed outside of these <div>s with "layout-padding"(so direct children of the root node) will have width 100% of yourpage view--></div>
The reason why each subRoute template needs a root node is that
<router-view>component gets replaced with DOM elements of the subRoute template. If you
have more than one node, Vue will treat this as a Document Fragment and
layout-viewCSS class, which is required.
The order of inclusion of the drawers and
layout-viewclassed DOM element matters on a desktop view (and even on wide screen tablets) where if the window is wide enough, drawers are displayed side by side with layout view content. For example, you can actually decide that your left-side drawer should be displayed on the right-side of your page content on a wide window by manipulating the order of
components:<q-layout>...<router-view class="layout-view"></router-view><q-drawer>...Drawer Content...</q-drawer>
A great place to use Toolbars is for header and footer slots.<div slot="header" class="toolbar">... toolbar content ...</div>
You can create Modals with Layout templates for great effect. Read about Modals.
You can make navigation Tabs work great with Vue Router if you register the routes correctly and specify
v-linkdirective on each Tab. Read more about Tabs here.
Example of placing a Search bar on header:<q-layout>...<div slot="header" class="toolbar primary"><q-search v-model="searchModel" class="primary"></q-search></div>...</q-layout>