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:
2026-04-08 18:38:35 +02:00
parent 91ac322c57
commit 55f9c8eaf6
3 changed files with 32 additions and 0 deletions
+22
View File
@@ -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>
+5
View File
@@ -428,5 +428,10 @@
]
}
}
},
"error": {
"notFound": "Oops! This page could not be found.",
"generic": "An error occurred.",
"backHome": "Back to home"
}
}
+5
View File
@@ -428,5 +428,10 @@
]
}
}
},
"error": {
"notFound": "Oups ! Cette page est introuvable.",
"generic": "Une erreur est survenue.",
"backHome": "Retour a l'accueil"
}
}