Nuxt3+Vuetify環境で[Vue warn]: Failed to resolve component: v-list-item-group

2024年9月10日2024年9月30日

今回はNuxt.js+Vuetifyの環境で下記のようなwarningが起きたときの対処法についてご紹介していきます。

test.vue:256 [Vue warn]: Failed to resolve component: v-list-item-group
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= 
{ref: RefImpl}
 name="default" > 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>

test.vue:256 [Vue warn]: Failed to resolve component: v-list-item-group

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

at <Default ref=Ref< undefined > >

at <LayoutLoader key="default" layoutProps=

{ref: RefImpl}

name="default" >

at <NuxtLayoutProvider layoutProps=

{ref: RefImpl}

key="default" name="default" ... >

at <NuxtLayout>

at <App key=4 >

at <NuxtRoot>

Nuxt.jsのバージョンは3.11.2で、Vuetifyのバージョンは3.7.1です。

Nuxt3+Vuetify環境で[Vue warn]: Failed to resolve component: v-list-item-group

Vuetify3を使用していると、画面に正常に描画されず、コンソールを見てみると冒頭のようなwarningが出ていました。

結論を言うと、Vuetify2系とVuetify3系の公式ドキュメントを見ていただけると分かりますが、Vuetify2であった「v-list-item-group」がVuetify3では廃止になっていることが原因です。

Vuetify2.7.1のドキュメント(日本語)
https://v2.vuetifyjs.com/ja/components/lists/#slots

Vuetify3.7.1のドキュメント
https://vuetifyjs.com/en/components/lists/#api

よって、Vuetify3では今まで使っていた「v-list-item-group」を別のコンポーネントなどで代替することが必要となるでしょう。

代替の仕方について、Vuetify3のアップグレードガイドには下記のように記載されております。

v-list-item-group has been removed, assign the item’s key to the value prop of each v-list-item and bind v-model:selected on the v-list to get the selected value.

・Vuetify3 アップグレードガイド
https://vuetifyjs.com/ja/getting-started/upgrade-guide/#v-form