How to remove the transition effect from the VuetifyJS Vertical Stepper?

This worked for me:

.v-stepper__wrapper {
  transition:none !important;
}

Vuetify version 2.2.8

Mine worked with

.no-transition .v-stepper__content { transition: none; }

In case somebody didn’t succeed with @thanksd's answer.

It doesn't look like there is any provided option to change the transition effect in the Vue component itself.

But, you can disable it by setting the transition css property to none for the .stepper-content elements.

For example, you could create a no-transition class:

.no-transition .stepper__content { transition: none; }

And then add it to the <v-stepper> component tag:

<v-stepper v-model="e1" class="no-transition">
  ...
</v-stepper>

Here's a codepen with a working example.

1. Remove the Vuetify stepper transition:

   .v-stepper__content, .v-overlay { transition: none !important; }

2. Remove the Vuetify stepper transition only from stepper-header (which I was looking for). I added a class "stepper-body" to :

   .stepper-body { position: relative; }