mahee-auffret/error.vue

<template>
    <Header />
    <div class="error-page">
      <h1 v-if="error.statusCode === 404">Erreur 404</h1>
      <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
      <img 
            v-if="global.error_img"
            :src="`/api/assets/${globalData.error_img}.webp`"
            :alt="global.error_img_title" />
    </div>
</template>
  
<script>
  export default {
    setup() {
      const global = ref([]);
      
      const { data, error } = useFetch('/api/items/global', {
        server: true,
        onResponse({ request, response, options }) {
          global.value = response._data.data;
        },
      });
      
      provide('globalData', global);

      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>