seo to module

components/seo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { fetchData } = useApiFetch()
+const config = useRuntimeConfig()
+const { data: seo } = await fetchData<Seo[]>(`seo`)
+import og_img from '/og_img.png'
+
+useSeoMeta({
+    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
+})
+</script>

pages/index.vue

@@ -5,21 +5,10 @@ const imgBase = config.public.imgBase
 
 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`)
 const { data: calc_data } = await fetchData<CalcItem[]>(`calculator`)
 
-useSeoMeta({
-  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
-})
-
 const pages = computed(() => {
   const menu = menu_raw.value?.find(el => el.type == 1)
   return (menu?.pages || []).sort((a, b) => a.order - b.order)
@@ -42,6 +31,7 @@ const setCalcData = (txt: string) => {
 </script>
 <template>
   <div>
+    <Seo />
     <template v-for="page in pages" :key="page.slug">
       <template v-if="page.slug == 'about'">
         <div class="siteblock bg-white" :id="page.slug">
@@ -53,42 +43,24 @@ const setCalcData = (txt: string) => {
               </div>
             </div>
             <div class="siteblock-image">
-              <NuxtImg
-                :src="[imgBase, page.image].join('/')"
-                :alt="page.title"
-                title=""
-                format="webp"
-              />
+              <NuxtImg :src="[imgBase, page.image].join('/')" :alt="page.title" title="" format="webp" />
             </div>
           </div>
         </div>
       </template>
       <template v-if="page.slug == 'review'">
-        <div
-          class="siteblock siteblock_imgbg bg-slate-500"
-          :style="[
+        <div class="siteblock siteblock_imgbg bg-slate-500" :style="[
           { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
-          ]"
-        >
-          <NuxtImg
-            :src="[imgBase, page.image].join('/')"
-            :alt="page.title"
-            format="webp"
-            loading="lazy"
-          />
+        ]">
+          <NuxtImg :src="[imgBase, page.image].join('/')" :alt="page.title" format="webp" loading="lazy" />
         </div>
         <div class="siteblock bg-white">
           <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"
-                  />
+                  <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
+                    loading="lazy" />
                 </div>
                 <div class="review-content">
                   {{ item.comment }}
@@ -114,17 +86,10 @@ const setCalcData = (txt: string) => {
         </div>
       </template>
       <template v-if="page.slug == 'more'">
-        <div
-          class="siteblock siteblock_imgbg bg-slate-500"
-          :style="[
+        <div class="siteblock siteblock_imgbg bg-slate-500" :style="[
           { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
-          ]"
-        >
-          <NuxtImg
-            :src="[imgBase, page.image].join('/')"
-            format="webp"
-            loading="lazy"
-          />
+        ]">
+          <NuxtImg :src="[imgBase, page.image].join('/')" format="webp" loading="lazy" />
         </div>
         <div class="siteblock bg-white" :id="page.slug">
           <div class="container gap-4">
@@ -138,23 +103,12 @@ const setCalcData = (txt: string) => {
         </div>
       </template>
       <template v-if="page.slug == 'delivery'">
-        <div
-          class="siteblock siteblock_imgbg bg-slate-500"
-          :style="[
+        <div class="siteblock siteblock_imgbg bg-slate-500" :style="[
           { backgroundImage: `url(${[imgBase, page.image].join('/')})` }
-          ]"
-        >
-          <NuxtImg
-            :src="[imgBase, page.image].join('/')"
-            format="webp"
-            loading="lazy"
-          />
+        ]">
+          <NuxtImg :src="[imgBase, page.image].join('/')" format="webp" loading="lazy" />
         </div>
-        <div
-          class="siteblock bg-white siteblock_content"
-          :id="page.slug"
-          v-if="delivery"
-        >
+        <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>

pages/qr.vue

@@ -26,6 +26,8 @@ onMounted(() => {
 </script>
 
 <template>
+  <div>
+    <Seo />
     <div class="siteblock">
       <div class="container text-center">
         <h1 class="siteblock-title">QR-КОД</h1>
@@ -34,4 +36,5 @@ onMounted(() => {
         </div>
       </div>
     </div>
+  </div>
 </template>