Tab Panels

Tab panels are a way of displaying more information using less window real estate.


Works great along with QTabs but it is not required to be used with it.


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [



Works great along with QTabs, a component which offers a nice way to select the active tab panel to display.


Do not be mistaken by the “QTabPanels” component name. Panels do not require QTabs. They can be used as standalone too.


Please take notice of the Boolean keep-alive prop for QTabPanels, if you need this behavior. Do NOT use Vue’s native <keep-alive> component over QTabPanel.



QTabPanels can be used as standalone too. They do not depend on the presence of a QTabs. Also, they can be placed anywhere within a page, not just near QTabs.

With QTabs


For a full list of transitions, please check out Transitions.

Custom transition examples

In the example below, use your mouse to swipe through the panels or, if on a touch capable device, swipe with your fingers.

Swipeable and infinite

QTabPanels API

QTabPanel API