Nuxt3+Vuetify環境で[Vue warn]: Failed to resolve component: v-list-item-group
今回はNuxt.js+Vuetifyの環境で下記のようなwarningが起きたときの対処法についてご紹介していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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」を別のコンポーネントなどで代替することが必要となるでしょう。
終わりに
今回はNuxt.js+Vuetifyの環境で冒頭のようなwarningが起きたときの対処法についてご紹介いたしました。