Vulture/VApp/src/App.vue

<template>
  <v-app> 
    <VultureBar v-if="showVultureBar" />   
    <GameStatus v-if="showGameStatus" /> 
    <v-main>   
      <RouterView :key="$route.fullPath" /> 
    </v-main> <!-- <v-footer class="footer" :elevation=12 border><v-row justify="center">© 2024 - ASCO section Fablab</v-row></v-footer> -->
  </v-app>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import VultureBar from '@/components/VultureBar.vue'
import GameStatus from '@/components/GameStatus.vue'

const route = useRoute();

const showVultureBar = computed(() => {
  return route.name !== 'Game Display (Projection)' && route.name !== 'Score Display (Projection)';
});

const showGameStatus = computed(() => {
  return route.name === 'Game Control (Présentateur)';
});
</script>

<style>
  html {
    overflow: auto !important;
  }
  .footer { 
    position: fixed; /* Fixe le footer en bas de la page */ 
    bottom: 0; /* Aligne le footer en bas de la page */ 
    left: 0; /* Aligne le footer à gauche */ 
    width: 100%; /* Ajuste la largeur du footer en fonction de la largeur de l'écran */ 
    z-index: 1000; /* Assure que le footer est au-dessus des autres éléments */
  }
</style>