56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<template>
|
|
<NuxtLayout name="error-layout">
|
|
<div>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-12">
|
|
<h1 class="title is-4">
|
|
{{ error.statusCode
|
|
}}<span v-if="error.statusMessage"> - {{ error.statusMessage }}</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="column is-12" v-if="error.message">
|
|
<div class="notification has-background-warning-90 has-text-dark">
|
|
<p>{{ error.message }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-12" v-if="error.stack">
|
|
<h2 class="title is-5 is-clickable" @click="showStacks = !showStacks">
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i v-if="showStacks" class="fas fa-arrow-up"></i>
|
|
<i v-else class="fas fa-arrow-down"></i>
|
|
</span>
|
|
<span>Stack trace</span>
|
|
</span>
|
|
</h2>
|
|
|
|
<pre v-if="showStacks"><code>{{ error.stack }}</code></pre>
|
|
</div>
|
|
|
|
<div class="column is-12">
|
|
<h2 class="title is-5">
|
|
<NuxtLink to="/">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-home"></i></span>
|
|
<span>Back to Home</span>
|
|
</span>
|
|
</NuxtLink>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
error: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
const showStacks = ref(false);
|
|
|
|
onMounted(() => console.error(props.error));
|
|
</script>
|