Upgrade toQuasar v2and use Vue.js 3
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.

QTabPanels API

QTabPanel API



  • Works great along with QTabs, a component which offers a nice way to select the active tab panel to display.
  • If the QTabpanel content also has images and you want to use swipe actions to navigate, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.


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

Keep Alive

  • 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.
  • Should you need the keep-alive-include or keep-alive-exclude props then the QTabPanel names must be valid Vue component names (no spaces allowed, don’t start with a number etc).


With QTabs


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 vertical QTabs and QSplitter

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

Custom transitions

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

Vertical swipeable and infinite