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

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