ProjectModule.vue

<template>
  <div>
    <router-view :loading="!moduleIsReady" />
  </div>
</template>

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

// import the store for current module
import { useProjectStore } from "./store";
// import the main store
import { useMainStore } from "@/store/index";

import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
import type { Route } from "vue-router";

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

    return { mainStore, projectStore };
  },
  i18n: { messages: ProjectI18nMessages },

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

  computed: {
    project(): ProjectObject | null {
      return this.projectStore.currentProject;
    },
    moduleIsReady(): boolean {
      return (
        this.projectStore !== null &&
        this.projectStore.currentSlug !== null &&
        this.projectStore.currentProject !== null &&
        this.projectStore.currentResources !== null &&
        this.projectStore.currentSubProjects !== null
      );
    },
  },

  methods: {
    async initialize() {
      await this.apiFetch(this.$router.currentRoute);
    },

    async apiFetch(route: Route) {
      // Project may be unset (e.g. when entering from a direct link)
      await this.projectStore.handleUnsetProject(this.project, route);
      // Load Resources for the project if not present
      if (this.projectStore.currentResources === null) {
        this.projectStore.retrieveResources(this.project);
      }
      // Load Sub-Projects for the project if not present
      if (this.projectStore.currentSubProjects === null) {
        this.projectStore.retrieveSubProjects(this.project);
      }
      // Load Project Roles for the project if not present
      if (this.projectStore.currentProjectRoles === null) {
        this.projectStore.retrieveProjectRoles(this.project);
      }
    },
  },

  async beforeRouteUpdate(to, from, next) {
    await this.apiFetch(to);
    next();
  },
});
</script>