When using the v-stepper component in Vuetify, there is a default border like shape that appears on the edges:

I want to remove it. I tried to set the elevation to 0 but it did not work.

<v-stepper v-model="e1" class="elevation-{0}">

Codepen

How to achieve this?

When using the v-stepper component in Vuetify, there is a default border like shape that appears on the edges:

I want to remove it. I tried to set the elevation to 0 but it did not work.

<v-stepper v-model="e1" class="elevation-{0}">

Codepen

How to achieve this?

• javascript
• vue.js
• vuetify.js
• v-stepper

4 Answers 4

Not elevation-{0}, but elevation-0.
Elevation docs:

You can set an element's elevation by using the class elevation-{n}, where n is a integer between 0-24 corresponding to the desired elevation.

So actually you need to remove parentheses as well.
Should be clear because you can't use parentheses in class names as far as I know.

just put the following

<v-stepper v-model="e1" class="elevation-0">

Adding some CSS works (at least w/ your pen):

.v-stepper__header {
  box-shadow: none;
} 

<v-stepper v-model="e1" flat> for removing round edges and

.v-stepper__header {
  box-shadow: none;
}

to remove header shadow