Vuetify v-app-bar-title component is truncated with plenty of room to spare

try with this

 <v-app-bar-title class="text-no-wrap">{{ title }}</v-app-bar-title>

vue.js vue-component vuetify.js

I found a solution that seemed to work in case it is useful:

<style>.v-app-bar-title__content{  width: 200px !important;}</style>

vue.js vue-component vuetify.js

Great question. Could you share the code of your app-bar component, so we can have a look?

Update:

Is your v-app-bar-title directly in the v-app-bar?

Possible fix, I have never had to change flex-grow on Vuetify components. Have you tried removing the flex-grow?

Additionally you could try in your css title class:

  text-overflow: clip;  overflow: visible;

CodeHunter