<router-view> not working even though its connected-CodePudding

I am a newbie when it comes to vue. So I followed this tutorial https://www.youtube.com/watch?v=WLQDpY7lOLg&ab_channel=TheCodeholic . In which I am in the "adding view router" section.

I did what all the changes and add on's he made (from creating the views folder & components and creating the router folder and its inside index.js and even the imports) yet when I try to npm run dev, there is nothing on my website.

here is my code from the router folder:

import {createRouter , createWebHistory} from 'vue-router'
import Dashboard from "../views/Dashboard.vue"
import Login from "../views/Login.vue"
import Register from "../views/Register.vue"

const routes = [
    {
        path: '/',
        name: 'Dashboard',
        component: Dashboard
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
  });

export default router;

a code from my views/Dashboard.vue

<template>

<h1> Dashboard </h1>

</template>

<script>
    export default {
        name: 'Dashboard'
    }
</script>

<style scoped>

</style>

and from my main.js

import { createApp } from 'vue'
import './style.css'
import store from './store'
import router from './router'
import './index.css'
import App from './App.vue'


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

Here is a photo of when I run npm run dev enter image description here

I can't seem to see what is wrong even though I checked up multiple times. Please help :<

here is what I expected to actually happen

enter image description here

CodePudding user response：

Error looks to be here

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

mount() should go last. From the Vue docs:

The .mount() method should always be called after all app configurations and asset registrations are done.

You can also optionally chain everything together like so:

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

Which if you're using typescript, can then actually catch your error in your IDE beforehand