Макет

layouts/Default.vue

<script setup>
import { onMounted, ref, watch } from "vue";
import { fetchWrapper } from "@/helpers";
import { Title, Footer, View } from "@/components";

const baseUrl = `${import.meta.env.VITE_API_URL}`;

const props = defineProps({
  showTitle: Boolean,
  showGroupName: Boolean,
  showLogout: Boolean,
});

const groupName = ref("")

const fetchData = async () => {
  if (props.showGroupName && props.showTitle) {
    try {
      const data = await fetchWrapper.get(`${baseUrl}/oidc/group/`);
      if (data) {
        groupName.value = data.group;
      }
    } catch (err) {
      console.error(err);
    }
  }
};

onMounted(fetchData);

watch(() => props.showGroupName, fetchData);
</script>

<template>
  <v-app style="background-color: #64B5FF">
    <Title :group-name="groupName" :show-title="showTitle" :show-logout="showLogout" :show-group-name="showGroupName"/>
    <View />
    <Footer />
  </v-app>
</template>

<style scoped>

</style>

Этот компонент является "корневым", то есть у него отсутствуют родители. Значения для своих props он будет получать напрямую из роутера.

В этом компоненте объединяются компоненты Title, View (отображающий компоненты, переданные в роутер) и Footer.

На вход этот компонент принимает всё те же три пропа, указанные в компоненте Title, чтобы получить их из роутера и передать в хедер.

Как только этот компонент монтируется, он проверяет необходимость выводить заголовок и номер группы пользователя, ориентируясь на значения переменных showTitle и showGroupName.

Если такая необходимость есть, отправляет запрос на бэкенд, чтобы получить номер группы, и сохраняет его в реактивную переменную, которую вместе с пропами передаёт в компонент Title.