how to hide tab-bar on certain pages (routes)

  • I’m using a q-layout with a slot=footer to contain a tabbar.
    what’s the best way to hide this tab-bar on certain pages of my app?

    eg I want a couple of pages to be full-screen content and so remove the tab bar.

    The complication is that the layout is part of the main App instance whereas the view is a nested child component. So having a dataflow upward to control the master layout from a child, seems a bit of a messy approach.


  • hi @dcsan . first of all import layoutStore and then add layoutStore to your data.
    finaly add layoutStore.hideTabs = false on that page where you don’t want the tab bar .

  • Thanks for the reply!

    hmm interesting. I can’t find any documentation for layoutStore on the quasar site or even google.

    Do you mean using vuex for state management and you were using store in the generic sense?

    Also: add layoutStore to your data - not clear what this means. could you explain

    can you provide any more info?

    I was also looking at the event bus to signal the main layout to hide its tabs…

Log in to reply