Nuxtを使っていて、vuetifyのコンポーネントが読み込まれないエラーに少しハマったので、メモがてらに書きます。
環境
・macOS Catalina バージョン10.15.5
・node v14.3.0
・npm 6.14.6
・Nuxt v2.13.3
エラー文
Unknown custom element: <v-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
自分で作成したコンポーネントならまだわかるが、vuetifyが用意してくれてるコンポーネントが何で読み込まれないのか不思議でした。
綴りも何回も確認しました。
他にも<v-list-item>などvuetifyで用意してくれているコンポーネントが一部読み込まれないようです。
結論
package.jsonを確認すると、
package.json
"@nuxtjs/vuetify": "0.5.5"
// 他は割愛
バージョンが古いことがわかりました。
これが原因でした。
インストールできない問題
@nuxt.js/vuetifyの新しいバージョンをインストールしようとすると、インストール時にエラーが出て、インストールできない問題にぶつかりました。
gyp: No Xcode or CLT version detected!
「参考記事」に記載してある2つの記事を参考に以下を行うとインストールができるようになりました。
$ rm -rf $(xcode-select -print-path)
$ rm -rf /Library/Developer/CommandLineTools
$ xcode-select --install
筆者の方ありがとうございます。助かりました。
最後に
vuetifyのコンポーネントがないと言われるときはまずバージョンを確認する
といいですね。って当たり前でしたが、他のコンポーネントは使えていて、なかなか原因がわからなかったので備忘録的に書きました。
同じようなエラーにハマっている方の助けになれば幸いです。
参考記事