Use separate components in QLayout

[jctrebalag]

Hi all,

When using QLayout component it works well when I put the child components like in the doc :

<q-layout ref="layout" view="hHr LpR lFf" :right-breakpoint="1100">
  <!-- Header -->
  <q-toolbar slot="header">
    <q-btn flat @click="$refs.layout.toggleLeft()">
      <q-icon name="menu" />
    </q-btn>
    <q-toolbar-title>
      Layout Header
      <span slot="subtitle">Optional subtitle</span>
    </q-toolbar-title>
    <q-btn flat @click="$refs.layout.toggleRight()">
      <q-icon name="menu" />
    </q-btn>
  </q-toolbar>
  <!-- Navigation -->
  <q-tabs slot="navigation">
     <q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
    <q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
  </q-tabs>

  <!-- sub-routes get injected here: -->
  <router-view />
  <!-- Footer -->
  <q-toolbar slot="footer">
    <q-toolbar-title>
      Layout Footer
    </q-toolbar-title>
  </q-toolbar>
</q-layout>

However if I want to separate these child components into their own component file (make a header.vue for header, then import it to use it in QLayout and so on for the footer,…) to make my code a little clearer , the slot attribute of each individual component (e.g. q-toolbar slot=“footer”) is not taken into account.

Any ideas on how to solve this ?

Thanks in advance

[arjanski]

Having component files for header, footer etc. works for me when using them inside a div tag that has the respective slot name (slot="header).

Like so:
<q-toolbar slot="header" color="white" class="navbar"> <navbar-desktop></navbar-desktop> </q-toolbar>

Did you try it this way already?

[jctrebalag]

Ok I got it ! Thank you very much ! I was trying to use the slot attribute in each separate component :dumb ^^