Spookie/assets/js/App.vue

<template>
	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<nav-bar
					:user="user"
					@invalidate-user="onInvalidateUser"
				/>
			</div>
		</div>

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

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

<script>
import axios from 'axios'

import routerView from 'vue-router'
import NavBar from '@/components/TheNavbar'
import Sidebar from '@/components/TheSidebar'
import FooterComponent from '@/components/TheFooter'

export default {
	name: 'App',
	components: {
		routerView,
		Sidebar,
		NavBar,
		FooterComponent
	},
	data() {
		return {
			user: null,
			quote: null
		}
	},
	mounted() {
		if (window.user) {
			this.user = window.user
			console.log(this.user)
		}
		if (window.quote) {
			this.quote = window.quote
		}
	},
	methods: {
		onUserAuthenticated(userUri) {
			console.log('authenticated')
			axios
				.get(userUri)
				.then((response) => {
					this.user = response.data
				})
			this.$router.push('/')
		},
		onInvalidateUser() {
			console.log('invalidated')
			this.user = null
			window.user = null
		}
	}
}
</script>