vue.js I'm having an issue configuring vue router

I’ve tried to follow the many examples on the internet but am clearly missing something. I have installed the vue-router package at version 4.4.5.

This is my project structure:

In my index.ts file I have:

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: AboutView }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

my MenuComponent has:

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about"> About</router-link>
  </nav>
 
</template>

<script lang="ts">
  
  export default {
    name: 'MenuComponent'
  };
</script>

<style>
  .router-link-active {
    font-weight: bold;
  }
</style>

and in App.vue I have:

<script setup lang="ts">
  import { RouterLink, RouterView } from 'vue-router';

  import MenuComponent from './components/MenuComponent.vue';
  
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <MenuComponent />
    
  </header>

 <router-view />
</template>

my main.ts file is:

import './assets/main.css'

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

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

now when I run the app the page loads, but when I click on one of the links I am not redirected to the page. In the developer tools it shows the following errors and I cannot see what I have done wrong:

>Solution :

You haven’t registered the router. See registering the router plugin section in docs.

in main.ts:

import router from '@/router' // 👈

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

From docs:

If you’re curious about what this plugin does, some of its responsibilities include:

• Globally registering the RouterView and RouterLink components.
• Adding the global $router and $route properties.
• Enabling the useRouter() and useRoute() composables.
• Triggering the router to resolve the initial route.