parsley/app/javascript/components/App.vue
2024-09-29 09:44:40 -05:00

87 lines
1.9 KiB
Vue

<template>
<div id="app">
<vue-progress-bar></vue-progress-bar>
<app-navbar></app-navbar>
<section id="main" class="">
<div class="container">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component v-if="!hasError" :is="Component" />
<div v-else>
<h1>Error!</h1>
<p>{{ error }}</p>
</div>
</transition>
</router-view>
</div>
</section>
</div>
</template>
<script>
import { mapState } from "pinia";
import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
import { useAppConfigStore } from "../stores/appConfig";
const globalTweenGroup = useGlobalTweenGroup();
export default {
data() {
return {
};
},
computed: {
...mapState(useAppConfigStore, {
hasError: store => store.error !== null,
error: store => store.error,
authChecked: store => store.authChecked,
initialLoad: store => store.initialLoad
})
},
watch: {
isLoading(val) {
if (val) {
// this.$Progress.start();
} else {
// this.$Progress.finish();
}
},
initialLoad(val) {
if (val) {
this.$nextTick(() => {
document.body.classList.remove("loading");
});
}
}
},
created() {
// Setup global animation loop
function animate(time) {
globalTweenGroup.update(time);
requestAnimationFrame(animate);
}
animate();
if (this.user === null && this.authChecked === false) {
this.checkAuthentication();
}
},
mounted() {
if (this.initialLoad) {
this.$nextTick(() => {
document.body.classList.remove("loading");
});
}
},
components: {
}
}
</script>