Using layouts. How?

[mariaczi]

Could someone explain how quasar-layouts should be used?

1. Where should they be stored?
2. How to apply a layout to component?
3. If I have my SPA and I want to apply one common layout for the whole app, where should I place it?
4. Can I use v-if in layouts?

[Martin]

Here’s an example how I am using quasar-layout

I am using one root page which is my home page (index.vue).
From this root page, I’m jumping into the main entities of my app using a left side bar.
Here’s an example

my router .js is set up like this:

// HOME
'/': {
    component: load('index')
  },
// LIST VIEW
  '/skill/list': {
    component: load('skill/SkillList')
  },
// DETAIL VIEW
  '/skill/detail': {
    component: load('skill/SkillDetail'),
    }
  }
...

index.vue (home)

<template>
<quasar-layout>
  <!--HEADER -->
  <div slot="header"
      class="toolbar">
    <button class="left-drawer-opener">
      <i>menu</i>
    </button>
    <quasar-toolbar-title :padding="1">
      SkillDance
    </quasar-toolbar-title>
    <button>{{connected}}</button>
  </div>
  <!-- LEFT SIDE BAR (IMPORTED COMPONENT) -->
  <left-side-bar></left-side-bar>
<!-- NEXT IS VERY IMPORTANT TO UNDERSTAND. 
// I am using <div class="layout-view"> here. This means that when I jump to 'skill/list', 
I am actually switching from one quasar layout to another. In your case, you would want to use
 <router-view class="layout-view"></router-view> here,  which will make the user stay on index.vue,
and seeing 'skill/list' "embedded" in index.vue.  Of course depending on how you set up router.js
-->
  <div class="layout-view">
      <h1>Home (index.vue) </h1>
      <p> and any content I'd like to show here without using router-view</p>
  </div>
</quasar-layout>
</template>

LeftSideBar.vue (actually holds all the main navigation nodes )

<template>
<div>
  <quasar-drawer>
    <div class="toolbar">
      <sign-out-button></sign-out-button>
    </div>
    <div class="list platform-delimiter">
      <quasar-drawer-link v-link="{path: '/', exact: true}"
          class="title-color"
          icon="home">
        Home
      </quasar-drawer-link>
      <quasar-drawer-link v-link="{path: '/skill/list', exact: true}"
          class="title-color"
          icon="gps_fixed">
        Skills
      </quasar-drawer-link>
      <quasar-drawer-link v-link="{path: '/training/list', exact: true}"
          class="title-color"
          icon="linear_scale">
        Training Tracks
      </quasar-drawer-link>
      <quasar-drawer-link v-link="{path: '/user/account/profile', exact: true}"
          class="title-color"
          icon="account_circle">
        Account
      </quasar-drawer-link>
    </div>
  </quasar-drawer>
</div>
</template>

SkillList.vue (separate quasar layout)
As you can see I’m using exact the same page layout here as in index.vue (left drawer etc.)
In this case, in index.vue, I might as well could have chosen to use…
<router-view class=“layout-view”>
instead of…
<div class=“layout-view”>
I guess as a rule of thumb you could use <router-view> as long as the main page layout stays the same
in terms of components used (nav tabs, drawers, footer etc)
If you need a different layout setup for a particular page, create a new <quasar-layout> for it and make your router.js
jump to that page instead of showing it inside a <router-view>

<template>
<quasar-layout>
  <!--HEADER -->
  <div slot="header"
      class="toolbar">
    <button class="left-drawer-opener">
      <i>menu</i>
    </button>
    <quasar-toolbar-title>
      <div class="title">Skills</div>
    </quasar-toolbar-title>
  </div>
  <!-- LEFT SIDE DRAWER -->
  <left-side-bar></left-side-bar>
  <!--LAYOUT -->
  <div class="layout-view">
    <div class="list">
      <skill-card v-for="skill in skillList"
          :skill="skill"></skill-card>
    </div>
  </div>
</quasar-layout>
</template>

index.vue resides in ./src/components/index.vue
The rest of the file structure:

I haven’t tried v-if, but I see no reason why that wouldn’t work.
If you want to build v-ifs around tabs , drawers, footers etc, I would try different quasar layouts instead, unless it’s something trivial you need to do.
Hope this gets you on track.

[rstoenescu]

Excellent guide, Martin!

[mariaczi]

@Martin First of all, thank you for such a great effort!

1. It looks exactly the same as having one parent file with router-view inside, which is MUST BE when using router-view. What is the point then? @rstoenescu ?
2. @Martin said in Using layouts. How?:

If you need a different layout setup for a particular page, create a new <quasar-layout> for it and make your router.js
jump to that page instead of showing it inside a <router-view>

How? I haven’t seen that in vue-router docs anywhere.

3. Where is <div id="quasar-app" ?
4. How and where do you specify which component using which template?
5. Totally don’t understand how can I share one layout between components ?

EDIT: 1&2&3 - ok, got idea about layout component (I don’t know why I thought about it as something special, not component…) and subroutes. That’s clear. Sorry.

4 & 5 - still need answer as the only idea which I have is exactly sub-routes. Anything else how to share layouts between components ?

6. If I have subroutes, how can I change e.g. TOOLBAR TITLE when component’s changing in <router-view> ?

[rstoenescu]

4. If using <router-view> then you specify sub-routes / children in your Router config (/src/router.js) using component property
5. Using sub-routes… <router-view> gets replaced by Vue Router with your page’s component, but the Layout stays the same
6. Using Vuex or make a store of your own… you got Quasar Play with an example store. Please read http://quasar-framework.org/guide/components-sharing-state.html as a starting point.

[mariaczi]

Thank you.
Some parts I figured out last evening and night, but i is good you confirmed that I think right way. Thanks!

Not yet, but I promise that I will support you on Patreon!

[rstoenescu]

Every cent counts, unfortunately. I’m not in a good financial situation anymore. Invested all my money so I could work full time for the framework for a year and a few months, and bills keep piling up
Anyway, thank you for even thinking about it!