nuVistA/htdocs/App.vue

<template>
	<div class="container-fluid">
		<Navbar v-model:server="server" :user="user" />
		<div class="container">
			<Login :secret="secret" v-model:client="client" v-model:server="server" v-model:user="user" />
			<router-view v-if="user"></router-view>
		</div>
	</div>
</template>

<script>
	import Navbar from './Navbar.vue';
	import Login from './Login.vue';
	import RouteSchedule from './RouteSchedule.vue';
	import RoutePatientLookup from './RoutePatientLookup.vue';
	import RoutePatientDetail from './RoutePatientDetail.vue';
	import RouteRecall from './RouteRecall.vue';

	export default {
		components: {
			Navbar, Login
		},
		props: {
			secret: String
		},
		data() {
			return {
				client: null,
				server: null,
				user: null,
				heartbeat: null,
				banner: '',
				authenticated: false
			};
		},
		computed: {
			store: () => store
		},
		watch: {
			async client(value, oldvalue) {
				if(this.heartbeat) window.clearInterval(this.heartbeat);
				else {
					[
						{ path: '/', component: RouteSchedule, props: { client: this.client } },
						{ path: '/patient', component: RoutePatientLookup, props: { client: this.client } },
						{ path: '/patient/:id', component: RoutePatientDetail, props: { client: this.client } },
						{ path: '/recall', component: RouteRecall, props: { client: this.client } },
					].forEach(route => this.$root.$router.addRoute(route));
					await this.$root.$router.replace(this.$route);
				}
				if(value) this.heartbeat = await value.heartbeat();
				if(oldvalue) this.$router.go();	// refresh if changed
			}
		}
	};
</script>