Vuetifyjs 3: how can I add element on Expansion Panels

Question

For embedding nested items in expansion panels previously I was using v-expansion-panel-content

<v-expansion-panel-content>
    Lorem ipsum
    <v-expansion-panels>
        <v-expansion-panel v-for="(item,i) in 2" :key="i">
        <v-expansion-panel-header> Item </v-expansion-panel-header>
        <v-expansion-panel-content> I'm nested ({{ i }}) </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</v-expansion-panel-content>

code: https://codepen.io/tony19/pen/zYRLBPx?editors=1010

But now I am using "vuetify": "^v3.1.2", and when I am trying to add <v-expansion-panel-content>, then getting failed to resolve component: v-expansion-panel-content

How can I achieve the same output in vuetify 3?

Answer 1

In Vuetify 3, you can use <v-expansion-panel-text> in place of <v-expansion-panel-content>.

For instance-

<v-expansion-panel>
  <v-expansion-panel-title>Title</v-expansion-panel-title>
  <v-expansion-panel-text>
    Some content
  </v-expansion-panel-text>
</v-expansion-panel>

If your content is basic text then you can instantly pass it using a text prop as well.

For instance-

<v-expansion-panel title="Title" text="Some content"></v-expansion-panel>

Read more about using expansion panels in Vuetify 3, here.