エラーメッセージ

Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

他にも同様のメッセージが

Unknown custom element: <v-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: <v-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: <v-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

原因・解決方法模索中。。
解決次第追記します。

（2022/10/27追記　解決方法は下の方へ記載！）

環境情報

環境情報

・npm -v
8.11.0
・vue -V
@vue/cli 5.0.8
・node -v
v16.16.0
・npm list
├── @types/fabric@4.5.11
├── @vue/cli-plugin-eslint@5.0.8
├── @vue/cli-plugin-router@5.0.8
├── @vue/cli-service@5.0.8
├── deepmerge@4.2.2
├── eslint-plugin-vue@8.7.1
├── eslint@7.32.0
├── fabric@5.2.1
├── sass-loader@13.0.2
├── sass@1.32.13
├── vue-router@3.6.5
├── vue-template-compiler@2.7.9
├── vue@2.7.9
└── vuetify@2.6.9

ソース

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: function () {
  //     return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  //   }
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

app.vue

<template>
<div id="app">
  <v-app>
    <v-navigation-drawer>
      サイドメニュー
    </v-navigation-drawer>

    <v-app-bar app>
      アプリケーションバー
    </v-app-bar>

    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</div>

</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

参考にしている記事

Vuetify公式で参考になりそうなものを発見!

どうやら vue-cli-plugin-vuetify と vuetify-loader　が存在しないことが原因っぽい。
早速package.jsonの中身を確認

package.json

{
  "name": "vue-router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "fabric": "^5.2.1",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5",
    "vuetify": "^2.6.9"
  },
  "devDependencies": {
    "@types/fabric": "^4.5.11",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "deepmerge": "^4.2.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.7.1",
    "sass": "~1.32",
    "sass-loader": "^13.0.2",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "vue/no-unused-components": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vue-cli-plugin-vuetify と vuetify-loader　がないのでインストール

npm install vue-cli-plugin-vuetify
npm install vuetify-loader

インストール後のpacakage.json

pacakage.json

{
  "name": "vue-router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "fabric": "^5.2.1",
    "vue": "^2.6.14",
+    "vue-cli-plugin-vuetify": "^2.5.8",
    "vue-router": "^3.6.5",
    "vuetify": "^2.6.9",
+    "vuetify-loader": "^1.9.2"
  },
  "devDependencies": {
    "@types/fabric": "^4.5.11",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "deepmerge": "^4.2.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.7.1",
    "sass": "~1.32",
    "sass-loader": "^13.0.2",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "vue/no-unused-components": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Unknown custom element: ～～のエラーは無事解消！！

がしかしまた別のエラーが発生。。。
今度のエラーは以下の通り。
こちらは別記事で解決していこうと思います。

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

別記事のリンク
・未投稿