parsley/app/javascript/components/App.vue

85 lines
1.8 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 TWEEN from '@tweenjs/tween.js';
import { useAppConfigStore } from "../stores/appConfig";
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 () {
TWEEN.update();
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>