parsley/app/javascript/components/App.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>