use fetch

components/header.vue

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

error.vue

@@ -5,7 +5,7 @@ import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
 
-const { data: seoData } = await apiFetch<ApiKpType>(`kp/2`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/2/`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 const route = useRoute()
 if(route.path !== '/404') {
-    navigateTo('/404')
+    // navigateTo('/404')
 }
 </script>
 <template>

nuxt.config.ts

@@ -42,6 +42,11 @@ export default defineNuxtConfig({
       },
     },
   },
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => ['nobr'].includes(tag),
+    }
+  },
   ssr: true,
   modules: [
     '@nuxtjs/tailwindcss',

pages/[slug].vue

@@ -7,7 +7,7 @@ import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
-const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
@@ -17,7 +17,7 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 const route = useRoute()
-const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}`)
+const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}/`)
 if (!data.value) {
     throw createError({
         statusCode: 404,
@@ -38,6 +38,9 @@ const policyText = computed(() => {
                 <div class="col-span-full prose max-w-full" v-html="policyText" />
             </div>
         </div>
+        <div class="siteblock-image" v-if="data?.image">
+            <NuxtImg :src="[imgBase, data?.image].join('/')" :alt="data.title || 'фоновая картинка'" title="" format="webp" />
+        </div>
         <div class="siteblock siteblock_calc bg-white">
             <Suspense>
                 <CalcModels />

pages/index.vue

@@ -7,7 +7,7 @@ import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
-const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,

types/index.d.ts

@@ -22,6 +22,7 @@ type ApiMenuType = {
 
 type ApiPagesType = {
     id: number
+    order: number
     title: string
     menu_title: string
     slug: string

utils/apiFetch.ts

@@ -7,7 +7,8 @@ export async function apiFetch<T>(path: string) {
         baseURL: config.public.baseUrl,
         headers,
         onResponseError({ response }) {
-            console.log(response)
+            console.log(response.status)
+            console.log(response.url)
             window.location.pathname = '/404'
             throw createError({
                 statusCode: 404,