nuxt-error.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div class="__nuxt-error-page">
  3. <div class="error">
  4. <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48">
  5. <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
  6. </svg>
  7. <div class="title">{{ message }}</div>
  8. <p v-if="statusCode === 404" class="description">
  9. <a v-if="typeof $route === 'undefined'" class="error-link" href="/"><% messages.back_to_home %></a>
  10. <NuxtLink v-else class="error-link" to="/"><%= messages.back_to_home %></NuxtLink>
  11. </p>
  12. <% if(debug) { %>
  13. <p class="description" v-else><%= messages.client_error_details %></p>
  14. <% } %>
  15. <div class="logo">
  16. <a href="https://nuxtjs.org" target="_blank" rel="noopener"><%= messages.nuxtjs %></a>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'NuxtError',
  24. props: {
  25. error: {
  26. type: Object,
  27. default: null
  28. }
  29. },
  30. computed: {
  31. statusCode () {
  32. return (this.error && this.error.statusCode) || 500
  33. },
  34. message () {
  35. return this.error.message || '<%= messages.client_error %>'
  36. }
  37. },
  38. head () {
  39. return {
  40. title: this.message,
  41. meta: [
  42. {
  43. name: 'viewport',
  44. content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
  45. }
  46. ]
  47. }
  48. }
  49. }
  50. </script>
  51. <style>
  52. .__nuxt-error-page {
  53. padding: 1rem;
  54. background: #F7F8FB;
  55. color: #47494E;
  56. text-align: center;
  57. display: flex;
  58. justify-content: center;
  59. align-items: center;
  60. flex-direction: column;
  61. font-family: sans-serif;
  62. font-weight: 100 !important;
  63. -ms-text-size-adjust: 100%;
  64. -webkit-text-size-adjust: 100%;
  65. -webkit-font-smoothing: antialiased;
  66. position: absolute;
  67. top: 0;
  68. left: 0;
  69. right: 0;
  70. bottom: 0;
  71. }
  72. .__nuxt-error-page .error {
  73. max-width: 450px;
  74. }
  75. .__nuxt-error-page .title {
  76. font-size: 1.5rem;
  77. margin-top: 15px;
  78. color: #47494E;
  79. margin-bottom: 8px;
  80. }
  81. .__nuxt-error-page .description {
  82. color: #7F828B;
  83. line-height: 21px;
  84. margin-bottom: 10px;
  85. }
  86. .__nuxt-error-page a {
  87. color: #7F828B !important;
  88. text-decoration: none;
  89. }
  90. .__nuxt-error-page .logo {
  91. position: fixed;
  92. left: 12px;
  93. bottom: 12px;
  94. }
  95. </style>