Unknown custom element <v-expansion-panels>?

Question

I am using the latest version of Vuetify, npm info vuetify : vuetify@2.0.15

Certain elements (for example v-timeline) are able to display well, but I am unable to use v-expansion-panels even with the latest version:

<template>
  <v-container>
    <v-expansion-panels>
      <v-expansion-panel v-for="(item,i) in 5" :key="i">
        <v-expansion-panel-header>Item</v-expansion-panel-header>
        <v-expansion-panel-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  <v-container>
<template>

What could be the issue here?

Answer 1

It seems you have a version mismatch, using Vuetify 1.5.x with v-extension-panels 2.x (like in this demo), which would result in an error similar to this:

[Vue warn]: Unknown custom element: <v-expansion-panels> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The solution is to either downgrade the component to 1.5.x, or upgrade Vuetify to 2.0.x. The following VExpansionPanel-specific details might help you convert the code.

Pseudo-element hierarchy (common):

 + parent container
 |___+ item container 1
 |   |___ item header
 |   |___ item content
 |
 |---+ item container 2
 |   |___ item header
 |   |___ item content
 ⋮
 |___+ item container N
     |___ item header
     |___ item content

VExpansionPanel differences:

                 ‖             1.5.x                  |          2.0.x
=======================================================================================
parent container ‖  <v-expansion-panel>               | <v-expansion-panels> (plural)
item container   ‖  <v-expansion-panel-content>       | <v-expansion-panel>
item header      ‖  <template v-slot:header>          | <v-expansion-panel-header>
item content     ‖  *default slot of item container*  | <v-expansion-panel-content>

Template examples:

<!-- 1.5.x -->
<template>
  <v-expansion-panel>
    <v-expansion-panel-content
      v-for="(item,i) in 5"
      :key="i"
    >
      <template v-slot:header>
        <div>Item</div>
      </template>
      <v-card>
        <v-card-text>
          Lorem ipsum ...
        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

1.5.x demo

<!-- 2.0.x -->
<template>
  <v-expansion-panels>
    <v-expansion-panel
      v-for="(item,i) in 5"
      :key="i"
    >
      <v-expansion-panel-header>
        Item
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        Lorem ipsum ...
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

2.0.x demo