vue js - Cannot read property 'use' of undefined - vue.js

Question

I'm using vue js 3, but im taking this error. I try to use router.
my main.js file is in here:
import { createApp } from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' // i added this
import Vue from 'vue'; // and this
Vue.use(VueRouter); // and this
createApp(App).mount('#app')
my package.json file is in here:
{
"name": "router",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^3.5.1"
},
"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"
]
}
Where am i wrong? The error message is:
Uncaught TypeError: Cannot read property 'use' of undefined
If you help me i will be glad.

Answer 1

First you've to follow my answer here to install the correct version of vue router,
then you should use the correct syntax of vue-router 4 which is compatible with vue 3 :
import { createApp } from 'vue'
import App from './App.vue'
import {createRouter, createWebHistory} from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home,//shsould be imported
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
createApp(App).use(router).mount('#app')