feat(03-03): create error.vue (404 page) with i18n keys
- error.vue in app/ with statusCode display, i18n message, clearError redirect - Added error.notFound, error.generic, error.backHome keys to fr.json and en.json
This commit is contained in:
@@ -0,0 +1,22 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { NuxtError } from '#app'
|
||||||
|
|
||||||
|
const props = defineProps<{ error: NuxtError }>()
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
function handleError() {
|
||||||
|
clearError({ redirect: '/' })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
|
||||||
|
<h1 class="text-8xl font-bold text-primary">{{ error.statusCode }}</h1>
|
||||||
|
<p class="text-xl text-gray-500 dark:text-gray-400 text-center max-w-md">
|
||||||
|
{{ error.statusCode === 404 ? t('error.notFound') : t('error.generic') }}
|
||||||
|
</p>
|
||||||
|
<UButton size="lg" @click="handleError">
|
||||||
|
{{ t('error.backHome') }}
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -428,5 +428,10 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"notFound": "Oops! This page could not be found.",
|
||||||
|
"generic": "An error occurred.",
|
||||||
|
"backHome": "Back to home"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -428,5 +428,10 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"notFound": "Oups ! Cette page est introuvable.",
|
||||||
|
"generic": "Une erreur est survenue.",
|
||||||
|
"backHome": "Retour a l'accueil"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user