portfolio_nuxt/error.vue

<template>
    <div class="error-page">
        <div class="error-content">
            <div class="theme-toggle">
                <ThemeToggle :is-dark="$theme.isDark" :toggle-theme="$theme.toggleTheme" />
            </div>
            <h1 class="error-code">{{ props.error?.statusCode || 'Error' }}</h1>
            <h2 class="error-title">{{ errorTitle }}</h2>
            <p class="error-message">{{ errorMessage }}</p>
            <div class="error-actions">
                <button v-if="props.error?.statusCode === 500" class="error-button" @click="handleError">
                <span class="button-icon">↺</span>
                Try Again
                </button>
                <NuxtLink :to="navigationItems.find((item: any) => item.finder === 'home')?.path" class="error-button home-button">
                <span class="button-icon">🏠</span>
                Back to Home
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { handleError } from '~/assets/ts/error/error'
import type { ErrorProps } from '~/types/error';
import { navigationItems } from '~/config/navigation';

definePageMeta({
    layout: 'default'
})

const props = defineProps<{error?: ErrorProps}>()
const { $theme } = useNuxtApp();

const errorTitle = computed(() => {
    switch (props.error?.statusCode) {
        case 404:
            return 'Page Not Found'
        case 500:
            return 'Server Error'
        default:
            return 'Something went wrong'
    }
})

const errorMessage = computed(() => {
    switch (props.error?.statusCode) {
        case 404:
            return 'The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.'
        case 500:
            return 'Our server encountered an unexpected condition that prevented it from fulfilling your request.'
        default:
            return 'An unexpected error occurred. Please try again later.'
    }
})
</script>

<style scoped>
@import '~/assets/css/error/error.css';
</style>