Spookie/assets/js/App.vue

<template>
	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<the-navbar
					@invalidate-user="onUserInvalidate"
				/>
			</div>
		</div>

		<div class="row mt-5 main-content">
			<div class="col-xl-3">
				<the-sidebar/>
			</div>
			<div class="col-xl-9">
				<router-view
					@user-authenticated="onUserAuthenticated"
				/>
			</div>
			<div class="col mt-2"/>
		</div>

		<div class="row">
			<div class="col">
				<the-footer/>
			</div>
		</div>
	</div>
</template>

<script setup>
import axios from 'axios'
import { useRoute } from 'vue-router'
//import RouterView from 'vue-router'
import TheNavbar from '@/components/TheNavbar'
import TheSidebar from '@/components/TheSidebar'
import TheFooter from '@/components/TheFooter'

if (window.user) {
	const { user } = window
}
if (window.quote) {
	const { quote } = window
}

const onUserAuthenticated = (userUri) => {
	//console.log('authenticated')
	axios
		.get(userUri)
		.then((response) => {
			this.user = response.data
		})
	this.$router.push('/')
}

const onUserInvalidate = () => {
	//console.log('invalidated')
	this.user = null
	window.user = null
}

</script>