Nuxt.jsで[Vue warn]: Failed to resolve component: v-calendar If this is a native custom element
今回はNuxt.js+Vuetifyを使用しているときに下記のようなwarningが起きたときの対処法についてご紹介していきます。
|
1 2 |
[Vue warn]: Failed to resolve component: v-calendar If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. |
Nuxt.jsのバージョンは3.11.2で、Vuetifyのバージョンは3.7.1です。
Nuxt.jsで[Vue warn]: Failed to resolve component: v-calendar If this is a native custom element
結論を言うと、Vutify3でv-calendarコンポーネントを使用するためには、vuetify.jsにVCalendarをインポートして定義する必要があります。
|
1 2 3 4 5 6 7 8 9 |
import * as components from 'vuetify/components'; import { VCalendar } from 'vuetify/labs/VCalendar' export default createVuetify({ components: { ...components, VCalendar, }, }) |
詳しくは下記のVuetifyの公式ドキュメントをご覧ください。
https://vuetifyjs.com/en/components/calendars/
これでv-calendarが解決できないというwaringは解消できると思います。
終わりに
今回はNuxt.js+Vuetifyを使用しているときに冒頭のようなwarningが起きたときの対処法についてご紹介いたしました。