mahee-auffret/error.vue

<template>
    <Header />
    <div class="error-page">
      <h1 v-if="error.statusCode === 404">Erreur 404</h1>
      <h1 v-else>Erreur {{ error.statusCode }}</h1>
      <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
      <img 
            :src="`/api/assets/${globalData.error_img}.webp`"
            :alt="globalData.error_img_title" />
    </div>
</template>
  
<script>
export default {
    async setup() {
      let globalData = await useFetchGlobalData();
      globalData = globalData.globalData._object.$sglobalData;
      
      return {
          globalData
      }
      
    },
    props: {
      error: Object
    }
}
</script>
  
<style scoped>
  .error-page {
    text-align: center;
    margin: 3rem auto;
  }

  h1 {
    margin-bottom: 1rem;
  }

  img {
      width: 60vw;
      margin: auto;
      margin-top: 5rem;
  }
</style>