Why isn't `RouterView` rendering any components?

All components/screens render correctly if I insert them in the HTML manually, and the URL changes with no errors, but no content is shown in <RouterView>. Thank you.

main.ts

import { createApp, VueElement } from 'vue';
import {router} from './data/router';
import AppWidget from './widgets/app.vue';
import * as types from './data/types';

globalThis.__VUE_OPTIONS_API__ = (process.env.NODE_ENV === "development") as unknown as string;
globalThis.__VUE_PROD_DEVTOOLS__ = (process.env.NODE_ENV === "development") as unknown as string;

const app = createApp(AppWidget);
app.use(router);
const root = app.mount(`.app`);

router.ts

import { createRouter, createWebHistory } from 'vue-router';
import * as constants from './settings';
import Home from '../widgets/home.vue';
import JournalScreen from '../widgets/journal/journalScreen.vue';

export const router = createRouter(
{
	history: createWebHistory(),
	routes:
	[
		{ path: '/',                                    name: 'home',                               component: Home },
		{ path: '/journal',                             name: 'journal',                            component: JournalScreen }
	]
});

app.vue

<!-- JS ----------------------------------------------------->
<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router';
import {router} from '../data/router';
import JournalScreen from './journal/journalScreen.vue';

router.push('/journal');

</script>

<!-- HTML ----------------------------------------------------->
<template>  
    <RouterView >       
    </RouterView>
</template>

journal.vue

<!-- JS ----------------------------------------------------->
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
import * as types from '../../data/types';
import * as helper from '../../logic/helper';
import {state} from '../../data/state';
import JournalEntry from './journalEntry.vue';
import SignIn from '../io/dropboxSignin.vue';
import SaveToCloud from '../io/save.vue';

function mounted() {console.log('here');} //does not fire
</script>

<!-- HTML ----------------------------------------------------->
<template>
	<sign-in></sign-in>	
	<div>
		Entries
	</div>
	<div v-for="item in state.entries">
		<journal-entry :entry="item" :key="item.id"></journal-entry>
		<br />
	</div>
</template>

I found the problem. I didn't post all my commented code in the question because I thought it was irrelevant, but it turns out that if you have a commented line inside RouterView it doesn't render anything.

Once I changed

<RouterView>
    <!-- <RouterLink to="/hi">Go to Hi page</RouterLink> -->
</RouterView>

to

<RouterView>
</RouterView>

everything worked. I've logged a bug on the Vue site for this.

app.use(router); makes your entire app aware of Vue Router, so you don't need to do anything like import {router} from './data/router'; within any of your components.

Vue Router with Composition API has a different syntax than maybe what you're used to if you used it previously with Vue 2/Options API

It'd be best to thoroughly review the Vue Router Composition API documentation which goes over its usage. The docs use Composition API with setup() function but the syntax is the same for <script setup>

In your case, this code in app.vue:

import {router} from './data/router';
router.push('/journal');

Should be replaced with:

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/journal');

There is also one other issue with using mounted instead of onMounted (which also needs to be imported)

journal.vue

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('here');
})
</script>