Could you change the Layout header slot from a child component?

  • Ok so this is something I have been thinking these past few days. Could you update a slot of the parent from inside a child?
    In my case I use the Quasar Layout component (as you should) and in one of my routes, I need to change the whole template of the slot. My route is something like this:

          path: '',
          meta: {
            auth: true
          component: load('Index'),
          children: [
              path: '/',
              component: load('Modules')
              name: 'environment',
              path: 'environment/:id',
              component: load('Environment')

    My index`s header slot is:

     <div slot="header" class="toolbar">
          <button class="left-drawer-opener" @click="$">
          <q-toolbar-title :padding="1">
            <div class="text-center">

    But my Environment’s header will need to have allot more than the title that is currently in it.

  • Admin


    Uh, there is so much to explain here. I’ll try to be short and to the point. Use a store or vuex to manage the state of the layout. Then, when you visit a certain route simply change the state. This way the layout will know what to display in the header.

  • Pretty much i was thinking of the same thing. vue-router-vuex sync could be used for this, to know on which route I am and stuff.

  • I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?

Log in to reply

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