Ошибка Vue routing

Пытаюсь разобраться во Vue3 после React, делал Todo. Разбираясь с роутингом, возникла такая ошибка:
В корне проекта есть файл router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home'
import Todos from './views/Todos'

Vue.use(Router)

export default new Router({
    mode: 'history', // slash symbols in the passes
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/todos',
            component: Todos
        }
    ]
})

В шаблоне App.vue использую тег <router-view />:

<template>
  <div id="app">
    <h1>Todo application</h1>
    <hr>
    <router-view />
  </div>
</template>

Ну и собственно инициализирую роутер в main.js:

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

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

Данный код вызывает у меня ошибку: TypeError: undefined is not an object (evaluating 'vue__WEBPACK_IMPORTED_MODULE_0__["default"].use')
На сколько я понимаю, ошибку вызывает строка Vue.use(Router) в файле router.js, но я не совсем понимаю ее суть. Может, я использую синтаксис Vue2 во Vue3? Был бы благодарен услышать объяснение