Use separate components in QLayout

  • 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" />
          Layout Header
          <span slot="subtitle">Optional subtitle</span>
        <q-btn flat @click="$refs.layout.toggleRight()">
          <q-icon name="menu" />
      <!-- 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" />
      <!-- sub-routes get injected here: -->
      <router-view />
      <!-- Footer -->
      <q-toolbar slot="footer">
          Layout Footer

    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

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

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

Log in to reply