Nuxt3+Vuetify環境で[Vue warn]: Failed to resolve component: v-list-item-content
今回はNuxt3+Vuetify環境で下記のようなwarningが出たときの対処法についてご紹介していきます。
|
1 2 3 4 5 6 7 8 |
default.vue:260 [Vue warn]: Failed to resolve component: v-list-item-content 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-content
結論から言うとVuetify3ではVeutify2で使われていたv-list-item-contentは廃止になっております。
Vuetify3ではv-list-item-contentを使う代わりにv-list-itemの直下に配置することが必要です。
例えば、下記のようなsample1.vueになっている場合は、sample2.vueに修正しましょう。
・sample1.vue
|
1 2 3 4 5 6 |
<v-list-item> <v-list-item-content> <v-list-item-title>Title</v-list-item-title> <v-list-item-subtitle>Subtitle</v-list-item-subtitle> </v-list-item-content> </v-list-item> |
・sample2.vue
|
1 2 3 4 |
<v-list-item> <v-list-item-title>Title</v-list-item-title> <v-list-item-subtitle>Subtitle</v-list-item-subtitle> </v-list-item> |
終わりに
今回はNuxt3+Vuetify環境で冒頭のようなwarningが出たときの対処法についてご紹介いたしました。