start front

app.vue

@@ -13,6 +13,12 @@ type ApiKpType = {
   is_indexed: boolean
 }
 
+type ApiPagesType = {
+  id: number
+  title: string
+  content: string
+}
+
 const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
 useSeoMeta({
   title: seoData.value?.title,
@@ -22,9 +28,26 @@ useSeoMeta({
   // ogImage: 'https://example.com/image.png',
   // twitterCard: 'summary_large_image',
 })
+
+const { data: pagesData } = await useFetch<ApiPagesType>(`${apiBase}/pages/`)
+import '@/assets/main.scss'
 </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>
     <NuxtPage />
   </div>
 </template>

assets/main.scss

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {}
+
+body {
+    @apply bg-primary-500
+}
+
+.container {
+    @apply max-w-7xl mx-auto grid grid-cols-12
+}
+
+.header {
+    @apply p-2 bg-slate-200
+}
+
+.logo {
+    @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2
+}
+
+.menu {
+    @apply col-span-8 flex justify-between
+}
+
+a[href^="/#"] {
+    @apply underline decoration-dotted underline-offset-2 decoration-neutral-500
+}

nuxt.config.ts

@@ -1,6 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  modules: [
+    '@nuxtjs/tailwindcss'
+  ],
   runtimeConfig: {
     public: {
       apiBase: '/api',

package.json

@@ -10,8 +10,14 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "nuxt": "^3.11.2",
+    "tailwindcss": "^3.4.3",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.0",
+    "sass": "^1.77.4"
   }
 }

tailwind.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+import tailwindTypography from '@tailwindcss/typography'
+
+export default <Partial<Config>>{
+    theme: {
+        extend: {
+            colors: {
+                primary: colors.green
+            }
+        }
+    },
+    config: {
+        plugins: [tailwindTypography]
+    }
+}