App.vue

<template>
  <div id="app">
    <Navbar />
    <LoadingIndicator />
    <main>
      <div class="mr-0 d-flex">
        <SidebarMenu class="mr-2" />
        <div class="container-fluid px-5">
          <Pilot />
          <Maintenance />
          <BreadCrumbs />
          <RouterView />
        </div>
      </div>
    </main>
    <ExpiryToast />
    <NotificationToast />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue-demi";

// import the main store
import useMainStore from "@/store/index";
import useProjectStore from "@/modules/project/store";
import useUserStore from "@/modules/user/store";
//import "@/assets/scss/_custom.scss";

export default defineComponent({
  setup() {
    const mainStore = useMainStore();
    const projectStore = useProjectStore();
    const userStore = useUserStore();

    return { mainStore, projectStore, userStore };
  },

  computed: {
    loggedIn(): boolean {
      return this.mainStore.loggedIn;
    },

    localeChange(): string {
      return this.mainStore.coscine.locale;
    },
  },

  watch: {
    // Listen for token changes and reload the page to fetch data again
    "mainStore.coscine.authorization.bearer"() {
      window.location.reload();
    },

    loggedIn() {
      this.userStore.retrieveUser(this.loggedIn);
    },

    localeChange() {
      this.$root.$i18n.locale = this.localeChange;
    },
  },

  created() {
    this.initialize();
  },

  methods: {
    async initialize() {
      await this.userStore.retrieveUser(this.loggedIn);
      await this.projectStore.retrieveAllProjects();
      this.userStore.setUserLanguagePreference();
      await this.mainStore.getMaintenance();
    },
  },
});
</script>

<style>
.h-divider {
  margin-top: 5px;
  margin-bottom: 10px;
  height: 1px;
  width: 100%;
  border-top: 1px solid var(--light);
}

#card-deck {
  /* Used to align the cards' and container's left edges */
  margin: 0em -0.5em;
}
</style>