Vuetify multi-line tabs

Question

I am unsg Vuetify to create the layout for my web app. I am using a tabbed navigation at the top of the page and wish to get the desired effect

I have tried using various methods such as wrapping each line in divs, p tags and also tried using the typography tags such as and but the text always ends up on the same line.

Any ideas?

Here is my existing code:

<v-app-bar color="primary" dark app dense flat>
  <v-tabs>
    <v-tab>
      Ticket
    </v-tab>
    <v-tab>
      Ticket
    </v-tab>
    <v-tab :to="{ name: 'Tickets' }">
      Ticket
    </v-tab>
  </v-tabs>

  <v-spacer></v-spacer>
  <v-btn icon>
    <v-icon>mdi-magnify</v-icon>
  </v-btn>
</v-app-bar>

Here is something i've tried (omitted bits to make it shorter)

<v-tab>
      <body-2>Title</body-2>
      <caption>another line</caption>
    </v-tab>

Answer 1

Vuetify usually uses css flex to position the items. You most change the css flex attributes of the v-tab default slot. i am not sure if setting style on v-tab itself does the trick.