mns-mini-zabor/app.vue

70 lines
1.6 KiB
Vue

<script setup lang="ts">
const config = useRuntimeConfig()
const apiBase = config.public.apiBase
type ApiKpType = {
id: number
title: string
content: string
url: string
meta_title: any
meta_description: string
keywords: any
is_indexed: boolean
}
type ApiPagesType = {
id: number
title: string
slug: string
content: string
}
import '@/assets/main.scss'
const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
useSeoMeta({
title: seoData.value?.title,
ogTitle: seoData.value?.title,
description: seoData.value?.content,
ogDescription: seoData.value?.content,
// ogImage: 'https://example.com/image.png',
// twitterCard: 'summary_large_image',
})
const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/`)
const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
</script>
<template>
<div>
<div class="header">
<div class="container">
<div class="logo">
Купи забор
</div>
<div class="menu">
<template v-for="item in pagesData">
<NuxtLink :to="`#${item.slug}`">
{{ item.title }}
</NuxtLink>
</template>
</div>
</div>
</div>
<div class="block bg-white">
<div class="container">
<div class="block-content">
<h2 class="block-title">{{ about?.title }}</h2>
<div class="block-text">
{{ about?.content }}
</div>
</div>
<div class="block-image">
</div>
</div>
</div>
<NuxtPage />
</div>
</template>