[Vue warn]: Failed to resolve component: router-view

user_2769999 0
Viewed 2574

I'm a newbie to Vue.js and first time dealing with vue-router. Just created a few files and for some reason I don't get to see the template. Compiled successfully but in the browser I get the following error: Failed to resolve component: router-view

main.js

import { createApp } from 'vue';
import VueRouter from 'vue-router';
import { store } from './store';
import App from './App.vue';
import AuthHandler from './components/AuthHandler';

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/oauth2/callback', component: AuthHandler }
    ]
});

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

App.vue

<template>
  <div>
    <AppHeader></AppHeader>
    <router-view></router-view>
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader";
export default {
  name: "App",
  components: {
    AppHeader
  }
};
</script>

components/AuthHandler.vue

<template>
  <div>
    ... Please wait
  </div>
</template>

<script>
export default {
  name: "AuthHandler"
};
</script>

Here is the package.json

package.json

{
  "name": "images",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "lodash": "^4.17.21",
    "qs": "^6.10.1",
    "vue": "^3.0.0",
    "vue-router": "^3.5.2",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
vuejs3 vue.js
2 Answers

I resolved the problem in the following way. I believe the issue relay on the vue/vue-router versions. I hope this is the correct way :-)

main.js

import { createApp } from 'vue';
import App from './App.vue';
// import VueRouter from './vue-router';
import { createWebHistory, createRouter } from "vue-router";
import { store } from './store';
import AuthHandler from './components/AuthHandler';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/about', component: AuthHandler }
    ]
});

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
user_27699990

I was an idiot, I wanted to use 'vue add vue-router'. Of course it didn't work.

Vue add router

is the command.

npm install vue-router@4

only installs the package, won't add it to the app. If all is well, main.js should look like this:

import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Unfortunately they forgot to add it to the documentation...

user_74782260
Related