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="globalData != null"
            :src="`/api/assets/${globalData.error_img}.webp`"
            :alt="global.error_img_title" />
    </div>
</template>
  
<script>
export default {
  setup() {
    let globalData = useState('globalData');

    async function fetchGlobalData() {
      await callOnce(async () => {
        globalData.value = await $fetch('/api/items/global')
        globalData = globalData.value.data;
      })
    }

    fetchGlobalData();    
      
    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>