Nuxt/lib/app/components/nuxt-error.vue

102 lines
2.4 KiB
Vue
Raw Normal View History

2016-11-07 01:34:58 +00:00
<template>
2017-08-05 10:24:12 +00:00
<div class="__nuxt-error-page">
<div class="container">
<div class="row">
<div class="column">
2017-08-10 09:49:58 +00:00
<h1>{{ statusCode }} </h1>
<h4> {{ message }} </h4>
2017-08-10 10:45:49 +00:00
<% if(debug) { %>
<pre class="error-box" v-if="mounted"><code>Route: {{ $route.fullPath }}<br>Query: {{ $route.query }}<br>Params: {{$route.params}}<br>{{ error.stack }}</code></pre>
<% } %>
2017-08-10 09:49:58 +00:00
<p v-if="statusCode === 404">
2017-08-05 10:24:12 +00:00
<nuxt-link class="error-link" to="/">Back to the home page</nuxt-link>
</p>
</div>
</div>
<div class="row">
<div class="column">
<div class="poweredby">
<small> Powered by <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a> </small>
2017-08-05 10:24:12 +00:00
</div>
</div>
</div>
2016-11-07 01:34:58 +00:00
</div>
</div>
</template>
<script>
export default {
name: 'nuxt-error',
2016-11-19 21:48:06 +00:00
props: ['error'],
head () {
return {
2017-08-10 09:49:58 +00:00
title: this.statusCode + ' - ' + this.message,
2017-08-05 10:24:12 +00:00
link: [
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css', type: 'text/css', media: 'all' },
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css', type: 'text/css', media: 'all' }
]
2016-11-19 21:48:06 +00:00
}
2017-08-10 09:49:58 +00:00
},
2017-08-10 10:45:49 +00:00
<% if(debug) { %>
data () {
return {
mounted: false
}
},
mounted () {
this.mounted = true
},
<% } %>
2017-08-10 09:49:58 +00:00
computed: {
statusCode () {
return (this.error && this.error.statusCode) || 500
},
message () {
return (this.error && this.error.message) || 'Nuxt Server Error'
}
2016-11-19 21:48:06 +00:00
}
2016-11-07 01:34:58 +00:00
}
</script>
2017-08-05 10:24:12 +00:00
<style>
.__nuxt-error-page {
background: #F5F7FA;
2017-08-05 11:03:56 +00:00
font-size: 14px;
2017-08-05 10:24:12 +00:00
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-align: center;
2016-11-07 01:34:58 +00:00
}
2017-08-05 10:24:12 +00:00
.__nuxt-error-page .container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
2017-08-05 11:03:56 +00:00
margin: 0 auto;
max-width: 70%;
2016-11-07 01:34:58 +00:00
}
2017-08-10 10:45:49 +00:00
<% if(debug) { %>
2017-08-05 10:24:12 +00:00
.__nuxt-error-page .error-box {
box-shadow: 0px 0px 9px #d3d3d3;
padding: 10px;
2017-08-05 19:20:26 +00:00
text-align: left;
2016-11-07 01:34:58 +00:00
}
2017-08-10 10:45:49 +00:00
<% } %>
2017-08-05 10:24:12 +00:00
.__nuxt-error-page .poweredby {
text-align: center;
margin-top: 10%;
2016-11-07 01:34:58 +00:00
}
2017-08-05 19:33:07 +00:00
.__nuxt-error-page a {
color: #42b983 !important;
}
2017-08-05 19:33:07 +00:00
.__nuxt-error-page pre {
border-color: #42b983 !important;
}
2016-11-07 01:34:58 +00:00
</style>