Vuetify tabs, getting all tab bodies to be populated in html dom on v-tab construction

Question

I have a set of Vuetify tabs. My problem is that I need the tab contents to be built at the same time that the tabset is created.

When I view the HTML for the page in devtools, I see that the tab body for the default tab shows up, but the other tabs have empty bodies until the tabs are selected.

(And FWIW, after the tab is selected, the tab body persists -- it's not deleted).

I have other components on my page that are generating content that gets inserted into the tab bodies. So if the tab bodies don't exists, the content can't be inserted.

Sample code:

<v-tabs
  background-color="transparent"
  color="basil"
  grow
>
  <v-tab>Tab 1</v-tab>
  <v-tab>Tab 2</v-tab>
  <v-tab>Tab 3</v-tab>

  <v-tab-item>
    <v-card flat color="basil">
      <v-card-text>
        First tab contents
      </v-card-text>
    </v-card>
  </v-tab-item>
  <v-tab-item>
    <v-card flat color="basil">
      <v-card-text>
        Second tab contents
      </v-card-text>
    </v-card>
  </v-tab-item>

  <v-tab-item>
    <v-card flat color="basil">
      <v-card-text>
        Third tab contents
      </v-card-text>
    </v-card>
  </v-tab-item>

</v-tabs>

Quick screenshot of devtools showing tab bodies haven't been loaded for tabs 2 and 3.

Answer 1

Starting with vuetify 2, you have to explicitly tell the tab to load its content on mount using the eager property.

<v-tab-item :eager="true">
    First Tab
<v-tab-item>