Vuetifyの未宣言エラー Error in beforeCreate hook: "Error: Vuetify is not properly initialized ～～

エラーメッセージ

[Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object"

他にもこんなメッセージが出てました。

[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read properties of undefined (reading 'dark')"
TypeError: Cannot read properties of undefined (reading 'dark')
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'dark')"

環境

・windows11
・node.js : v16.16.0
・@vue@2.7.9
・@vue/cli-service@5.0.8
・@vuetify@2.6.9

解決法

以下の通りにmain.jsにVuerifyの宣言を追加したところエラーが解消しました。

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
+import Vuetify from 'vuetify'

Vue.config.productionTip = false
+Vue.use(Vuetify)

new Vue({
  router,
+  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

参考記事