How to disable swipe in VTabs component in Vuetify 3?

Question

I am using <v-tabs> component with a couple of tabs and want to disable the swipe functionality.

In Vuetify 2 this was done using the touchless prop on <v-tabs-items> but this option does not exist in Vuetify 3 as V3 no longer uses the <v-tabs-items> wrapper.

Is there another way I can disable this for the tabs or even the entire card or the window containing the tabs?

My code is as follows:

<v-card>
  <v-tabs v-model="twoTabs">
    <v-tab value="tab1">Tab One</v-tab>
    <v-tab value="tab2">Tab Two</v-tab>
  </v-tabs>
  <v-window v-model="twoTabs">
    <v-window-item value="tab1">
      <v-card>
        <v-card-text>Tab One Text</v-card-text>
      </v-card>
    </v-window-item>
    <v-window-item value="tab2">
      <v-card>
        <v-card-text>Tab Two Text</v-card-text>
      </v-card>
    </v-window-item>
  </v-window>
</v-card>

score 1 · Accepted Answer · answered Jun 21 '23 at 05:34

1

Just add prop disabled on v-window. See below example:

<v-window disabled v-model="twoTabs">
   ...
</v-window>

More info see the doc here.

answered Jun 21 '23 at 05:34

Cak Bud

190
2
9

Yes, this seems like the more elegant solution, thanks! – Lukas Rossa Jul 06 '23 at 07:58

score 0 · Answer 2 · answered Jun 16 '23 at 07:32

<v-window> provides as touch prop (see API doc) that takes a callback function. You can return false and the behavior will be the same as touchless, disabling the swipe action:

...
<v-window v-model="twoTabs" :touch="touchless()">
...
methods: {
  touchless() {
      return false;
  }
},

How to disable swipe in VTabs component in Vuetify 3?

2 Answers2