-
Notifications
You must be signed in to change notification settings - Fork 0
/
error.vue
39 lines (33 loc) · 999 Bytes
/
error.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<!-- typeof error.statusCode: -->
<!-- string from server-side -->
<!-- number on client-side -->
typeof error.statusCode =
<span v-html="`${typeof error.statusCode}`"> </span>
<hr />
<p>
error.statusCode: {{ error.statusCode }} <br />
error.message: {{ error.message }}
</p>
<hr />
<!-- customise 404 message from template section -->
<h3>Custom 404 message</h3>
<p v-if="error.statusCode === 404 || '404'">
[template]: Oops page not available 🥺
</p>
<!-- Redirect to home page -->
<button @click="handleError">Clear errors</button>
</template>
<script setup>
// default props available on error.vue
const props = defineProps({
error: Object,
})
// customise 404 message from script section
const error = useError()
if (error.value.statusCode === 404 || '404') {
error.value.message = '[script]: Oops! Page not found 😔'
}
// clear error and redirect to home page
const handleError = () => clearError({ redirect: '/' })
</script>