mini-shater/error.vue

<script setup lang="ts">
import '@/assets/main.scss'
const config = useRuntimeConfig()
const { fetchData } = useApiFetch()

import type { NuxtError } from '#app'
import og_img from '/og_img.png'

const { data: seoData } = await fetchData<ApiKpType>(`kp/2/`)

useSeoMeta({
    title: seoData.value?.title,
    ogTitle: seoData.value?.title,
    description: seoData.value?.content,
    ogDescription: seoData.value?.content,
    ogImage: config.public.baseUrl + og_img,
    // twitterCard: 'summary_large_image',
})

const props = defineProps({
    error: Object as () => NuxtError
})
const route = useRoute()
if(route.path !== '/404') {
    // navigateTo('/404')
}
</script>
<template>
    <div>
        <Header />
        <div class="siteblock bg-white">
            <div class="container prose">
                <div class="col-span-full">
                    <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                    <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                        покупкой забора здесь.</p>
                    <p>
                        <code>
                            {{ error?.message }}
                        </code>
                    </p>
                    <button @click="navigateTo('/')" class="not-prose">Вернуться на главную</button>
                </div>
            </div>
        </div>
        <div class="siteblock siteblock_calc bg-white">
            <Suspense>
                <CalcModels />
            </Suspense>
        </div>
        <Footer />
        <Modal />
    </div>
</template>