Using layouts. How?



  • 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?


  • 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:
    0_1477932427047_upload-6ddeb082-27fd-4464-9f0d-77de6a69041e

    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.


  • Admin

    Excellent guide, Martin!



  • @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.

    1. Where is <div id="quasar-app" ?
    2. How and where do you specify which component using which template?
    3. 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 ?

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

  • Admin

    1. If using <router-view> then you specify sub-routes / children in your Router config (/src/router.js) using component property
    2. Using sub-routes… <router-view> gets replaced by Vue Router with your page’s component, but the Layout stays the same
    3. 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.


  • 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!


  • Admin

    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!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.