From e92b07b84223bd6a70b9c982a477d2ba4f325413 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Mar 2025 13:14:05 +0300
Subject: [PATCH] vue rerender

---
 composables/api.ts |   3 +-
 error.vue          |  26 ++++-----
 nuxt.config.ts     |   2 +-
 pages/index.vue    | 133 +++++++++++++++++++++++----------------------
 4 files changed, 81 insertions(+), 83 deletions(-)

diff --git a/composables/api.ts b/composables/api.ts
index 31cbd81..5128897 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -4,8 +4,9 @@ export function useApiFetch() {
     const config = useRuntimeConfig()
     const apiBase = config.public.apiBase
     const prefix = config.public.apiPrefix
-
+    
     const fetchData = <T>(path: string, global = false) => {
+        console.log(`Fetching data for path: ${path}`);
         const headers = new Headers()
         headers.set('Referer', config.public.baseUrl)
 
diff --git a/error.vue b/error.vue
index 988d557..8b43908 100644
--- a/error.vue
+++ b/error.vue
@@ -1,40 +1,39 @@
 <script setup lang="ts">
 import '@/assets/main.scss'
+import type { NuxtError } from '#app'
+
 const config = useRuntimeConfig()
 const { fetchData } = useApiFetch()
 
-import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
 
-const { data: seoData } = await fetchData<Seo>(`kp/2/`)
-
+const { data: seo } = await fetchData<Seo[]>(`seo/`)
 useSeoMeta({
-    title: seoData.value?.title,
-    ogTitle: seoData.value?.title,
-    description: seoData.value?.content,
-    ogDescription: seoData.value?.content,
+    title: seo.value && seo.value[0].title,
+    ogTitle: seo.value && seo.value[0].title,
+    description: seo.value && seo.value[0].content,
+    ogDescription: seo.value && seo.value[0].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') {
+if (route.path !== '/404') {
     // navigateTo('/404')
 }
 </script>
 <template>
     <div>
         <Header />
-        <div class="siteblock bg-white">
+        <div class="siteblock bg-white min-h-[calc(100vh-26.8rem)]">
             <div class="container prose">
                 <div class="col-span-full">
                     <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                     <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                         покупкой забора здесь.</p>
-                    <p>
+                    <p class="hidden">
                         <code>
                             {{ error?.message }}
                         </code>
@@ -43,11 +42,6 @@ if(route.path !== '/404') {
                 </div>
             </div>
         </div>
-        <div class="siteblock siteblock_calc bg-white">
-            <Suspense>
-                <CalcModels />
-            </Suspense>
-        </div>
         <Footer />
         <Modal />
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 46d7108..29031a2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -52,7 +52,7 @@ export default defineNuxtConfig({
   vite: {
     assetsInclude: ['**/*.glb', '**/*.gltf'],
     build: {
-      target: 'esnext'
+      target: 'esnext',
     },
   },
 
diff --git a/pages/index.vue b/pages/index.vue
index c1b1f6f..eb6e796 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,6 +8,9 @@ import { marked } from 'marked';
 import og_img from '/og_img.png'
 
 const { data: seo } = await fetchData<Seo[]>(`seo/`)
+const { data: menu_raw, status: menu_status } = await fetchData<Menu[]>(`menu/`)
+const { data: review } = await fetchData<Review[]>(`review/`)
+
 useSeoMeta({
     title: seo.value && seo.value[0].title,
     ogTitle: seo.value && seo.value[0].title,
@@ -16,85 +19,85 @@ useSeoMeta({
     ogImage: config.public.baseUrl + og_img,
 })
 
-const { data } = await fetchData<Menu[]>(`menu/`)
 const pages = computed(() => {
-    const menu = data.value?.find(el => el.type == 1)
+    const menu = menu_raw.value?.find(el => el.type == 1)
     return (menu?.pages || []).sort((a, b) => a.order - b.order)
 })
-const { data: review } = await fetchData<Review[]>(`review/`)
 
 const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.content.split('[col]').map(el => marked.parse(el || '')))
 </script>
 <template>
-    <template v-for="page in pages">
-        <template v-if="page.slug == 'about'">
-            <div class="siteblock bg-white" :id="page.slug">
-                <div class="container">
-                    <h1 class="siteblock-title">{{ page.title }}</h1>
-                    <div class="siteblock-content">
-                        <div class="siteblock-text">
+    <div>
+        <template v-for="page in pages" :key="page.slug">
+            <template v-if="page.slug == 'about'">
+                <div class="siteblock bg-white" :id="page.slug">
+                    <div class="container">
+                        <h1 class="siteblock-title">{{ page.title }}</h1>
+                        <div class="siteblock-content">
+                            <div class="siteblock-text">
+                                <span v-html="marked.parse(page.content || '')"></span>
+                            </div>
+                        </div>
+                        <div class="siteblock-image">
+                            <NuxtImg :src="[imgBase, page.image].join('/')" alt="разные цвета забора" title=""
+                                format="webp" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template v-if="page.slug == 'review'">
+                <div class="siteblock siteblock_imgbg bg-slate-500"
+                    :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
+                    <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
+                        loading="lazy" />
+                </div>
+                <div class="container" :id="page.slug">
+                    <template v-for="item in review?.slice(0, 3)">
+                        <div class="review">
+                            <div class="review-image">
+                                <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
+                                    loading="lazy" />
+                            </div>
+                            <div class="review-content">
+                                {{ item.comment }}
+                            </div>
+                            <div class="review-title">
+                                {{ item.text }}
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </template>
+            <template v-if="page.slug == 'advantages'">
+                <div class="siteblock bg-white" :id="page.slug">
+                    <div class="container gap-4">
+                        <div class="col-span-full xl:col-span-8">
+                            <!-- <ExpDiagram /> -->
+                            ТУТ БУДЕТ КАРТИНКА
+                        </div>
+                        <div class="col-span-full xl:col-span-4 prose">
                             <span v-html="marked.parse(page.content || '')"></span>
                         </div>
                     </div>
-                    <div class="siteblock-image">
-                        <NuxtImg :src="[imgBase, page.image].join('/')" alt="разные цвета забора" title=""
-                            format="webp" />
-                    </div>
                 </div>
-            </div>
-        </template>
-        <template v-if="page.slug == 'review'">
-            <div class="siteblock siteblock_imgbg bg-slate-500"
-                :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
-                <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
-                    loading="lazy" />
-            </div>
-            <div class="container">
-                <template v-for="item in review?.slice(0, 3)">
-                    <div class="review">
-                        <div class="review-image">
-                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
-                                loading="lazy" />
+            </template>
+            <template v-if="page.slug == 'delivery'">
+                <div class="siteblock siteblock_imgbg bg-slate-500 "
+                    :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
+                    <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="коричневый забор" title=""
+                        format="webp" loading="lazy" />
+                </div>
+                <div class="siteblock bg-white siteblock_content" :id="page.slug" v-if="delivery">
+                    <div class="container">
+                        <div class="prose col-span-12 xl:col-span-6">
+                            <span v-html="delivery[0]"></span>
                         </div>
-                        <div class="review-content">
-                            {{ item.comment }}
-                        </div>
-                        <div class="review-title">
-                            {{ item.text }}
+                        <div class="prose col-span-12 xl:col-span-6">
+                            <span v-html="delivery[1]"></span>
                         </div>
                     </div>
-                </template>
-            </div>
-        </template>
-        <template v-if="page.slug == 'advantages'">
-            <div class="siteblock bg-white" :id="page.slug">
-                <div class="container gap-4">
-                    <div class="col-span-full xl:col-span-8">
-                        <!-- <ExpDiagram /> -->
-                        ТУТ БУДЕТ КАРТИНКА
-                    </div>
-                    <div class="col-span-full xl:col-span-4 prose">
-                        <span v-html="marked.parse(page.content || '')"></span>
-                    </div>
                 </div>
-            </div>
+            </template>
         </template>
-        <template v-if="page.slug == 'delivery'">
-            <div class="siteblock siteblock_imgbg bg-slate-500 "
-                :style="[{ backgroundImage: `url(${[imgBase, page.image].join('/')})` }]">
-                <NuxtImg :src="[imgBase, page.image].join('/')" class="invisible" alt="коричневый забор" title=""
-                    format="webp" loading="lazy" />
-            </div>
-            <div class="siteblock bg-white siteblock_content" :id="page.slug" v-if="delivery">
-                <div class="container">
-                    <div class="prose col-span-12 xl:col-span-6">
-                        <span v-html="delivery[0]"></span>
-                    </div>
-                    <div class="prose col-span-12 xl:col-span-6">
-                        <span v-html="delivery[1]"></span>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </template>
+    </div>
 </template>
\ No newline at end of file