components/header.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { apiFetch } from '~/utils/apiFetch';
 
-const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
+const pagesData = menuData.value ? menuData.value.pages : []
 const route = useRoute()
 </script>
 <template>

error.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 import '@/assets/main.scss'
-
+const config = useRuntimeConfig()
 import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
@@ -20,9 +18,11 @@ useSeoMeta({
 const props = defineProps({
     error: Object as () => NuxtError
 })
-
+const route = useRoute()
+if(route.path !== '/404') {
+    navigateTo('/404')
+}
 </script>
-
 <template>
     <div>
         <Header />
@@ -32,6 +32,11 @@ const props = defineProps({
                     <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                     <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                         покупкой забора здесь.</p>
+                    <p class="hidden">
+                        <code>
+                            {{ error?.message }}
+                        </code>
+                    </p>
                     <button @click="navigateTo('/')" class="not-prose">Вернуться на главную</button>
                 </div>
             </div>

pages/[slug].vue

@@ -16,10 +16,16 @@ useSeoMeta({
     ogImage: config.public.baseUrl + og_img,
     // twitterCard: 'summary_large_image',
 })
-
-const { data: policyData } = await apiFetch<ApiPagesType[]>(`pages/1`)
+const route = useRoute()
+const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}`)
+if (!data.value) {
+    throw createError({
+        statusCode: 404,
+    })
+}
 const policyText = computed(() => {
-    let c = policyData?.value.content || ''
+    if (!data?.value) return ''
+    let c = data?.value.content || ''
     return marked.parse(c)
 })
 
@@ -28,7 +34,7 @@ const policyText = computed(() => {
     <div>
         <div class="siteblock bg-white">
             <div class="container">
-                <h1 class="siteblock-title">{{ policyData.title }}</h1>
+                <h1 class="siteblock-title">{{ data?.title || '404' }}</h1>
                 <div class="col-span-full prose max-w-full" v-html="policyText" />
             </div>
         </div>

pages/index.vue

@@ -17,15 +17,16 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 
-const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
+const pagesData = menuData.value ? menuData.value.pages : []
 
 const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
 const { data: calculatorData } = await apiFetch(`calculator/5/`)
 
-const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
-const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
-const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'how_to')
-const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'advantages')
+const about = pagesData.find(el => el.slug == 'about')
+const reviews = pagesData.find(el => el.slug == 'clients')
+const delivery = pagesData.find(el => el.slug == 'how_to')
+const advantages = pagesData.find(el => el.slug == 'advantages')
 
 const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',

types/index.d.ts

@@ -14,6 +14,12 @@ type ApiKpType = {
     is_indexed: boolean
 }
 
+type ApiMenuType = {
+    id: number
+    type: string
+    pages: ApiPagesType[]
+}
+
 type ApiPagesType = {
     id: number
     title: string

utils/apiFetch.ts

@@ -5,6 +5,14 @@ export async function apiFetch<T>(path: string) {
     headers.set('Referer', config.public.baseUrl)
     return useFetch<T>(`${apiBase}/${path}`, {
         baseURL: config.public.baseUrl,
-        headers
+        headers,
+        onResponseError({ response }) {
+            console.log(response)
+            window.location.pathname = '/404'
+            throw createError({
+                statusCode: 404,
+                fatal: true
+            })
+        },
     })
 }