Vue router doesn't load with create-vue@3

i was trying out the vue router but i'm not getting the expected result.

I'm following the https://router.vuejs.org/guide/ tutorial, if i use the CDN and put it in a unique HTML file it works, but if i try in this way it doesn´t:

Steps to reproduce:

run npm create vue@3
Configuration:
- Project name: … vue-project
- Add TypeScript? Yes
- Add JSX Support? Yes
- Add Vue Router for Single Page Application development? Yes
- Add Pinia for state management? … No
- Add Vitest for Unit Testing? … No
- Add an End-to-End Testing Solution? › No
- Add ESLint for code quality? … No
install all dependencies
Change src/main.ts to

import * as Vue from 'vue'
import * as VueRouter from 'vue-router'

// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
//   { path: '/smm', component: About },
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

Change index.html to

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>

<div id="app">

    <h1>Hello App!</h1>
    <p>
      <!-- use the router-link component for navigation. -->
      <!-- specify the link by passing the `to` prop. -->
      <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
</div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

- run `yarn start`

Vue and vue-router versions:

  "dependencies": {
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },

Solution

Vue should be injected into index.html. Move everything inside the <div id="app"> into a .vue SFC file

index.html

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>

App.vue

<template>
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</template>

<script setup></script>

then import this component into main.ts and set it as the root component with createApp()

main.ts

import App from './App.vue'
import { createApp } from 'vue'
.
.
.
const app = createApp(App)
app.use(router)

app.mount('#app')