onspot-frontend/src/App.vue

63 lines
1014 B
Vue

<template>
<div id="app" v-if="$store.state.appReady">
<navbar/>
<div id="content">
<router-view/>
</div>
<div id="footer">
<footer-nav/>
</div>
</div>
<div id="app-loader" v-else>
<loading-screen/>
</div>
</template>
<script>
import FooterNav from "@/components/FooterNav";
import Navbar from "@/components/Navbar";
import LoadingScreen from "@/components/LoadingScreen";
export default {
name: "Login",
components: {
Navbar,
FooterNav,
LoadingScreen
},
created() {
// The basic app is created... Currently showing a loading screen (as soon as mounted)
this.$store.dispatch('storeUserData','testuser').then(() => {
this.$store.dispatch('setAppReady');
});
}
}
</script>
<style>
#content {
margin-top: 70px;
margin-bottom: 20px;
}
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
padding: 1em;
margin-top: auto;
background: #E9ECEF;
}
#app-loader {
height: 100%;
}
</style>