I can’t use Vue.use to use VueRouter

I have an issue with vue js , I want to use VueRouter to link 2 vue component, but it seems I have an issue with Vue.use, I have this error : enter image description here

I don’t think the problem is about VueRouter but more about vue import I’m kinda lost at this point

//This is my app.js

import Welcome from "./Jetstream/Welcome";

require('./bootstrap');
window.Vue = require('vue');
console.log(window.vue)

// Import modules...
import { createApp, h } from 'vue';
import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import Router from 'vue-router'

Vue.use(Router)

const router = new VueRouter({
    mode: 'history',
    routes:
        {
            path: '/student',
            name: 'student',
            component: Welcome
        },

});

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);
InertiaProgress.init({ color: '#4B5563' });
<template>
<div>Hello</div>
<!-- this is My vue component-->
<!-- i try use a simple method-->
    <a class="btn btn-primary" @click="truc"> Test</a>
<!--And this is what I swa on the documentation-->
    <router-link :to="{name: 'student'}">Student</router-link>

    <div>
        <router-view></router-view>
    </div>

</template>

<script>


export default {
    name: "Session.vue",

    methods:{
        truc(){
            this.$router.push('/student')
        }
    }

}

</script>

If you need more content tell me, thanks for your help

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
"devDependencies": {
    "@inertiajs/inertia": "^0.9.1",
    "@inertiajs/inertia-vue3": "^0.4.2",
    "@inertiajs/progress": "^0.2.5",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "axios": "^0.21.1",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^2.2.4",
    "vue": "^3.1.5",
    "vue-loader": "^16.1.2"
},
"dependencies": {
    "bootstrap": "^5.0.2",
    "bootstrap-icons": "^1.5.0",
    "bootstrap-vue": "^2.21.2",
    "vform": "^2.1.0",
    "vue-i18n": "^8.24.5"
}

}

this is my package.json

But I have this in my dependencies : enter image description here

My app.js is now like that : enter image description here

[3]: https://i.stack.imgur.com/xEbId.png

enter image description here

[1]: https://i.stack.imgur.com/dcPUU.png

Answer

I think you use Vue 3, not Vue 2. Because of that you should assign createApp(...) to a variable

let app = createApp(...)

Also you need to do:

import {createRouter} from 'vue-router'

and setup:

const router = createRouter(...)

Then you do

app.use(router)

See how it looks like in docs:

https://next.router.vuejs.org/guide/#javascript