I'm using the v-app-bar label for my header and I want the shadow of the element to be lighter since it looks too prominent. I'm unable to apply box-shadow attribute to the v-app-bar element.
should I do?
You can use component prop called elevation. Look into the app bar docs into API section (https://vuetifyjs.com/en/components/app-bars/#api) and select PROPS tab you can see elevation prop.
You can use builtin elevation classes. You can read more about them here: https://vuetifyjs.com/en/styles/elevation/
Vuetify allows you to customize sass styles. If you go here: https://vuetifyjs.com/en/components/app-bars/#api and select SASS tab you can see that they provide some variables which you can edit.
One of them is elevation which is responsible for box-shadow.
Of course to do so you need to have vuetify installed as a vue-cli plugin or in a we pack environment as you can read here: https://vuetifyjs.com/en/customization/sass-variables/
You can apply css directly but not to the v-app-bar because it's only vuetify component name which then gets generated into HTML. You can inspect your page using e.g. chrome dev tools and see what structure app bar has and then apply css styles to the right element.