Problem with vue-route, nothing works, what could be the problem?

Question

Vue.js

I am using Vue3. I installed vue-router, did everything according to the guides, but for some reason similar errors come out in the browser console.

[Vue warn]: A plugin must either be a function or an object with an "install" function.

Failed to resolve component: router-link at <App>

Such a structure of folders and files:


Naturally, when clicked, the displayed router-links do not work, and when hovered with the mouse, they do not behave like a link.
Here is the code from App.vue

<template>
  <div id="app">
    <h1>Title</h1>
    <router-link to="/">Home</router-link> |
    <router-link to="/todos">About</router-link>
    <router-view/>
  </div>
</template>

Here is the code from router.js :

import VueRouter from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'


export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '',
            component: Home,
        },
        {
            path: '/about',
            component: About,
        }
    ]
})

Here is the code from main.js :

import { createApp } from 'vue'
import App from './App.vue'
 import router from './router'

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

Help, who can, please. I sit all day and rack my brains, the problem is in some trifle that I either can’t notice or don’t understand yet

Answer 1

Why do you stubbornly refuse to open the documentation ?