Skip to content

Commit b675b6c

Browse files
shadow81627shadow81627
committed
feat(error): add custom error pages
1 parent c20b28c commit b675b6c

File tree

3 files changed

+211
-0
lines changed

3 files changed

+211
-0
lines changed

‎components/error/404.vue

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div id="message" class="card bg-light card-body">
3+
<h2>404</h2>
4+
<!-- <h1>{{ $t('error.404.heading') }}</h1> -->
5+
<p>
6+
<!-- {{ $t('error.404.description') }} -->
7+
</p>
8+
<!-- <nuxt-link :to="localePath('index')" class="btn btn-primary">{{
9+
$t('layout.navigation.home')
10+
}}</nuxt-link> -->
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
props: {
17+
error: {
18+
type: Object,
19+
default: () => {},
20+
},
21+
},
22+
head() {
23+
return {
24+
// title: this.$t('error.404.heading'),
25+
meta: [
26+
// {
27+
// hid: 'description',
28+
// name: 'description',
29+
// content: this.$t('error.404.description'),
30+
// },
31+
],
32+
};
33+
},
34+
};
35+
</script>
36+
37+
<style media="screen" scoped>
38+
#message {
39+
max-width: 360px;
40+
margin: 100px auto 16px;
41+
padding: 32px 24px 16px;
42+
border-radius: 3px;
43+
}
44+
#message h3 {
45+
font-weight: normal;
46+
font-size: 16px;
47+
margin: 16px 0 12px;
48+
}
49+
#message h2 {
50+
font-weight: bold;
51+
font-size: 16px;
52+
margin: 0 0 8px;
53+
}
54+
#message h1 {
55+
font-size: 22px;
56+
font-weight: 300;
57+
margin: 0 0 16px;
58+
}
59+
#message p {
60+
line-height: 140%;
61+
margin: 16px 0 24px;
62+
font-size: 14px;
63+
}
64+
#message a {
65+
display: block;
66+
text-align: center;
67+
text-transform: uppercase;
68+
text-decoration: none;
69+
padding: 16px;
70+
border-radius: 4px;
71+
}
72+
#message,
73+
#message a {
74+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
75+
}
76+
#load {
77+
color: rgba(0, 0, 0, 0.4);
78+
text-align: center;
79+
font-size: 13px;
80+
}
81+
</style>

‎components/error/500.vue

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div id="message" class="card bg-light card-body">
3+
<h2 v-if="error.statusCode">{{ error.statusCode }}</h2>
4+
<!-- <h1>{{ $t('error.500.heading') }}</h1> -->
5+
<p>
6+
<!-- {{ $t('error.500.description') }} -->
7+
</p>
8+
<video
9+
autoplay
10+
width="640"
11+
data-alt="Baboon pounding on laptop keyboard"
12+
src="https://media.gettyimages.com/videos/medium-shot-baboon-pounding-on-laptop-keyboard-video-id712-54"
13+
muted
14+
loop
15+
/>
16+
17+
<a href="javascript:location.reload();" class="btn btn-primary btn-block"
18+
>Try again</a
19+
>
20+
<!-- <nuxt-link
21+
:to="localePath('index')"
22+
class="btn btn-primary btn-block"
23+
exact
24+
>{{ $t('layout.navigation.home') }}</nuxt-link
25+
> -->
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
props: {
32+
error: {
33+
type: Object,
34+
default: () => {},
35+
},
36+
},
37+
head() {
38+
return {
39+
// title: this.$t('error.500.heading'),
40+
meta: [
41+
// {
42+
// hid: 'description',
43+
// name: 'description',
44+
// content: this.$t('error.500.description'),
45+
// },
46+
],
47+
};
48+
},
49+
};
50+
</script>
51+
52+
<style media="screen" scoped>
53+
#message video {
54+
width: 100%;
55+
height: auto;
56+
margin-bottom: 16px;
57+
}
58+
59+
#message {
60+
max-width: 360px;
61+
margin: 100px auto 16px;
62+
padding: 32px 24px 16px;
63+
border-radius: 3px;
64+
}
65+
#message h3 {
66+
font-weight: normal;
67+
font-size: 16px;
68+
margin: 16px 0 12px;
69+
}
70+
#message h2 {
71+
font-weight: bold;
72+
font-size: 16px;
73+
margin: 0 0 8px;
74+
}
75+
#message h1 {
76+
font-size: 22px;
77+
font-weight: 300;
78+
margin: 0 0 16px;
79+
}
80+
#message p {
81+
line-height: 140%;
82+
margin: 16px 0 24px;
83+
font-size: 14px;
84+
}
85+
#message a {
86+
display: block;
87+
text-align: center;
88+
text-transform: uppercase;
89+
text-decoration: none;
90+
padding: 16px;
91+
border-radius: 4px;
92+
}
93+
#message,
94+
#message a {
95+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
96+
}
97+
#load {
98+
color: rgba(0, 0, 0, 0.4);
99+
text-align: center;
100+
font-size: 13px;
101+
}
102+
</style>

‎layouts/error.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div class="nuxt-error container">
3+
<component :is="errorPage" :error="error" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import error404 from '@/components/error/404.vue';
9+
import error500 from '@/components/error/500.vue';
10+
11+
export default {
12+
props: {
13+
error: {
14+
type: Object,
15+
default: () => {},
16+
},
17+
},
18+
computed: {
19+
errorPage() {
20+
if (this.error.statusCode === 404) {
21+
return error404;
22+
}
23+
// catch everything else
24+
return error500;
25+
},
26+
},
27+
};
28+
</script>

0 commit comments

Comments
 (0)